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.

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:
   git clone https://github.com/nuxflare/auth nuxflare-auth
   cd nuxflare-auth
   pnpm install
   

2. 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:
   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
   

3. Configure your secrets:
   # 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
   

4. Configure your fromEmail in sst.config.ts:
   async run() {
     const fromEmail = "hi@nuxflare.com";
     // ...
   }
   

5. Start local development:
   pnpm dev
   

6. Deploy to production:
   pnpm sst deploy --stage production
   

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:

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

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

const client = createClient({
  clientID: "nuxt",
  issuer: "https://authdemo.nuxflare.com", // <-- replace this with your endpoint
});

Thanks for reading! If you encounter any issues or have suggestions, please open an issue on our GitHub repository.