getTokenSilently / useRefreshTokens / getIdTokenClaims - how to use it correctly?

[shai.maron]

Hey,

I have an angular based SPA, and I am completely lost with the documentation.
I want to use refreshed tokens and I need the claims when calling the backend API.

Do I need to call getTokenSilently in interval? or only once? (and what the related configs in auth0 dashboard?)
Do I need to save the getTokenSilently results somewhere?
When and where should I call getIdTokenClaims and Do I need it for refresh token? how I get the refresh token and how do I use it?
And what is the difference between silent token, ID token and refresh token?

Auth0 Single Page App SDK

One example from start to end will clarify it, as the documentation share very short example that I cant take to real world app.

Thanks!

[stephanie.chamblee]

Hi @shai.maron,

Welcome to the Community!

You may want to take a look at the Angular QuickStart. If you log in and click Download, then the configurations for your application will already be set up in the code. You’ll only need to add http://localhost:4200 to “Allowed Callback URLs”, “Allowed Web Origins”, and “Allowed Logout URLs” in the application settings.

You can follow along with the tutorial for login and calling an API.

In order to enable the Refresh Token Rotation feature, you’ll have to update a couple settings.

In the code of the QuickStart application, in the file src/environments/environment.ts add useRefreshTokens: true, to the auth environment configurations. It should look like this:

export const environment = {
  production: false,
  auth: {
    domain,
    clientId,
    audience,
    useRefreshTokens: true,
    redirectUri: window.location.origin,
  },
  httpInterceptor: {
    allowedList: [`${apiUri}/*`],
  },
};

In the application settings in your Auth0 dashboard, make sure that Refresh Token Rotation is enabled:

Finally, configure your backend API to allow offline access.

Renewing the Access Token is handled by the SDK. Your application will have access to the user’s profile information and will be able to determine if the user is logged in by using the auth0-angular SDK as the auth service, like this:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css'],
})
export class ProfileComponent implements OnInit {
  profileJson: string = null;

  constructor(public auth: AuthService) {}

  ngOnInit() {
    this.auth.user$.subscribe(
      (profile) => (this.profileJson = JSON.stringify(profile, null, 2))
    );
  }
}