Add an auth provider

Sign-in options are a list. To add GitHub, swap to Clerk, or layer in Auth0, you edit the providers array in libs/auth.ts. Read the auth model for how sessions and providers fit together.

Add an OAuth provider

NextAuth ships dozens of providers. Adding one is two lines plus two env vars.

libs/auth.ts

import GitHubProvider from "next-auth/providers/github";

const providers = [
  GoogleProvider({ clientId: env.GOOGLE_CLIENT_ID, clientSecret: env.GOOGLE_CLIENT_SECRET }),
  GitHubProvider({ clientId: env.GITHUB_CLIENT_ID, clientSecret: env.GITHUB_CLIENT_SECRET }),
  // ...email provider when a backend is present
];

Add GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET to libs/config.ts, and register the callback URL /api/auth/callback/github in the GitHub OAuth app.

Swap to Clerk or Auth0

Pick the integration

Auth0 is a NextAuth provider, so it drops into the same array. Clerk replaces NextAuth with its own SDK and components, a larger change but a well-documented one.

Keep the session shape

Whatever you choose, expose the same user fields the app already reads (id, email, role). Then nothing downstream, including the middleware.ts gate, needs to change.

Update the route protection

If you replace NextAuth entirely, update how middleware.ts detects a session. That gate is what protects every route, so test a protected page after the swap.

Next steps

Authentication (how-to)The current setup.Auth modelSessions and providers explained.Security modelThe middleware gate.