Button GitHub Sign-in

Bottone “Accedi con GitHub” riutilizzabile: avvia il flusso OAuth di Supabase e lascia che sia /api/auth/callback a scambiare il code con la sessione. Utile soprattutto in un boilerplate per sviluppatori, dove GitHub è il login più naturale. Client component.

File

components/ButtonGithubSignin.tsx

Uso base

import ButtonGithubSignin from "@/components/ButtonGithubSignin";

// versione base
<ButtonGithubSignin />

// con etichetta e stile custom, e ritorno alla pagina corrente
<ButtonGithubSignin
  label="Continua con GitHub"
  className="w-full"
  redirectTo="/checkout-success"
/>

Props

• className?: string — default "". Appesa alle classi base btn-brutal-primary inline-flex items-center justify-center gap-2.
• label?: string — default "Accedi con GitHub".
• redirectTo?: string — pagina su cui vuoi tornare dopo lo scambio del code. Viene messa in query string come ?next=... sulla URL di callback.

Cosa succede al click

const callback =
  window.location.origin +
  "/api/auth/callback" +
  (redirectTo ? `?next=${encodeURIComponent(redirectTo)}` : "");

await supabase.auth.signInWithOAuth({
  provider: "github",
  options: { redirectTo: callback },
});

Supabase manda il browser su GitHub, GitHub rimanda su /api/auth/callback, e lì exchangeCodeForSession crea i cookie di sessione. Lo spinner resta acceso fino alla navigazione: setLoading(false) viene chiamato solo nel catch, perché in caso di successo la pagina sta già cambiando.

Prima che funzioni

• Attiva il provider GitHub nel dashboard Supabase (Authentication → Providers) e incolla Client ID e Secret della tua OAuth App.
• Nella OAuth App di GitHub, la callback URL è quella di Supabase (https://<project>.supabase.co/auth/v1/callback), non la tua.
• Aggiungi il tuo dominio alle Redirect URL consentite in Supabase, altrimenti in produzione il redirect viene rifiutato.

Personalizzare

• Far funzionare davvero redirectTo: oggi app/api/auth/callback/route.ts ignora il parametro next e manda sempre su config.auth.callbackUrl. Se ti serve, leggilo:

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

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

• Altri provider: cambia provider: "github" in "google", "gitlab"… e sostituisci l'SVG. La pagina app/signin/page.tsx fa già lo stesso flusso in modo generico con un parametro provider.
• Scope extra: aggiungi options.scopes se ti servono permessi GitHub oltre al profilo (es. repo).