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.

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

Clone the repository and install dependencies:

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

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:
Terminal window
```
export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

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

Configure your fromEmail in sst.config.ts:

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

Start local development:
Terminal window
```
pnpm dev
```
Deploy to production:
Terminal window
```
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.