# React single-page application

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

Source: https://oltinid.com/docs/quickstarts/react/ · Section: Quickstarts · All OneiD documentation: https://oltinid.com/llms.txt

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](https://oltinid.com/docs/ai/connector-specification/). See [Build with AI coding agents](https://oltinid.com/docs/ai/build-with-ai/).

## 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](https://oltinid.com/contact/?topic=demo).

## 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](https://oltinid.com/docs/get-started/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

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

## 3. Add the code

`main.jsx`

```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](https://oltinid.com/docs/reference/errors/).

## Learn more

- [Authorization code flow with PKCE](https://oltinid.com/docs/guides/authorization-code-pkce/)
- [Sign-out](https://oltinid.com/docs/guides/logout/)
- [Scopes, claims and roles](https://oltinid.com/docs/guides/scopes-claims-roles/)
- [Browser applications and CORS](https://oltinid.com/docs/guides/browser-applications/)