Login utenti (magic link + Google)

L'auth in ZeroToShip la gestisce Supabase. Due modi per entrare: magic link via email o OAuth con Google. Zero password, zero form dimenticate, zero reset. Il codice che fa girare tutto vive già in app/signin/page.tsx.

1. Il magic link

L'utente scrive la sua email, tu chiami supabase.auth.signInWithOtp(). Supabase manda un'email con un link. Se lo clicca, torna sul tuo sito autenticato:

await supabase.auth.signInWithOtp({
  email,
  options: {
    emailRedirectTo: window.location.origin + "/api/auth/callback",
  },
});

2. Il bottone Google

Stessa storia, provider diverso. OAuth redirect gestito da Supabase:

await supabase.auth.signInWithOAuth({
  provider: "google",
  options: {
    redirectTo: window.location.origin + "/api/auth/callback",
  },
});

Per farlo funzionare devi aver abilitato Google come provider nella dashboard Supabase (Authentication → Providers → Google) e incollato lì i tuoi Client ID e Client Secret da Google Cloud Console.

3. Il callback

Sia il magic link che Google atterrano su /api/auth/callback. Quella route scambia il codice OAuth per una sessione e redirige alla pagina definita in config.auth.callbackUrl (default: /dashboard):

const code = requestUrl.searchParams.get("code");

if (code) {
  const supabase = await createClient();
  await supabase.auth.exchangeCodeForSession(code);
}

return NextResponse.redirect(requestUrl.origin + config.auth.callbackUrl);

4. Proteggere una rotta

Su un server component usi il client di libs/supabase/server.ts e controlli se c'è un utente. Se non c'è, redirect al login:

import { redirect } from "next/navigation";
import { createClient } from "@/libs/supabase/server";
import config from "@/config";

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

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

  return <h1>Ciao {user.email}</h1>;
}

Se vuoi proteggere tutta una sezione di sito, mettilo nel layout.tsx — è già fatto per te sotto /app/dashboard/. Vai a Creare una pagina privata per il dettaglio.