Angular Step-up quickstart

Prerequisites

If you haven't integrated Frontegg login into your application, the minimal SDK version that is required for this quickstart is @frontegg/angular@6.16.0

Frontegg's step-up SDK for Angular provides an option to integrate using 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();
  }
}