Nuxflare Auth: Pelayan auth hos kendiri ringan yang dibina dengan Nuxt, Cloudflare dan OpenAuth.js

Nuxflare Auth ialah pelayan pengesahan moden, ringan dan dihoskan sendiri yang direka untuk memudahkan penambahan pengesahan pada apl anda. Dibina dengan Nuxt 3, Cloudflare Workers dan OpenAuth.js, ia menggabungkan semua yang anda perlukan di satu tempat.

nuxflare / auth

Pelayan pengesahan yang moden, ringan, dihoskan sendiri yang dibina dengan Cloudflare, Nuxt dan OpenAuth.js.

Nuxflare Auth

Pelayan pengesahan yang moden, ringan, dihoskan sendiri yang dibina dengan Cloudflare, Nuxt dan OpenAuth.js.

Apa Ini?

Nuxflare Auth membolehkan anda menambahkan pengesahan pada apl anda tanpa rasa sakit kepala. Ia adalah monorepo yang menggabungkan semua yang anda perlukan:

• UI auth yang licin dibina dengan Nuxt 3 dan @nuxt/ui
• Sihir pengesahan belakang berjalan pada Cloudflare Workers
• Contoh sedia untuk digunakan supaya anda dapat melihat bagaimana semuanya sesuai

Ciri

• ? UI pengesahan lengkap termasuk:
  • Log masuk berasaskan kod
  • Log masuk berasaskan kata laluan
  • Terlupa aliran kata laluan
  • Pendaftaran pengguna
• ? Pengesahan OAuth2 dengan GitHub dan Google (tambah lebih banyak pembekal dengan mudah)
• ✉️ E-mel menggunakan Hantar Semula (atau gunakan mana-mana pembekal lain)
• ⚡ Sepantas kilat, dikuasakan oleh rangkaian tepi Cloudflare

Reka Letak Projek

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

Prasyarat

Sebelum bermula, anda memerlukan:

• pnpm
• Akaun Cloudflare
• Kelayakan OAuth daripada Google…

Lihat di GitHub

Mengapa Nuxflare Auth?

Dengan Nuxt, sudah ada modul auth yang baik seperti nuxt-auth-utils dan sidebase-auth.
Jadi, apakah yang berbeza tentang Nuxflare Auth?

• Decoupled Auth: Nuxflare Auth membolehkan anda menggunakan pelayan auth dan auth UI (dibina dengan Nuxt UI) secara berasingan daripada apl utama anda. Ini bermakna anda boleh menggunakan semula pelayan pengesahan anda dengan mudah untuk berfungsi dengan berbilang apl sisi pelanggan (dibina dengan Nuxt atau tidak), API luaran, apl mudah alih dan banyak lagi.
• Menggalakkan Seni Bina Monorepo: Dengan memisahkan apl Nuxt dan modul pengesahan anda, Nuxflare Auth mengekalkan saiz berkas minimum—sempurna untuk penempatan kepada Cloudflare Workers, yang mempunyai had saiz yang ketat: 3 MB untuk pelan percuma dan 10 MB untuk pelan berbayar.

Struktur Projek

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

Menggunakan Nuxflare Auth

Prasyarat

• pnpm
• Akaun Cloudflare
• Kelayakan OAuth daripada Google dan GitHub
• Hantar Semula kunci API untuk menghantar e-mel

Bermula

1. Klon repositori dan pasang kebergantungan:

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

1. Buat dan Konfigurasi Token API:

a. Cipta token Cloudflare API dengan kebenaran yang diperlukan menggunakan pautan ini.
b. Tetapkan pembolehubah persekitaran CLOUDFLARE_API_TOKEN:

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

1. Konfigurasikan rahsia anda:

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. Konfigurasikan fromEmail anda dalam 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. Mulakan pembangunan tempatan:

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

1. Kerahkan ke pengeluaran:

   pnpm dev

Contoh Apl Pelanggan

Repositori termasuk contoh aplikasi klien mudah di pakej/contoh-klien.

API untuk kompos sangat serupa dengan nuxt-auth-utils:

   pnpm sst deploy --stage production

Anda harus menghalakan klien ke titik akhir contoh pengesahan anda yang digunakan:

```tulisan taip [packages/example-client/app/utils/auth.ts]
const client = createClient({
ID pelanggan: "nuxt",
pengeluar: "https://authdemo.nuxflare.com", // <-- gantikan ini dengan titik akhir anda
});

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



          

            
        
Atas ialah kandungan terperinci Nuxflare Auth: Pelayan auth hos kendiri ringan yang dibina dengan Nuxt, Cloudflare dan OpenAuth.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!