React Authentication

Login, protected routes, sessions, and user management in your React app. Paste one prompt into your AI agent, or wire it yourself with one provider component and a drop-in login button.

Quickstart in minutes

Enterprise-grade & compliant by default

Add auth to my React app using The Bridge.

Your React app, wired in

Login dropped inA prebuilt <Login /> button sends users through the hosted login and back.
Routes protected in one wrapperWrap a route tree in <ProtectedRoute> and it requires a session before it renders.
Sessions handledSigned tokens issued, verified, and renewed for you.
One clean user objectPlan, roles, and feature flags ride the same user.

The fastest way to integrate

Auth by asking.

The Bridge is agent-native. Install the Bridge CLI, paste one prompt, and your coding agent wires authentication into your React app.

✦ CLI-nativeClaude CodeCursorAny coding agent

Your agent does the wiring, you ship the product

Install the Bridge CLI, then paste the prompt below into your agent. It authorizes the CLI in your browser (creating your account right there if you are new), detects React, installs the SDK, wires the provider, and registers the settings your app needs.

Prefer to wire it yourself? See the SDK and CLI paths below.

Why The Bridge for React

Everything after login, already there

The login form is the visible part. The wins are everything you no longer have to build behind it.

Every sign-in method

Email, passkeys, magic link, and Google, toggled from the Control Center with no redeploy.
UX
Protected routes, one wrapper

Wrap a route tree in <ProtectedRoute> and it requires a session before it renders.
Security
Enterprise SSO ready

When the security questionnaire arrives, connect their identity provider and keep your architecture.
Enterprise
Authorization built in

Roles, plan, and feature flags ride the same user object, so route checks and API checks read one source.
RBAC
Built for teams

Multi-tenant user management out of the box: workspaces, invites, and roles included.
B2B
Session management

Sessions issued, renewed, and revoked centrally. Block a user and they are out on the next request.
Control
MFA included

Multi-factor authentication ships with the platform, no extra vendor to integrate.
Trust
API tokens for machines

External services and scripted callers authenticate with API tokens you can revoke at any time.
M2M

Prefer to wire it yourself?

Pick the workflow that matches how you build.

SDK

// main.tsx
import { BridgeProvider } from '@nebulr-group/bridge-react';

<BridgeProvider config={{ appId: BRIDGE_APP_ID }}>
  <App />
</BridgeProvider>

// protect a route tree:
<ProtectedRoute>
  <Dashboard />
</ProtectedRoute>

Read the full quickstart in the docs →

And of course

First-class SDKs for every stack

Type-safe, batteries-included SDKs with drop-in components, and the same clean user object everywhere.

Next.js

Svelte

Astro

Node

FastAPI

Laravel

Flutter

React

Angular

Nuxt

Deno

Python

Rust

Ruby

Kotlin

Vue

SolidJS

Remix

Bun

Django

PHP

.NET

NestJS

…and 24+ frameworks & languages supported. Hover to pause, drag or swipe to explore.

Check out our React SDK on GitHub

Hand-Rolled React Authentication vs. The Bridge

What a hand-built React auth stack actually costs you, versus one provider component.

Building it yourself

Build an auth context, protected route wrappers, and refresh logic
Stand up login, session, refresh, and logout endpoints on a server
Store tokens safely and handle renewal and revocation
Add SSO, more sign-in methods, and user management when customers ask

With The Bridge

One provider component, one wrapper for protected routes
Drop-in <Login /> with every sign-in method
Sessions issued, verified, and renewed for you
SSO and multi-tenant user management on the same user object

Common questions

How do I protect routes in React?

With The Bridge you wrap the routes that need a session in one component and leave public routes outside it. A visitor without a session is sent to the login automatically and returned to the page they wanted afterwards. The route guards docs show the exact setup.

Do I get a ready-made React login form?

Yes, two ways. A prebuilt login button sends users to the hosted login page, which carries every sign-in method you have enabled. If you want the form inside your own app instead, the SDK ships components for that too, including login, signup, magic link, and passkeys.

Does this use JWT authentication?

Yes. Sessions are standard signed JSON Web Tokens issued by The Bridge and verified against published public keys, so your own backend can verify them too. To see what lives inside a token and how verification works, read JWT authentication explained.

How do I add OAuth and social login to my React app?

With The Bridge it is a click away: turn providers on in the Control Center and the hosted login shows them immediately, with no code changes or redeploys in your React app. The OpenID Connect flow runs on the hosted side, so your code never touches the handshake.

Do I still need a React context for auth state?

The provider is that context. It holds the auth state for your whole tree, and a hook reads it anywhere: whether the user is signed in, still loading, plus login and logout functions. You never write your own reducer or context plumbing for auth. The user token docs show the exact code.

How do I handle authorization and roles in React?

This is where The Bridge does the heavy lifting: authorization is embedded in the platform. Configure roles and permissions in the Control Center and they arrive in your React app inside the signed token, as claims on the same user object your login returns. Branch on them anywhere in your components, and your API authorizes from the same source. The roles docs cover the setup end to end.

Which React versions and routers are supported?

The published @nebulr-group/bridge-react 0.4.x line supports React 16 through 19. It is router-agnostic, with ready-made adapters for React Router, TanStack Router, and Wouter. Check the React quickstart for the currently supported range before adding it to a newer project.

Does my React app need its own auth backend?

No, you do not need to build one. Authentication does always need a server, because code shipped to the browser cannot keep a secret. The Bridge is that server: it hosts the login, issues the session, and manages users, while your API only verifies the signed token it receives.