EmpiezaTuSaaS
Tutoriales

Autenticación de usuario

Configura Google OAuth y login con email paso a paso

Autenticación de usuario

Configura login con Google OAuth y email/password en tu SaaS. Al terminar tendrás:

  • Login con Google (un click)
  • Registro con email y password
  • Verificación de email automatica
  • Sesiónes persistentes de 30 dias

EmpiezaTuSaaS usa Better Auth como framework de autenticación. Consulta su documentacion oficial para opciones avanzadas como 2FA, magic links o passkeys.

Prerequisito: tener la base de datos configurada y el proyecto funcionando (npm run dev).

Paso 1: Crea un proyecto en Google Cloud

Accede a Google Cloud Console

  1. Ve a console.cloud.google.com
  2. Inicia sesión con tu cuenta de Google
  3. Click en Select a project > New Project
  4. Nombre: Mi SaaS (o el nombre de tu app)
  5. Click Create

Configura la pantalla de consentimiento OAuth

  1. Ve a APIs & Services > OAuth consent screen
  2. Selecciona External y click Create
  3. Rellena los campos obligatorios:
    • App name: El nombre de tu SaaS
    • User support email: Tu email
    • Developer contact: Tu email
  4. Click Save and Continue
  5. En Scopes, click Add or Remove Scopes
  6. Selecciona email y profile, luego Update
  7. Click Save and Continue hasta terminar

Mientras tu app este en modo Testing, solo los emails que anadiste como test users pueden iniciar sesión. Para permitir cualquier cuenta de Google, publica la app.

Crea las credenciales OAuth

  1. Ve a APIs & Services > Credentials
  2. Click Create Credentials > OAuth client ID
  3. Tipo de aplicación: Web application
  4. Nombre: Mi SaaS Web
  5. Configura las URLs:
Authorized JavaScript origins:
http://localhost:3000

Authorized redirect URIs:
http://localhost:3000/api/auth/callback/google
  1. Click Create
  2. Copia el Client ID y Client Secret

Guarda estas credenciales en un lugar seguro. Las necesitarás en el siguiente paso.

Paso 2: Configura las variables de entorno

Añade las credenciales de Google a tu archivo .env:

.env
# Google OAuth
GOOGLE_CLIENT_ID="tu-client-id.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="GOCSPX-tu-client-secret"

Estas variables las consume lib/auth/index.ts, que ya viene configurado con el proveedor de Google:

lib/auth/index.ts
socialProviders: {
  google: {
    clientId: process.env.GOOGLE_CLIENT_ID!,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
  },
},

Paso 3: Entiende la configuración de Better Auth

El archivo lib/auth/index.ts configura toda la autenticación del boilerplate. Consulta las opciones de configuración de Better Auth para ver todas las posibilidades.

lib/auth/index.ts
import { betterAuth } from "better-auth";
import { prismaAdapter } from "@better-auth/prisma-adapter";
import { multiSession, admin } from "better-auth/plugins";
import { db } from "@/lib/db";

export const auth = betterAuth({
  database: prismaAdapter(db, {
    provider: "postgresql",
  }),
  baseURL: process.env.BETTER_AUTH_URL || siteConfig.url,
  secret: process.env.BETTER_AUTH_SECRET!,

  emailAndPassword: {
    enabled: true,
    requireEmailVerification: true,
  },

  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },

  plugins: [
    multiSession({ maximumSessions: 5 }),
    admin({ defaultRole: "user", adminRoles: ["admin"] }),
  ],

  session: {
    expiresIn: 60 * 60 * 24 * 30, // 30 dias
    updateAge: 60 * 60 * 24,       // Refresh cada 24h
  },
});

Que incluye:

FuncionalidadDescripción
emailAndPasswordLogin con email y password, con verificación obligatoria
socialProviders.googleLogin con Google OAuth
multiSessionHasta 5 sesiónes simultáneas por usuario
adminSistema de roles (user / admin)
sessionSesiónes de 30 dias con refresh automatico

Paso 4: El cliente de autenticación

En el frontend, el archivo lib/auth/client.ts exporta los hooks y funciones que necesitas. Consulta la referencia del cliente para ver todos los métodos disponibles.

lib/auth/client.ts
import { createAuthClient } from "better-auth/react";
import { multiSessionClient, adminClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL || siteConfig.url,
  plugins: [multiSessionClient(), adminClient()],
});

export const {
  signIn,
  signOut,
  signUp,
  useSession,
  getSession,
} = authClient;

Usar en componentes

import { signIn } from "@/lib/auth/client";

// Login con Google (redirige al flujo OAuth)
await signIn.social({
  provider: "google",
  callbackURL: "/dashboard",
});
import { signIn } from "@/lib/auth/client";

await signIn.email({
  email: "usuario@ejemplo.com",
  password: "password123",
  callbackURL: "/dashboard",
});
"use client";
import { useSession } from "@/lib/auth/client";

export function UserGreeting() {
  const { data: session, isPending } = useSession();

  if (isPending) return <p>Cargando...</p>;
  if (!session) return <p>No has iniciado sesión</p>;

  return <p>Hola, {session.user.name}!</p>;
}
import { signOut } from "@/lib/auth/client";

await signOut({
  fetchOptions: {
    onSuccess: () => {
      window.location.href = "/";
    },
  },
});

Paso 5: Prueba el flujo completo

Arranca el servidor

npm run dev

Prueba Google OAuth

  1. Abre http://localhost:3000
  2. Click en "Iniciar sesión"
  3. Click en "Continuar con Google"
  4. Selecciona tu cuenta de Google
  5. Deberías ser redirigido al Dashboard

Prueba email/password

  1. Ve a http://localhost:3000/register
  2. Rellena nombre, email y password
  3. Revisa tu bandeja de entrada para el email de verificación
  4. Click en el enlace de verificación
  5. Inicia sesión con tus credenciales

Paso 6: Verifica el usuario en la base de datos

Abre Prisma Studio para confirmar que el usuario se creo correctamente:

npx prisma studio

Navega a la tabla users. Deberías ver:

CampoValor esperado
nameTu nombre de Google
emailTu email de Google
emailVerifiedtrue (si usaste Google OAuth)
roleuser
imageURL de tu foto de perfil

En la tabla accounts veras el registro del proveedor:

CampoValor esperado
providerIdgoogle
accountIdTu Google ID

URLs de producción

Cuando despliegues a producción, añade las URLs de tu dominio en Google Cloud Console:

Authorized JavaScript origins:
https://tu-dominio.com

Authorized redirect URIs:
https://tu-dominio.com/api/auth/callback/google

Y actualiza la variable de entorno:

.env
BETTER_AUTH_URL=https://tu-dominio.com

Resumen

Has configurado:

  • Google OAuth con credenciales de Google Cloud
  • Login con email y password con verificación
  • Sesiónes persistentes de 30 dias
  • Cliente de autenticación con hooks para React

Siguiente paso

Crear nuevas páginas

Aprende a añadir nuevas páginas públicas a tu aplicación

Crear endpoints de API

Crea un endpoint protegido con autenticación

On this page

Autenticación de usuarioPaso 1: Crea un proyecto en Google CloudAccede a Google Cloud ConsoleConfigura la pantalla de consentimiento OAuthCrea las credenciales OAuthPaso 2: Configura las variables de entornoPaso 3: Entiende la configuración de Better AuthPaso 4: El cliente de autenticaciónUsar en componentesPaso 5: Prueba el flujo completoArranca el servidorPrueba Google OAuthPrueba email/passwordPaso 6: Verifica el usuario en la base de datosURLs de producciónResumenSiguiente paso