Button Sign-in

Bottone che cambia faccia a seconda della sessione: se non sei loggato è un link alla pagina di login, se sei loggato mostra il tuo avatar (o l'iniziale) e porta alla pagina privata. Client component: legge l'utente con il client browser di Supabase in un useEffect.

File

components/ButtonSignin.tsx

Uso base

import ButtonSignin from "@/components/ButtonSignin";

<ButtonSignin text="Inizia ora" extraStyle="btn-brutal-mustard" />

Props

• text?: string — default "Inizia ora". È l'etichetta mostrata solo nello stato non loggato. Da loggato il testo diventa il nome, oppure l'email, oppure “Account”.
• extraStyle?: string — classi extra appese al <Link> in entrambi gli stati.

Come decide dove mandarti

• Non loggato → config.auth.loginUrl (di default /signin), classe btn-brutal-primary.
• Loggato → config.auth.callbackUrl (di default /dashboard), classe btn-brutal, con user_metadata.avatar_url se il provider lo fornisce, altrimenti un quadrato con l'iniziale.

auth: {
  loginUrl: "/signin",
  callbackUrl: "/dashboard",
},

Personalizzare

• Destinazioni: non toccare il componente, cambia config.auth. Gli stessi valori sono usati da libs/api.ts e dalla route di callback — vedi Autenticazione.
• Il primo frame: finché getUser() non risponde, user è null e vedi lo stato “non loggato”. Se ti dà fastidio il salto, aggiungi uno stato isLoading e renderizza uno skeleton.
• Avatar: la <img> punta direttamente all'URL del provider con referrerPolicy="no-referrer". Se vuoi next/image, ricordati di aggiungere il dominio in next.config.js.
• Server component: non puoi usarlo dentro un server component senza il boundary, perché ha "use client". Va bene comunque importarlo da una pagina server: Next crea il boundary da solo.