JavaScript single-page application

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

View as Markdown

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. 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 oidc-client-ts

3. Add the code

auth.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.

Learn more