Home
Help CenterSign up for Frontegg

Angular Step-up SDK

Suggest Edits

🚧

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 a true when the user is stepped up or false, otherwise.
  • options - An object. You can pass the options object in the hook with a maxAge field in seconds. When maxAge 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's max_age

For both StepUp and isSteppedUp$ functions, You can pass the options object with a maxAge field (value in seconds). If maxAge 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's auth_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 3 months ago