Angular single-page application

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.

2. Install

npm install oidc-client-ts

3. Add the code

auth.service.ts

import { Injectable, signal } from '@angular/core';
import { User, UserManager } from 'oidc-client-ts';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private readonly 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',
  });

  /** The signed-in user, or null. Templates read it as auth.user(). */
  readonly user = signal<User | null>(null);

  constructor() {
    this.oneid.getUser().then((user) => this.user.set(user));
  }

  signIn(): Promise<void> {
    return this.oneid.signinRedirect();
  }

  /** Call from the component on the 'callback' route, then navigate to your start page. */
  async completeSignIn(): Promise<void> {
    this.user.set(await this.oneid.signinRedirectCallback());
  }

  signOut(): Promise<void> {
    return this.oneid.signoutRedirect();
  }
}

4. Run it

Start the application on port 3000: ng serve –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 The service shows nothing by itself. After the component on the callback route calls completeSignIn(), auth.user() returns the signed-in user, and auth.user()?.profile.name is 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

• Authorization code flow with PKCE
• Sign-out
• Scopes, claims and roles
• Browser applications and CORS