Nuxflare Auth: A lightweight self-hosted auth server built with Nuxt, Cloudflare and OpenAuth.js

Nuxflare Auth is a modern, lightweight, self-hosted authentication server designed to make adding auth to your apps a breeze. Built with Nuxt 3, Cloudflare Workers, and OpenAuth.js, it bundles everything you need in one place.

nuxflare / auth

A modern, lightweight, self-hosted auth server built with Cloudflare, Nuxt, and OpenAuth.js.

Nuxflare Auth

A modern, lightweight, self-hosted auth server built with Cloudflare, Nuxt, and OpenAuth.js.

What's This?

Nuxflare Auth lets you add authentication to your apps without the headache. It's a monorepo that bundles everything you need:

• A slick auth UI built with Nuxt 3 and @nuxt/ui
• Backend auth magic running on Cloudflare Workers
• A ready-to-use example so you can see how it all fits together

Features

• ? Complete authentication UI including:
  • Code-based login
  • Password-based login
  • Forgot password flow
  • User registration
• ? OAuth2 authentication with GitHub and Google (easily add more providers)
• ✉️ Emails using Resend (or use any other provider)
• ⚡ Lightning-fast, powered by Cloudflare's edge network

Project Layout

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

Prerequisites

Before getting started, you'll need:

• pnpm
• A Cloudflare account
• OAuth credentials from Google…

View on GitHub

Why Nuxflare Auth?

With Nuxt, there are already good auth modules like nuxt-auth-utils and sidebase-auth.
So, what’s different about Nuxflare Auth?

• Decoupled Auth: Nuxflare Auth lets you deploy the auth server and auth UI (built with Nuxt UI) separately from your main app. This means you can easily reuse your auth server to work with multiple client-side apps (built with Nuxt or not), external APIs, mobile apps, and more.
• Encourages Monorepo Architecture: By splitting your Nuxt app and auth module, Nuxflare Auth keeps the bundle size minimal—perfect for deployments to Cloudflare Workers, which have strict size limits: 3 MB for the free plan and 10 MB for the paid plan.

Project Structure

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

Deploying Nuxflare Auth

Prerequisites

• pnpm
• A Cloudflare account
• OAuth credentials from Google and GitHub
• A Resend API key for sending emails

Getting Started

1. Clone the repository and install dependencies:

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

1. Create and Configure API Token:

a. Create a Cloudflare API token with the required permissions using this link.
b. Set the CLOUDFLARE_API_TOKEN environment variable:

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

1. Configure your secrets:

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. Configure your 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. Start local development:

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

1. Deploy to production:

   pnpm dev

Example Client App

The repository includes a simple example client app at packages/example-client.

The API for the composables is very similar to nuxt-auth-utils:

   pnpm sst deploy --stage production

You should point the client to the endpoint of your deployed auth instance:

```typescript [packages/example-client/app/utils/auth.ts]
const client = createClient({
clientID: "nuxt",
issuer: "https://authdemo.nuxflare.com", // });

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

The above is the detailed content of Nuxflare Auth: A lightweight self-hosted auth server built with Nuxt, Cloudflare and OpenAuth.js. For more information, please follow other related articles on the PHP Chinese website!