Supabase Auth in Next.js — Google OAuth & Magic Links

Why Supabase for auth?

Supabase gives you a complete auth system backed by PostgreSQL. You get Google OAuth, Magic Links (passwordless email), and email/password — all managed for you. No separate auth service, no extra bills. Users sign up, Supabase creates a row, and you query it like any other table.

Step 1: Create a Supabase project

Go to supabase.com and create a new project. In your project settings, find API and copy the Project URL and anon key. Add them to .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...

Step 2: Enable Google OAuth

In the Supabase Dashboard go to Authentication > Providers > Google. Enable it and paste your Google OAuth Client ID and Secret (from Google Cloud Console). Set the redirect URL to your Supabase callback URL (shown in the Supabase dashboard).

For Magic Links, they're enabled by default — Supabase sends a login link to the user's email. No password needed.

Step 3: Server client in Next.js 15

Install @supabase/supabase-js and @supabase/ssr. In Next.js 15, the server client is async:

import { createClient } from "@/libs/supabase/server";

export default async function DashboardPage() {
  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();

  if (!user) {
    redirect("/signin");
  }

  return <div>Hello {user.email}</div>;
}

On the client side (components with "use client"), use the non-async client: const supabase = createClient(); (no await).

Step 4: Protect routes with middleware

Create middleware.ts in your project root. Use Supabase's @supabase/ssr to refresh the session on every request. If the user isn't authenticated and tries to access /dashboard, redirect them to /signin. This runs on the edge, so it's fast and secure.

Done

You now have Google OAuth and Magic Links working with Supabase in Next.js 15. Users can sign in with one click (Google) or receive a passwordless link in their email. The server client handles sessions, and middleware protects your private routes.