Nuxflare Auth est un serveur d'authentification moderne, léger et auto-hébergé conçu pour faciliter l'ajout d'authentification à vos applications. Construit avec Nuxt 3, Cloudflare Workers et OpenAuth.js, il regroupe tout ce dont vous avez besoin en un seul endroit.

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

Pourquoi Nuxflare Auth ?

Avec Nuxt, il existe déjà de bons modules d'authentification comme nuxt-auth-utils et sidebase-auth.
Alors, en quoi Nuxflare Auth est-il différent ?

• Authentification découplée : Nuxflare Auth vous permet de déployer le serveur d'authentification et l'interface utilisateur d'authentification (construite avec Nuxt UI) séparément de votre application principale. Cela signifie que vous pouvez facilement réutiliser votre serveur d'authentification pour travailler avec plusieurs applications côté client (construites avec Nuxt ou non), des API externes, des applications mobiles, etc.
• Encourage l'architecture Monorepo : En divisant votre application Nuxt et votre module d'authentification, Nuxflare Auth maintient la taille du bundle minimale, ce qui est parfait pour les déploiements sur Cloudflare Workers, qui ont des limites de taille strictes : 3 Mo pour le forfait gratuit et 10 Mo pour le forfait gratuit. le forfait payant.

Structure du projet

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

Déployer l'authentification Nuxflare

Conditions préalables

• pnpm
• Un compte Cloudflare
• Identifiants OAuth de Google et GitHub
• Une clé API Renvoyer pour l'envoi d'emails

Commencer

1. Clonez le référentiel et installez les dépendances :

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

1. Créer et configurer un jeton API :

a. Créez un jeton API Cloudflare avec les autorisations requises en utilisant ce lien.
b. Définissez la variable d'environnement CLOUDFLARE_API_TOKEN :

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

1. Configurez vos secrets :

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. Configurez votre fromEmail dans 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. Démarrer le développement local :

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

1. Déployer en production :

   pnpm dev

Exemple d'application client

Le référentiel comprend un exemple d'application client simple dans packages/example-client.

L'API pour les composables est très similaire à nuxt-auth-utils :

   pnpm sst deploy --stage production

Vous devez pointer le client vers le point de terminaison de votre instance d'authentification déployée :

```typescript [packages/example-client/app/utils/auth.ts]
const client = créerClient({
ID client : "nuxt",
émetteur : "https://authdemo.nuxflare.com", // <-- remplacez-le par votre point de terminaison
});

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,
  };
};



          

            
        
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!