# JavaScript single-page application

> Add OneiD to a JavaScript application with oidc-client-ts, step by step.

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

This quickstart adds OneiD to a browser application with **oidc-client-ts**. 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 oidc-client-ts
```

## 3. Add the code

`auth.js`

```js
import { UserManager } from 'oidc-client-ts';

const oneid = new UserManager({
  authority: 'https://auth.oltinid.com',
  client_id: 'quickstart',
  redirect_uri: 'http://localhost:3000/callback',
  post_logout_redirect_uri: 'http://localhost:3000',
  response_type: 'code', // authorization code flow; the library adds PKCE
  scope: 'openid profile email',
});

// Call from your "Sign in" button.
export const signIn = () => oneid.signinRedirect();

// Call once on the /callback page. OneiD sends the user back there.
export async function completeSignIn() {
  const user = await oneid.signinRedirectCallback();
  console.log(`Hello, ${user.profile.name}`);
  return user; // user.access_token is the token for your API
}

// The signed-in user, or null.
export const currentUser = () => oneid.getUser();

// Ends the session in your application and in OneiD.
export const signOut = () => oneid.signoutRedirect();
```

## 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:** After you sign in, OneiD sends the browser to http://localhost:3000/callback. When that page calls completeSignIn(), the browser console shows Hello, followed by the user’s name.

## 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/)