Nuxflare Auth: Ein leichter, selbst gehosteter Authentifizierungsserver, der mit Nuxt, Cloudflare und OpenAuth.js erstellt wurde

Nuxflare Auth ist ein moderner, leichter, selbst gehosteter Authentifizierungsserver, der das Hinzufügen von Authentifizierung zu Ihren Apps zum Kinderspiel macht. Es basiert auf Nuxt 3, Cloudflare Workers und OpenAuth.js und bündelt alles, was Sie brauchen, an einem Ort.

nuxflare / Autor

Ein moderner, leichter, selbst gehosteter Authentifizierungsserver, der mit Cloudflare, Nuxt und OpenAuth.js erstellt wurde.

Nuxflare Auth

Ein moderner, leichter, selbst gehosteter Authentifizierungsserver, der mit Cloudflare, Nuxt und OpenAuth.js erstellt wurde.

Was ist das?

Mit Nuxflare Auth können Sie Ihren Apps ohne Probleme eine Authentifizierung hinzufügen. Es ist ein Monorepo, das alles bündelt, was Sie brauchen:

• Eine elegante Authentifizierungs-Benutzeroberfläche, die mit Nuxt 3 und @nuxt/ui erstellt wurde
• Backend-Authentifizierungsmagie läuft auf Cloudflare Workers
• Ein gebrauchsfertiges Beispiel, damit Sie sehen können, wie alles zusammenpasst

Funktionen

• ? Vollständige Authentifizierungs-Benutzeroberfläche, einschließlich:
  • Codebasierte Anmeldung
  • Passwortbasierte Anmeldung
  • Passwortfluss vergessen
  • Benutzerregistrierung
• ? OAuth2-Authentifizierung mit GitHub und Google (einfaches Hinzufügen weiterer Anbieter)
• ✉️ E-Mails mit Resend (oder einem anderen Anbieter verwenden)
• ⚡ Blitzschnell, unterstützt durch das Edge-Netzwerk von Cloudflare

Projektlayout

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

Voraussetzungen

Bevor Sie beginnen, benötigen Sie:

• pnpm
• Ein Cloudflare-Konto
• OAuth-Anmeldeinformationen von Google…

Auf GitHub ansehen

Warum Nuxflare Auth?

Mit Nuxt gibt es bereits gute Authentifizierungsmodule wie nuxt-auth-utils und sidebase-auth.
Was ist also der Unterschied zu Nuxflare Auth?

• Entkoppelte Authentifizierung: Mit Nuxflare Auth können Sie den Authentifizierungsserver und die Authentifizierungs-Benutzeroberfläche (erstellt mit der Nuxt-Benutzeroberfläche) getrennt von Ihrer Haupt-App bereitstellen. Das bedeutet, dass Sie Ihren Authentifizierungsserver problemlos wiederverwenden können, um mit mehreren clientseitigen Apps (mit Nuxt erstellt oder nicht), externen APIs, mobilen Apps und mehr zu arbeiten.
• Fördert die Monorepo-Architektur: Durch die Aufteilung Ihrer Nuxt-App und Ihres Authentifizierungsmoduls hält Nuxflare Auth die Paketgröße minimal – perfekt für Bereitstellungen auf Cloudflare Workers, die strenge Größenbeschränkungen haben: 3 MB für den kostenlosen Plan und 10 MB für der kostenpflichtige Plan.

Projektstruktur

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

Bereitstellen von Nuxflare Auth

Voraussetzungen

• pnpm
• Ein Cloudflare-Konto
• OAuth-Anmeldeinformationen von Google und GitHub
• Ein Resend-API-Schlüssel zum Senden von E-Mails

Erste Schritte

1. Klonen Sie das Repository und installieren Sie Abhängigkeiten:

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

1. API-Token erstellen und konfigurieren:

a. Erstellen Sie über diesen Link ein Cloudflare-API-Token mit den erforderlichen Berechtigungen.
B. Legen Sie die Umgebungsvariable CLOUDFLARE_API_TOKEN fest:

   git clone https://github.com/nuxflare/auth nuxflare-auth
   cd nuxflare-auth
   pnpm install

1. Konfigurieren Sie Ihre Geheimnisse:

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. Konfigurieren Sie Ihre fromEmail in sst.config.ts:

   # OAuth stuff
   pnpm sst secret set GoogleClientID your_client_id
   pnpm sst secret set GoogleClientSecret your_client_secret
   pnpm sst secret set GithubClientID your_client_id
   pnpm sst secret set GithubClientSecret your_client_secret

   # For emails
   pnpm sst secret set ResendApiKey your_resend_api_key

1. Lokale Entwicklung starten:

   async run() {
     const fromEmail = "hi@nuxflare.com";
     // ...
   }

1. In der Produktion bereitstellen:

   pnpm dev

Beispiel-Client-App

Das Repository enthält eine einfache Beispiel-Client-App unter packets/example-client.

Die API für die Composables ist nuxt-auth-utils sehr ähnlich:

   pnpm sst deploy --stage production

Sie sollten den Client auf den Endpunkt Ihrer bereitgestellten Authentifizierungsinstanz verweisen:

```typescript [packages/example-client/app/utils/auth.ts]
const client = createClient({
clientID: „nuxt“,
Aussteller: „https://authdemo.nuxflare.com“, // <-- ersetzen Sie dies durch Ihren Endpunkt
});

export const useSession = () => {
  const sessionState = useSessionState();
  const accessToken = useAccessTokenCookie();
  const refreshToken = useRefreshTokenCookie();
  const clear = () => {
    sessionState.value = {};
    accessToken.value = null;
    refreshToken.value = null;
  };
  return {
    loggedIn: computed(() => !!sessionState.value.user),
    user: computed(() => sessionState.value.user || null),
    session: sessionState,
    clear,
  };
};



          

            
        
Das obige ist der detaillierte Inhalt vonNuxflare Auth: Ein leichter, selbst gehosteter Authentifizierungsserver, der mit Nuxt, Cloudflare und OpenAuth.js erstellt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!