Angular integration guide

tip

• The following demonstration is built on Angular 18.0.0 and angular-auth-oidc-client.
• The sample project is available in the GitHub repository.

Prerequisites

• A Logto Cloud account or a self-hosted Logto (Check out the ⚡ Get started guide to create one if you don't have).
• A Logto single-page application created.

Installation

Install Logto JS core SDK and Angular OIDC client library:

npm

npm i @logto/js angular-auth-oidc-client

pnpm

pnpm add @logto/js angular-auth-oidc-client

yarn

yarn add @logto/js angular-auth-oidc-client

Integration

Configure application

In your Angular project, add the auth provider in your app.config.ts:

app/app.config.ts

import { buildAngularAuthConfig } from '@logto/js';
import { provideAuth } from 'angular-auth-oidc-client';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
    provideAuth({
      config: buildAngularAuthConfig({
        endpoint: '<your-logto-endpoint>',
        appId: '<your-app-id>',
        redirectUri: 'http://localhost:3000/callback',
        postLogoutRedirectUri: 'http://localhost:3000/',
      }),
    }),
    // ...other providers
  ],
};

Configure redirect URIs

Before we dive into the details, here's a quick overview of the end-user experience. The sign-in process can be simplified as follows:

1. Your app invokes the sign-in method.
2. The user is redirected to the Logto sign-in page. For native apps, the system browser is opened.
3. The user signs in and is redirected back to your app (configured as the redirect URI).

Regarding redirect-based sign-in

1. This authentication process follows the OpenID Connect (OIDC) protocol, and Logto enforces strict security measures to protect user sign-in.
2. If you have multiple apps, you can use the same identity provider (Logto). Once the user signs in to one app, Logto will automatically complete the sign-in process when the user accesses another app.

To learn more about the rationale and benefits of redirect-based sign-in, see Logto sign-in experience explained.

---

note

In the following code snippets, we assume your app is running on http://localhost:3000/.

Configure redirect URIs

Switch to the application details page of Logto Console. Add a redirect URI http://localhost:3000/callback.

Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add http://localhost:3000/ as the post sign-out redirect URI section.

Then click "Save" to save the changes.

Handle redirect

Since we use http://localhost:3000/callback as the redirect URI, now we need to handle it properly. The angular-auth-oidc-client library provides built-in support for handling the redirect. You can just configure the auth provider configs properly and the library will handle the rest.

app/app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      config: buildAngularAuthConfig({
        // ...other config
        redirectUri: 'http://localhost:3000/callback',
        postLogoutRedirectUri: 'http://localhost:3000/',
      }),
    }),
    // ...other providers
  ],
};

Implement sign-in and sign-out

In the component where you want to implement sign-in and sign-out (for example, app.component.ts), inject the OidcSecurityService and use it to sign in and sign out.

app/app.component.ts

import { OidcSecurityService } from 'angular-auth-oidc-client';

export class AppComponent implements OnInit {
  constructor(public oidcSecurityService: OidcSecurityService) {}

  signIn() {
    this.oidcSecurityService.authorize();
  }

  signOut() {
    this.oidcSecurityService.logoff().subscribe((result) => {
      console.log('app sign-out', result);
    });
  }
}

Then, in the template, add buttons to sign in and sign out:

app/app.component.html

<button (click)="signIn()">Sign in</button>
<br />
<button (click)="signOut()">Sign out</button>

Calling .signOut() will clear all the Logto data in memory and localStorage if they exist.

Checkpoint: Test your application

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear local storage and sign out.

Get user information

Once the user has successfully signed in, Logto will issue an ID token that contains the user information claims. The ID token is a JSON Web Token (JWT).

It's important to note that the user information claims that can be retrieved depending on the scopes used by the user during signing-in, and considering performance and data size, the ID token may not contain all user claims, some user claims are only available in the userinfo endpoint (see the related list below).

The buildAngularAuthConfig() utility will enable autoUserInfo and renewUserInfoAfterTokenRenew if there's no resource provided in the config. This means that Logto will automatically fetch the user information after the user signs in and renew the user information after the token is renewed.

