## 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

br
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.

br

```typescript
// 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
```

br
### 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.

br

```typescript
// Example #1
fronteggAuthService.stepUp(); // no max-age

// Example #2
fronteggAuthService.stepUp({ maxAge: 60 * 60 }); // 60 minutes
```

br
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).

br
#### Full example

The example below showcases the full flow, including the HTML and TypeScript files.

br
OnDestroy Cleanup
Don't forget to unsubscribe from an observable in the `ngOnDestroy` method. (see example below)

br

```typescript
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();
  }
}
```