React SDK Integration

Integrate a React single-page app or the TokenIDP Admin Portal with TokenIDP using Authorization Code + PKCE.

Prerequisites

• A registered public Application
• Redirect URI such as http://localhost:5173/auth/callback
• TokenIDP discovery endpoint reachable from the browser

Example

Install

npm install tokenidp-react

Configure the Provider

import { IdpAuthProvider } from "tokenidp-react";

export function AppProviders() {
  return (
    <IdpAuthProvider
      config={{
        authority: "https://localhost:5001",
        clientId: "tokenidp-admin-dev",
        redirectUri: "http://localhost:5173/auth/callback",
        postLoginRedirectUri: "/dashboard",
        scope: "openid profile email offline_access api.read",
        storage: "localStorage"
      }}
    >
      <App />
    </IdpAuthProvider>
  );
}

Handle Login and Logout

import { useAuth } from "tokenidp-react";

export function SessionControls() {
  const { login, logout, isAuthenticated, user } = useAuth();

  if (!isAuthenticated) {
    return <button onClick={() => login()}>Sign in</button>;
  }

  return (
    <>
      <span>{user?.profile?.email}</span>
      <button onClick={() => logout()}>Sign out</button>
    </>
  );
}

Add a Callback Route

import { AuthCallback } from "tokenidp-react";
import { Route, Routes } from "react-router-dom";

export function RouterConfig() {
  return (
    <Routes>
      <Route path="/auth/callback" element={<AuthCallback />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  );
}

Common Pitfalls

• Registering the Application as confidential instead of public.
• Using a redirect URI in the SDK that is not registered in TokenIDP.
• Storing tokens in insecure custom browser storage without a clear threat model.
• Deploying the Admin Portal to Azure Static Web Apps without updating the registered callback URI.

Troubleshooting

• If the callback page never resolves, confirm the SDK is preserving the PKCE verifier between the login redirect and the callback exchange.
• If logout returns to the wrong place, verify the Application's logout redirect URIs and the /logout request parameters.