info

To learn more about configuring the angular-auth-oidc-client library, see the official documentation.

Display user information

The OidcSecurityService provides a convenient way to subscribe to the authentication state as well as user information:

app/app.component.ts

import { OidcSecurityService } from 'angular-auth-oidc-client';
import { decodeIdToken, type IdTokenClaims } from '@logto/js';

export class AppComponent implements OnInit {
  isAuthenticated = false;
  idTokenClaims?: IdTokenClaims;
  accessToken?: string;

  constructor(public oidcSecurityService: OidcSecurityService) {}

  ngOnInit() {
    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, idToken, accessToken }) => {
      console.log('app authenticated', isAuthenticated, idToken);
      this.isAuthenticated = isAuthenticated;
      this.idTokenClaims = decodeIdToken(idToken);
      this.accessToken = accessToken;
    });
  }

  // ...other methods
}

And use it in the template:

app/app.component.html

<button *ngIf="!isAuthenticated" (click)="signIn()">Sign in</button>
<ng-container *ngIf="isAuthenticated">
  <pre>{{ idTokenClaims | json }}</pre>
  <p>Access token: {{ accessToken }}</p>
  <!-- ... -->
  <button (click)="signOut()">Sign out</button>
</ng-container>

Request additional claims

You may find some user information are missing in the returned object from idToken. This is because OAuth 2.0 and OpenID Connect (OIDC) are designed to follow the principle of least privilege (PoLP), and Logto is built on top of these standards.

By default, limited claims are returned. If you need more information, you can request additional scopes to access more claims.

info

A "claim" is an assertion made about a subject; a "scope" is a group of claims. In the current case, a claim is a piece of information about the user.

Here's a non-normative example the scope - claim relationship:

tip

The "sub" claim means "subject", which is the unique identifier of the user (i.e. user ID).

Logto SDK will always request three scopes: openid, profile, and offline_access.

To request additional scopes, you can configure the auth provider configs:

app/app.config.ts

import { UserScope, buildAngularAuthConfig } from '@logto/js';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
    provideAuth({
      config: buildAngularAuthConfig({
        // ...other configs
        scopes: [
          UserScope.Email,
          UserScope.Phone,
          UserScope.CustomData,
          UserScope.Identities,
          UserScope.Organizations,
        ],
      }),
    }),
    // ...other providers
  ],
};

Then you can access the additional claims in the return value of idToken.

Claims that need network requests

To prevent bloating the ID token, some claims require network requests to fetch. For example, the custom_data claim is not included in the user object even if it's requested in the scopes. To access these claims, you can configure the userData option:

app/app.component.ts

import { OidcSecurityService } from 'angular-auth-oidc-client';
import { type UserInfoResponse } from '@logto/js';

export class AppComponent implements OnInit {
isAuthenticated = false;
userData?: UserInfoResponse;
accessToken?: string;

constructor(public oidcSecurityService: OidcSecurityService) {}

ngOnInit() {
  this.oidcSecurityService
    .checkAuth()
    .subscribe(({ isAuthenticated, userData, accessToken }) => {
      console.log('app authenticated', isAuthenticated, idToken);
      this.isAuthenticated = isAuthenticated;
      this.userData = userData;
      this.accessToken = accessToken;
    });
}

// ...other methods
}

// Now you can access the claim `userData.custom_data`

By configuring userData, the SDK will fetch the user information by requesting to the userinfo endpoint after the user is signed in, and userData will be available once the request is completed.

Scopes and claims

Logto uses OIDC scopes and claims conventions to define the scopes and claims for retrieving user information from the ID token and OIDC userinfo endpoint. Both of the "scope" and the "claim" are terms from the OAuth 2.0 and OpenID Connect (OIDC) specifications.

Here's the list of supported scopes and the corresponding claims:

openid

Claim name	Type	Description	Needs userinfo?
sub	string	The unique identifier of the user	No

profile

