Customise

Authentication

Google and magic link are already on /signin. Protect pages by copying the dashboard layout. Change URLs in config.ts.

/signin offers Google and a magic link. After either flow, Supabase redirects to /api/auth/callback, which exchanges the code and sends the user to config.auth.callbackUrl (/dashboard by default).

Connect the project first: Supabase.

What you configure

Need	Where
Sign-in path	`config.auth.loginUrl`
Post-login path	`config.auth.callbackUrl`
Google + Email	Supabase dashboard, not the Next.js app
Redirect allowlist	Supabase → `/api/auth/callback`

Leave app/signin/page.tsx and app/api/auth/callback/route.ts as they are unless you are adding a provider.

Protect a page

app/dashboard/layout.tsx already does this:

const supabase = await createClient();
const {
  data: { user },
} = await supabase.auth.getUser();

if (!user) {
  redirect(config.auth.loginUrl);
}

Copy that layout around any route group you want signed-in only. Middleware refreshes the session. It does not redirect. Keep auth checks in the layout or page.

apiClient sends the browser to loginUrl on a 401.

Client vs server

Server: await createClient() from @/libs/supabase/server
Client: createClient() from @/libs/supabase/client — no await

Add another OAuth provider

Supabase must enable the provider. Then add a button on /signin next to Google.

Add GitHub sign-in