React SPA (PKCE)

A browser-only app: a public client using the authorization code flow with PKCE, built with Vite and oidc-client-ts. It has no secret. IdRa's token, UserInfo, JWKS and discovery endpoints answer cross-origin requests from any origin, without cookies.

Sample repository (being opened soon): IdRaHQ/idra-sample-react-spa. It has this quickstart's code plus a protected page.

Register the appCopy Anchor Link

Use one app for local development and production. Open your organization's admin console at https://<your-org>.idra.team/admin (or /admin on your own IdRa). Go to Applications → Create App Integration, choose OIDC - OpenID Connect, and set:

• Application type: Single-Page Application
• App integration name: any name
• Sign-in redirect URIs: http://localhost:5173/callback

Leave Assign this app to me so I can test it on, then select Create.

The app's Sign On tab opens:

1. Under Connect your app, copy the Issuer and Client ID. The .env snippet there has the same values, named OIDC_*; this quickstart names them VITE_IDRA_*.
2. Add http://localhost:5173/ to Sign-out redirect URIs and select Save.

To let other people sign in, assign them or their groups on Assignments.

ConfigureCopy Anchor Link

VITE_IDRA_ISSUER=https://<your-org>.idra.team/api/auth
VITE_IDRA_CLIENT_ID=<Client ID>

InstallCopy Anchor Link

npm create vite@latest idra-react -- --template react
cd idra-react
npm install oidc-client-ts

CodeCopy Anchor Link

Replace the generated file:

import { UserManager, WebStorageStateStore } from 'oidc-client-ts';
import { createRoot } from 'react-dom/client';

const auth = new UserManager({
  authority: import.meta.env.VITE_IDRA_ISSUER,
  client_id: import.meta.env.VITE_IDRA_CLIENT_ID,
  redirect_uri: `${location.origin}/callback`,
  post_logout_redirect_uri: `${location.origin}/`,
  scope: 'openid profile email groups',
  // The ID token has no email or name: this reads them from UserInfo.
  loadUserInfo: true,
  userStore: new WebStorageStateStore({ store: sessionStorage }),
});

// Before React renders, so the code is exchanged once, whatever React does with effects.
async function currentUser() {
  if (location.pathname !== '/callback') return auth.getUser();
  const user = await auth.signinCallback();
  history.replaceState(null, '', '/');
  return user;
}

function App({ user, error }) {
  if (error) return <p role="alert">Sign-in failed: {error}</p>;
  if (!user || user.expired)
    return (
      <main>
        <h1>Signed out</h1>
        <button onClick={() => auth.signinRedirect()}>Sign in with IdRa</button>
      </main>
    );
  return (
    <main>
      <h1>Signed in</h1>
      <pre>{JSON.stringify(user.profile, null, 2)}</pre>
      <button onClick={() => auth.signoutRedirect()}>Sign out</button>
    </main>
  );
}

const root = createRoot(document.getElementById('root'));
currentUser().then(
  (user) => root.render(<App user={user} />),
  (e) => root.render(<App error={e.message} />),
);

Your production host must serve index.html for /callback. Tokens stay in sessionStorage, where any script on the page can read them, so keep the page free of third-party scripts you don't trust.

RunCopy Anchor Link

npm run dev

Vite serves on port 5173, which must match the registered URI exactly.

Verify sign-in and sign-outCopy Anchor Link

1. Open http://localhost:5173 and select Sign in with IdRa. You land on IdRa's sign-in page.
2. Sign in, with MFA if your policies ask for it. You come back to a Signed in page showing your claims.
3. Select Sign out. You return to Signed out. This also ends the IdRa session, so the next sign-in asks for your credentials again.

Reports → System Log in the admin console shows the sign-in.

What the app receivesCopy Anchor Link

The ID token doesn't carry email or name. Read them from UserInfo, as this sample does with loadUserInfo.

Add offline_access to the scopes to receive a refresh token. Access tokens last an hour. See OpenID Connect for the rest.

TroubleshootingCopy Anchor Link

Reports → System Log records refused access as app.access with the reason.