Claim name	Type	Description	Needs userinfo?
name	string	The full name of the user	No
username	string	The username of the user	No
picture	string	URL of the End-User's profile picture. This URL MUST refer to an image file (for example, a PNG, JPEG, or GIF image file), rather than to a Web page containing an image. Note that this URL SHOULD specifically reference a profile photo of the End-User suitable for displaying when describing the End-User, rather than an arbitrary photo taken by the End-User.	No
created_at	number	Time the End-User was created. The time is represented as the number of milliseconds since the Unix epoch (1970-01-01T00:00:00Z).	No
updated_at	number	Time the End-User's information was last updated. The time is represented as the number of milliseconds since the Unix epoch (1970-01-01T00:00:00Z).	No

Other standard claims include family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo, and locale will be also included in the profile scope without the need for requesting the userinfo endpoint. A difference compared to the claims above is that these claims will only be returned when their values are not empty, while the claims above will return null if the values are empty.

note

Unlike the standard claims, the created_at and updated_at claims are using milliseconds instead of seconds.

email

Claim name	Type	Description	Needs userinfo?
email	string	The email address of the user	No
email_verified	boolean	Whether the email address has been verified	No

phone

Claim name	Type	Description	Needs userinfo?
phone_number	string	The phone number of the user	No
phone_number_verified	boolean	Whether the phone number has been verified	No

address

Please refer to the OpenID Connect Core 1.0 for the details of the address claim.

custom_data

Claim name	Type	Description	Needs userinfo?
custom_data	object	The custom data of the user	Yes

identities

Claim name	Type	Description	Needs userinfo?
identities	object	The linked identities of the user	Yes
sso_identities	array	The linked SSO identities of the user	Yes

urn:logto:scope:organizations

Claim name	Type	Description	Needs userinfo?
organizations	string[]	The organization IDs the user belongs to	No
organization_data	object[]	The organization data the user belongs to	Yes

urn:logto:scope:organization_roles

Claim name	Type	Description	Needs userinfo?
organization_roles	string[]	The organization roles the user belongs to with the format of <organization_id>:<role_name>	No

---

Considering performance and the data size, if "Needs userinfo?" is "Yes", it means the claim will not show up in the ID token, but will be returned in the userinfo endpoint response.

API resources

Configure angular-auth-oidc-client for API resource

We recommend to read 🔐 Role-Based Access Control (RBAC) first to understand the basic concepts of Logto RBAC and how to set up API resources properly.

Once you have set up the API resources, you can add them when configuring Logto in your app:

/app/app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
    provideAuth({
      config: buildAngularAuthConfig({
        // ...other config
        resource: 'https://your-api-resource.com',
      }),
    }),
    // ...other providers
  ],
};

Each API resource has its own permissions (scopes).

For example, the https://shopping.your-app.com/api resource has the shopping:read and shopping:write permissions, and the https://store.your-app.com/api resource has the store:read and store:write permissions.

To request these permissions, you can add them when configuring Logto in your app:

app/app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
    provideAuth({
      config: buildAngularAuthConfig({
        // ...other config
        resource: 'https://your-api-resource.com',
        scopes: ['openid', 'profile', 'offline_access', 'read', 'write'],
      }),
    }),
    // ...other providers
  ],
};

You may notice that scopes are defined separately from API resources. This is because Resource Indicators for OAuth 2.0 specifies the final scopes for the request will be the cartesian product of all the scopes at all the target services.

note

It is fine to request scopes that are not defined in the API resources. For example, you can request the email scope even if the API resources don't have the email scope available. Unavailable scopes will be safely ignored.

After the successful sign-in, Logto will issue proper scopes to API resources according to the user's roles.

Now, the access token will be in the JSON Web Token (JWT) format instead of a random string (opaque token).

warning

Both autoUserInfo and renewUserInfoAfterTokenRenew will be disabled when resource is set. This is because the access token will be requested for the specific API resource and not for the user info endpoint.

Currently, only Logto official SDKs support the ability to request both user info and API resource access tokens. If you need to request both, please do not hesitate to contact us.

Further readings

• Customize sign-in experience
• Configure connectors
• Protect your API