Angular Step-up SDK
Prerequisites
The required Angular Frontegg SDK version for this feature is 6.16.0.
The Angular Step Up SDK exposes two functions via the FronteggAuthService
:
isSteppedUp$
function, reflecting the user's state.stepUp
- enacting step up on a user.
isSteppedUp$
The following function creates a subscription to reflect the user’s step-up state. The calculation is based on the state of the current user JWT. The subscription allows you to be notified when the state changes.
// Example #1
this.steppedUpSubscription = this.fronteggAuthService.isSteppedUp$({
next: (isSteppedUp: boolean) => {
this.ngZone.run(() => {
this.isSteppedUp = isSteppedUp;
});
}
}); // no max-age
// Example #2
this.steppedUpSubscription = this.fronteggAuthService.isSteppedUp$({
next: (isSteppedUp: boolean) => {
this.ngZone.run(() => {
this.isSteppedUp = isSteppedUp;
});
}
}, { maxAge: 60 * 60 }); // 1 hour
Parameters
observer
- An observer that handles the change. The state returned is a boolean value —isSteppedUp
returns either atrue
when the user is stepped up orfalse
, otherwise.options
- An object. You can pass theoptions
object in the hook with amaxAge
field in seconds. WhenmaxAge
isn’t provided, the JWT's age won't get checked.
stepUp
The StepUp
function is used to trigger the step-up flow.
// Example #1
fronteggAuthService.stepUp(); // no max-age
// Example #2
fronteggAuthService.stepUp({ maxAge: 60 * 60 }); // 60 minutes
The
options
Object and JWT'smax_age
For both
StepUp
andisSteppedUp$
functions, You can pass theoptions
object with amaxAge
field (value in seconds). IfmaxAge
won't be passed, the JWT's age won't get checked.Note that users need to be authenticated before they are stepped-up. If you set a
max_age
parameter, users will need to re-authenticate if they passed this timeframe (which is calculated from the JWT'sauth_time
claim).
Full Example
The example below showcases the full flow, including the HTML and TypeScript files.
OnDestroy Cleanup
Don't forget to unsubscribe from an observable in the
ngOnDestroy
method. (see example below)
import { Component, NgZone, OnDestroy } from '@angular/core';
import { FronteggAppService, FronteggAuthService } from '@frontegg/angular';
import { StepUpOptions } from '@frontegg/types';
import { Subscription } from 'rxjs';
@Component({
// ...
})
export class AppComponent implements OnDestroy {
//...
MAX_AGE = 30
loadingSubscription: Subscription;
steppedUpSubscription: Subscription;
isSteppedUp = false;
authenticated = false;
isLoading = true;
constructor(
private fronteggAppService: FronteggAppService,
private fronteggAuthService: FronteggAuthService,
private ngZone: NgZone,
) {
this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => {
this.isLoading = isLoading;
});
this.fronteggAppService.isAuthenticated$.subscribe((isAuthenticated: boolean) => {
this.authenticated = isAuthenticated;
});
this.steppedUpSubscription = this.fronteggAuthService.isSteppedUp$({
next: (result: boolean) => {
// Should I?
this.ngZone.run(() => {
this.isSteppedUp = result;
});
}
}, { maxAge: this.MAX_AGE });
}
stepUp(options?: StepUpOptions) {
this.fronteggAuthService.stepUp(options);
}
ngOnDestroy(): void {
this.loadingSubscription.unsubscribe();
this.steppedUpSubscription.unsubscribe();
}
}
​
Updated 9 months ago