Autenticación Google

Para implementar la autenticación con Google en Supabase utilizando Astro, el proceso se divide en tres partes: configurar Google Cloud Console, activar el proveedor en Supabase y escribir el código en Astro.

1. Configurar Google Cloud Console

Entra a Google Cloud Console y crea o selecciona un proyecto. Para ello clica el selector de proyectos a la derecha del título de Google Cloud
Haz clic en el recuadro APIs y servicios dentro de Acceso rápido (o desde el menú lateral).
En la barra de búsqueda o menú lateral, entra en OAuth consent screen (Pantalla de consentimiento de OAuth). Clica sobre el botón
Llena la información del proyecto y tu correo como desarrollador y haz clic sobre Siguiente:

Selecciona la opción Usuarios Externos para que cualquier usuario con cuenta de Google pueda iniciar sesión. (Siguiente)

Verifica tu dirección de correo electrónico para notificaciones al desarrollador (Siguiente).
Acepta la Política de Datos del Usuario de los Servicios de las APIs de Google. Clic en Continuar y luego en .

Una vez guardado el asistente, Selecciona la opción Clientes del menú lateral. Desde allí podrás hacer clic en + Crear cliente.

Selecciona Aplicación web
Pon un nombre que sirva como referencia interna para identificarlo dentro de la consola de Google Cloud.

Desplázate hacia abajo en esa misma página y haz clic sobre Crear. Google te generará unas claves que pegaremos en Supabase

2. Supabase

Abre Supabase en otra pestaña del navegador. Entra a tu proyecto en Supabase y haz clic, en el menú lateral sobre la opción Authentication. Ahora:

Selecciona del menú lateral la opción Sign In / Providers y de la lista Auth Providers selecciona Google
- En la primera fila, Enable Sign in with Google, debes cambiar el interruptor a la posición activada.
- En el campo Client IDs (donde dice tienda), debes pegar el ID de cliente completo que te generó Google Cloud (suele ser una cadena muy larga que termina en .apps.googleusercontent.com, como 123456789-abcdefg.apps.googleusercontent.com).
- En Client Secret, pega el secreto de cliente.
- Copia la Callback URL de Supabase haciendo clic sobre el botón Copy que aparece al lado de https://xxxx.supabase.co/a
- Haz clic en Save

3. Regresamos a la pantalla de Google

Regresa a la ventana de Google Cloud (donde estás creando el Cliente de OAuth) y baja hasta las URIs autorizadas:

En Orígenes autorizados de JavaScript, haz clic en + AGREGAR URI y pega esa misma URL pero sin la parte final del callback (solo el dominio): https://xxx.supabase.co
En URIs de redireccionamiento autorizados, pega la URL completa que acabas de copiar: https://xxx.supabase.co/auth/v1/callback

Pantalla de autenticación en Astro

Antes de continuar deberemos instalar el cliente de Supabase en tu proyecto de Astro, si aún no lo has hecho:

   pnpm add @supabase/supabase-js

Ahora edita el archivo .env para agregar las claves:

La clave que necesitas para PUBLIC_SUPABASE_ANON_KEY es la que aparece bajo Publishable key. Copia el valor que empieza por sb_publishable_... haciendo clic en el icono de copiar al lado de default.
La encontraras en Project Settings > API Keys
La clave que necesitas para PUBLIC_SUPABASE_URL es la que aparece bajo API URL.
La encontraras en Project Settings > Integracion > Data API > Docs


# Conexión existente a la base de datos
DATABASE_URL="postgresql://..."

# Configuración del cliente de Supabase para Astro
PUBLIC_SUPABASE_URL=https://.supabase.co
PUBLIC_SUPABASE_ANON_KEY=tu-anon-key-aqui

Importante

Prefijo PUBLIC_: En Astro, las variables que empiezan por PUBLIC_ son accesibles tanto en el servidor como en el navegador (en el código cliente dentro de la etiqueta <script>), lo cual es necesario para ejecutar supabase.auth.signInWithOAuth().

En Vercel: Para desplegar proyecto en Vercel, se deben agregar estas mismas variables en la consola de Vercel (en Project Settings > Environment Variables).

Crea el archivo `src/lib/supabase.ts` (cliente de autenticación de Supabase)


  import { createClient } from '@supabase/supabase-js';

  export const supabase = createClient(
    import.meta.env.PUBLIC_SUPABASE_URL,
    import.meta.env.PUBLIC_SUPABASE_ANON_KEY
  );

Crea el Endpoint de Callback (archivo `src/pages/api/auth/callback.ts`)

Este archivo permite procesar el código de intercambio cuando Google redirija de vuelta al usuario:


  import type { APIRoute } from 'astro';
  import { supabase } from '../../../lib/supabase';

  export const GET: APIRoute = async ({ url, cookies, redirect }) => {
    const authCode = url.searchParams.get('code');

    if (!authCode) {
      return new Response('No auth code provided', { status: 400 });
    }

    const { data, error } = await supabase.auth.exchangeCodeForSession(authCode);

    if (error) {
      return new Response(error.message, { status: 500 });
    }

    const { access_token, refresh_token } = data.session;

    // Guardar tokens en cookies HTTP-only para mayor seguridad
    cookies.set('sb-access-token', access_token, { path: '/', httpOnly: true, secure: true });
    cookies.set('sb-refresh-token', refresh_token, { path: '/', httpOnly: true, secure: true });

    return redirect('/');
  };

Página de Login / Logout

Ejemplo de pantalla de autenticación con Google: si el usuario está autenticado muestra su correo y un botón de cierre de sesión; si no lo está, muestra el botón para iniciar sesión con Google.

Cierre de Sesión (`src/pages/api/auth/signout.ts`)


  import type { APIRoute } from 'astro';

  export const POST: APIRoute = async ({ cookies, redirect }) => {
    cookies.delete('sb-access-token', { path: '/' });
    cookies.delete('sb-refresh-token', { path: '/' });

    return redirect('/');
  };