For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /it/docs/web/google-sign-in.md (or send Accept: text/markdown).
Aggiungi l'accesso con Google
Crea un client OAuth di Google Cloud gratuito e collega «Continua con Google» all'app.
Procedura dettagliata per principianti
Prerequisiti: l'app web in esecuzione in locale (Online in 5 minuti) e un database migrato per account reali (Configura il database). Serve un normale account Google; tutto qui è gratuito e richiede circa 10 minuti.
Terminologia rapida: OAuth è lo standard con cui Google autentica l'utente sulla pagina di Google e consegna una prova alla tua app. Un progetto Google Cloud è un contenitore nella console di Google che custodisce le credenziali dell'app. La schermata di consenso OAuth è la pagina che Google mostra agli utenti prima di rimandarli indietro. Un client ID identifica la tua app presso Google; il client secret è la sua password e resta sul server.
1. Crea un progetto Google Cloud. 2. Configura la schermata di consenso. 3. Crea un client OAuth Web e copia ID e segreto. 4. Incolla tre valori in apps/web/.env.local e riavvia il dev server.
Un solo progetto basta per l'intero prodotto: lo stesso progetto Google Cloud ospiterà poi la tua distribuzione su Cloud Run, e l'accesso mobile passa per lo stesso backend web — non crei un client separato per piattaforma o funzionalità.
Creare il progetto Google Cloud
1. Apri console.cloud.google.com e accedi con il tuo account Google.
2. Fai clic sul menu a discesa del progetto nella barra in alto (accanto al logo di Google Cloud) e scegli New Project.
3. Assegnagli un nome — va bene il nome del prodotto — e fai clic su Create. Non servono organizzazione, carta né account di fatturazione per le credenziali di accesso.
Atteso: la console si ricarica nel nuovo progetto e il suo nome appare nella barra in alto. Riutilizza questo progetto quando raggiungerai la guida alla distribuzione invece di crearne un altro.
Configurare la schermata di consenso OAuth
1. Nella navigazione a sinistra apri APIs & Services → OAuth consent screen e fai clic su Get started.
2. Inserisci il nome dell'app che gli utenti vedranno (il nome del prodotto), scegli un'email di supporto utente, seleziona External come audience, compila l'email di contatto dello sviluppatore e fai clic fino a Create.
3. Su questa schermata non serve altro: l'app richiede solo gli scope predefiniti openid, email e profile, che non richiedono scope extra né verifica.
Lo stato di pubblicazione resta Testing mentre sviluppi. In quella modalità solo gli account elencati possono accedere — aggiungi quindi il tuo indirizzo Gmail sotto Audience → Test users, altrimenti Google blocca anche te. Quando il prodotto è online, fai clic su Publish app; poiché non vengono richiesti scope sensibili, la pubblicazione non avvia una verifica di revisione di Google.
Creare il client OAuth
1. Apri APIs & Services → Credentials → + Create Credentials → OAuth client ID.
2. Imposta Application type su Web application e chiamalo ad esempio supastack local.
3. Sotto Authorized JavaScript origins aggiungi http://localhost:3000. Sotto Authorized redirect URIs aggiungi http://localhost:3000/api/auth/callback/google — quel percorso di callback appartiene a Better Auth, il motore di autenticazione predefinito del kit: {APP_URL}/api/auth/callback/google.
4. Fai clic su Create e copia il Client ID e il Client Secret dalla finestra di dialogo. Puoi riaprirli nella pagina del client più tardi, ma copiarli ora ti risparmia un passaggio.
Per la produzione crea un secondo client Web (consigliato) oppure aggiungi a questo: origine JavaScript https://yourdomain.com e URI di reindirizzamento https://yourdomain.com/api/auth/callback/google. Tenere client separati per ambiente significa che un segreto locale compromesso non può raggiungere la produzione.
Aggiungere i valori all'app
Apri apps/web/.env.local — Next.js legge questo file, non il .env di root — e inserisci le tre righe qui sotto. AUTH_GOOGLE_ENABLED=true accende il pulsante; la coppia client identifica il tuo client di Google Cloud.
Il client secret resta solo sul server: non deve mai apparire in una variabile NEXT_PUBLIC_ o EXPO_PUBLIC_ né essere committato su Git. In produzione imposta gli stessi tre nomi nell'archivio dei segreti del tuo host invece che in un file env.
Riavvia il dev server dopo la modifica — i cambiamenti all'ambiente vengono letti solo all'avvio.
# apps/web/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secretVerificare e risolvere i problemi
Apri http://localhost:3000/auth, fai clic sul pulsante Google, completa la schermata di consenso di Google e conferma che l'app torna con l'accesso effettuato.
redirect_uri_mismatch significa che l'URI di reindirizzamento registrato su Google non corrisponde esattamente — ricontrolla il protocollo (http vs https), la porta e il percorso: deve finire con /api/auth/callback/google, non /callback/google/ né una variante con slash finale.
Access blocked / has not completed the Google verification process significa che la schermata di consenso è ancora in Testing e l'account che accede non è elencato sotto Test users — aggiungilo nella sezione Audience.
Se manca il pulsante Google o l'accesso continua a fallire dopo aver modificato .env.local, riavvia il dev server. Se l'avvio fallisce nominando una variabile, il flag è attivo senza la sua coppia client completa.
Per continuare la configurazione, leggi Aggiungi l'accesso con GitHub.