React, Vue o Angular

Sigue esta guía si tu frontend es una app de React, Vue o Angular. Al terminar, tus usuarios inician sesión con Block-Auth y tu backend tiene una sesión verificada para ellos.

Qué vas a montar

Necesitas dos piezas, y esta guía cubre las dos:

En tu frontend: el widget de Block-Auth (@block-auth.io/react, /vue o /angular). Muestra el botón de inicio de sesión y abre el login.
En tu backend: tres rutas que canjean el código de login con tu API secret. Tu backend puede estar en cualquier lenguaje: los ejemplos están en Node.js, PHP, Python y .NET.

El navegador nunca decide quién es el usuario: el widget solo pasa un código de un solo uso a tu backend, y tu backend obtiene el usuario de Block-Auth.

1Tu frontend → Block-AuthLogin en un popup (PKCE)
2Block-Auth → Tu frontendCódigo de un solo uso
3Tu frontend → Tu backendPOST /code
4Tu backend → Block-AuthPOST /api/auth/token
5Block-Auth → Tu backend{ address, roles }
6Tu backend → Tu frontendCookie de sesión httpOnly
7Tu frontend → Tu backendGET /me
8Tu backend → Tu frontend{ address, roles }

Tu frontend

Widget de Block-Auth

Tu backend

Tu código

Block-Auth

Lo aloja Block-Auth

1Login en un popup (PKCE)
2Código de un solo uso
3POST /code
4POST /api/auth/token
5{ address, roles }
6Cookie de sesión httpOnly
7GET /me
8{ address, roles }

Prepara tu app

En el Dashboard, crea tu aplicación y valida su dominio siguiendo la guía rápida de integración. El dominio es el host donde corre tu frontend (por ejemplo your-app.com). Para desarrollo, usa otra app con un dominio como dev.your-app.com (una app por entorno).
Copia la apiKey y el apiSecret desde Aplicaciones » Ver claves. La apiKey es pública y va en tu frontend. El apiSecret se queda en tu backend.
Ponlas en el entorno de tu backend:

.env (backend)

APP_URL=https://your-app.com
BLOCKAUTH_API_KEY=your_api_key
BLOCKAUTH_API_SECRET=your_api_secret
SESSION_SECRET=a_long_random_string