Objectiu Configurar inici de sessió amb Google en un projecte Next.js orientat a un CMS intern on no existeix un flux de registre públic i els usuaris són afegits per un administrador
Resum de l'enfocament S'utilitza un kit inicial com a base, es configura OAuth 2.0 amb Google per permetre només inici de sessió, es guarda la informació mínima de l'usuari i es gestiona sessió segura mitjançant cookies HTTP only i una taula de sessions a Postgres gestionada amb Drizzle
Repositori de referència https://github.com/justin-calleja/next-google-auth-blog-post i kit inicial https://github.com/webdevcody/wdc-saas-starter-kit
Credencials de Google Crear projecte a console.cloud.google.com, configurar OAuth Consent Screen, crear credencials tipus web application, afegir a Authorized JavaScript origins la URL de desenvolupament https://localhost:3000 i a Authorized redirect URIs la ruta https://localhost:3000/api/sign-in/google/callback Copiar CLIENT ID i CLIENT SECRET i col·locar-los al fitxer d'entorn .env com GOOGLE_CLIENT_ID i GOOGLE_CLIENT_SECRET També definir HOST_NAME per construir la URL de callback
Instal·lació de dependències Instal·lar Drizzle i dependències de base de dades com drizzle-orm pg dotenv i com a dependències de desenvolupament drizzle-kit tsx @types/pg Per al flux OAuth es recomana utilitzar la llibreria arctic que abstrau les complexitats d'OAuth 2.0 i permet afegir nous proveïdors amb facilitat
Postgres local utilitzar docker-compose amb una imatge de Postgres 15 i volum persistent, crear una base de dades dedicada per al projecte i inicialitzar-la amb un script init-db.sql que creï la base next-google-auth-db Amb DATABASE_URL a .env apuntant a postgresql://admin:pass234@localhost:5432/next-google-auth-db es pot utilitzar psql o eines com drizzle-kit studio per inspeccionar la base
Definició d'esquemes amb Drizzle crear una taula tmp_user amb columnes id, email, name, given_name, family_name, picture i una taula tmp_session amb id, userId que referencia tmp_user id amb on delete cascade i expires_at timestamp with time zone L'índex a userId ajuda en operacions com tancar sessió en tots els dispositius
Migracions i sincronització executar drizzle-kit generate per generar les migracions i drizzle-kit migrate per aplicar-les Això crea les taules tmp_user i tmp_session segons l'esquema definit i deixa l'estructura llesta per a l'ús del CMS intern
Next.js UI bàsica instal·lar shadcn i afegir el component Button per crear una pàgina d'inici de sessió que mostri un botó Continue with Google que apunti a la ruta /api/sign-in/google
Flux OAuth amb arctic instal·lar arctic i crear dos endpoints principals 1 Ruta GET a /api/sign-in/google que generi un state i un code verifier, construeixi la URL d'autorització amb els scopes profile i email, emmagatzemi state i code verifier en cookies segures HTTP only i redirigeixi l'usuari a Google 2 Ruta GET a /api/sign-in/google/callback que rebi els paràmetres code i state, compari el state rebut amb l'emmagatzemat a cookie, validi el code utilitzant el code verifier i rebi tokens. Amb l'access token cridar a https://openidconnect.googleapis.com/v1/userinfo amb encapçalament Authorization Bearer per obtenir les dades de l'usuari
Validació al CMS intern en rebre les dades de Google buscar per email a la taula tmp_user Si no existeix l'email es considera que l'usuari no està autoritzat i es redirigeix a /sign-in amb error unauthorized Si existeix l'usuari actualitzar camps que falten com name, given_name, family_name o picture i continuar amb la creació de sessió
Identificador segur utilitzar sempre sub del payload OpenID Connect com a identificador canònic de l'usuari si es necessita identificar de forma única entre proveïdors encara que en un CMS controlat per administrador el control per email pot ser suficient segons la política interna
Gestió de sessions generar un token de sessió amb valors aleatoris criptogràficament segurs, codificar-lo i emmagatzemar en cookie HTTP only sense accés des de JavaScript Abans de persistir la sessió a la base de dades hashejar el token i emmagatzemar el hash a tmp_session juntament amb expires_at D'aquesta manera la cookie conté el token sense revelar el seu hash i la verificació es fa hashejant el token rebut
Validació i extensió de sessió proporcionar funcions per obtenir el token de la cookie, hashejar-lo i buscar la sessió a tmp_session Si la sessió expira retornar que no hi ha usuari autenticat A les pàgines protegides del servidor utilitzar una funció assertAuthenticated que obtingui l'usuari actual i llanci error si no existeix La validació pot renovar l'expiració si es desitja un comportament de sliding sessions
Maneig d'errors al flux OAuth redirigir a la pàgina d'inici de sessió amb paràmetres a la query per mostrar missatges com error unauthorized o error something-went-wrong i mostrar a l'usuari informació clara sense exposar detalls sensibles
Beneficis i seguretat Aquest enfocament evita registres públics, centralitza el control d'accés mitjançant un administrador, utilitza cookies segures i HTTP only, hash de tokens a la base de dades i validació de state i code verifier per mitigar atacs CSRF i replay al flux OAuth
Sobre Q2BSTUDIO Q2BSTUDIO és una empresa de desenvolupament de programari i aplicacions a mida especialitzada en solucions empresarials segures i escalables Oferim programari a mida, aplicacions a mida, intel·ligència artificial aplicada, ciberseguretat i serveis cloud aws i azure També realitzem projectes de serveis intel·ligència de negoci, implementació de Power BI, agents IA i solucions d'ia per a empreses La nostra experiència cobreix des de MVPs fins a plataformes productives amb integracions cloud i pràctiques de seguretat robustes
Per què triar-nos Q2BSTUDIO combina experiència en desenvolupament a mida i en intel·ligència artificial per oferir productes que realment aporten valor treballem amb arquitectures cloud a aws i azure i apliquem bones pràctiques de ciberseguretat per protegir dades crítiques A més oferim serveis intel·ligència de negoci i Power BI per convertir dades en decisions operatives i estratègiques Podem integrar agents IA per automatitzar fluxos i potenciar processos interns amb ia per a empreses
Serveis relacionats oferts integració d'inici de sessió únic amb proveïdors OAuth i OpenID Connect desenvolupament d'API segures gestió de sessions i autenticació adaptada a entorns interns auditoria i hardening de seguretat migració i desplegament en serveis cloud aws i azure implementació de pipelines de dades i solucions de serveis intel·ligència de negoci desenvolupament d'aplicacions a mida i integració d'agents IA i solucions d'intel·ligència artificial per a processos de negoci
Conclusió Implementar Google sign-in a Next.js per a un CMS intern és totalment factible i segur si se segueixen les millors pràctiques descrites generar state i code verifier, utilitzar cookies segures HTTP only, validar el code i utilitzar sub o un criteri intern d'identificació, mantenir tokens hashejats a la base de dades i validar sessions a cada pàgina protegida Q2BSTUDIO pot ajudar en el disseny i implementació d'aquest flux, adaptar la solució a les seves necessitats i garantir que la plataforma sigui escalable, segura i alineada amb els seus objectius de negoci Contacteu amb nosaltres per construir la vostra solució de programari a mida que inclogui autenticació segura, intel·ligència artificial i capacitats d'intel·ligència de negoci
