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))
);
}
}