React, Vue or Angular

Follow this guide if your frontend is a React, Vue or Angular app. At the end your users sign in with Block-Auth and your backend has a verified session for them.

What you'll build

You need two pieces, and this guide covers both:

In your frontend: the Block-Auth widget (@block-auth.io/react, /vue or /angular). It shows the sign-in button and opens the login.
In your backend: three routes that redeem the login code with your API secret. Your backend can be in any language: the examples are in Node.js, PHP, Python and .NET.

The browser never decides who the user is: the widget only passes a one-time code to your backend, and your backend gets the user from Block-Auth.

1Your frontend → Block-AuthLogin in a popup (PKCE)
2Block-Auth → Your frontendOne-time code
3Your frontend → Your backendPOST /code
4Your backend → Block-AuthPOST /api/auth/token
5Block-Auth → Your backend{ address, roles }
6Your backend → Your frontendhttpOnly session cookie
7Your frontend → Your backendGET /me
8Your backend → Your frontend{ address, roles }

Your frontend

Block-Auth widget

Your backend

Your code

Block-Auth

Hosted by Block-Auth

1Login in a popup (PKCE)
2One-time code
3POST /code
4POST /api/auth/token
5{ address, roles }
6httpOnly session cookie
7GET /me
8{ address, roles }

Prepare your app

In the Dashboard, create your application and validate its domain, following the Integration Quickstart. The domain is the host where your frontend runs (for example your-app.com). For development, use a separate app with a domain like dev.your-app.com (one app per environment).
Copy the apiKey and apiSecret from Applications » Show keys. The apiKey is public and goes in your frontend. The apiSecret stays in your backend.
Put them in your backend's environment:

.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