React single-page application

Add OneiD to a React application with react-oidc-context, step by step.

View as Markdown

This quickstart adds OneiD to a browser application with react-oidc-context. Every file is complete and runs as it is.

Tip Using an AI coding agent? Give it this page as Markdown (add .md to the address) together with the Connector specification. See Build with AI coding agents.

Before you start

  • A OneiD address, for example https://YOUR_ONEID. The code below uses the demonstration instance https://auth.oltinid.com; replace it with your own.
  • A client registered for this application (step 1). The code uses the client ID quickstart; replace it with yours.
  • A user who can sign in to your OneiD. For the demonstration instance, ask for a demo account.

1. Register the application

Ask your OneiD administrator to register a client with these settings, or register it yourself in the admin console. See Register an application.

Setting Value
Client type public (no secret)
Grant types authorization_code (add refresh_token if you request offline_access)
Redirect URI http://localhost:3000/callback
Post-logout redirect URI http://localhost:3000
Allowed scopes openid profile email
Allowed CORS origins http://localhost:3000

2. Install

npm install react-oidc-context oidc-client-ts

3. Add the code

main.jsx

import { createRoot } from 'react-dom/client';
import { AuthProvider, useAuth } from 'react-oidc-context';

const oneid = {
  authority: 'https://auth.oltinid.com',
  client_id: 'quickstart',
  redirect_uri: 'http://localhost:3000/callback',
  post_logout_redirect_uri: 'http://localhost:3000',
  scope: 'openid profile email',
  // Remove ?code=...&state=... from the address bar after sign-in.
  onSigninCallback: () => window.history.replaceState({}, document.title, '/'),
};

function App() {
  const auth = useAuth();

  if (auth.isLoading) return <p>Loading...</p>;
  if (auth.error) return <p>Sign-in failed: {auth.error.message}</p>;

  if (!auth.isAuthenticated) {
    return <button onClick={() => auth.signinRedirect()}>Sign in with OneiD</button>;
  }

  return (
    <>
      <p>Hello, {auth.user?.profile.name}</p>
      <button onClick={() => auth.signoutRedirect()}>Sign out</button>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <AuthProvider {...oneid}>
    <App />
  </AuthProvider>,
);

4. Run it

Serve the application on port 3000; with Vite: npm run dev – –port 3000.

This code runs in the browser. The client must list the address of your application (here http://localhost:3000) in its allowed CORS origins, or the browser blocks the call to the token endpoint.

Checkpoint Open http://localhost:3000 and select Sign in with OneiD. After you sign in, the page shows Hello, followed by the user’s name, and a Sign out button.

Common issues

  • OneiD shows an error page about the redirect address (invalid_request). The redirect URI the code sends is not registered on the client exactly as written. Register it, including scheme and port.
  • invalid_grant from the token endpoint. The code was used before or expired. Start the sign-in again; do not reload the callback page.
  • A CORS error in the browser console. The origin http://localhost:3000 is not in the client’s allowed CORS origins.
  • More errors and fixes: Errors and troubleshooting.

Learn more