## Vanilla.js 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/js@6.168.0

br
Frontegg's step-up SDK for Vanilla.js provides an option to integrate with step-up in two ways:

- `isSteppedUp` - the state reflector.
- `stepUp` - Used to initiate the flow.


### `isSteppedUp`

The `isSteppedUp` function acts as a state reflector that's used to check on a user’s step-up state. The function will return either a `true` or `false` values depending if the user is stepped up or not. The calculation is based on the JWT's availability at the moment the request is initiated.

br

```typescript
const app = new FronteggApp(...);

// Example #1
const isUserSteppedUp = app.isSteppedUp(); // no max-age

// Example #2
const isUserSteppedUp = app.isSteppedUp({ maxAge: 60 * 60 }); // 1 hour
```

### `stepUp`

Used for triggering the step-up flow.

br

```typescript
const app = new FronteggApp(...);

// Example #1
app.stepUp(); // no max-age

// Example #2
app.stepUp({ maxAge: 60 * 60 }); // 1 hour
```

br
JWT `maxAge` Parameter
For both the `stepUp` and `isSteppedUp` functions you can pass a `maxAge` parameter (value stated in seconds). If `maxAge` won't be provided, the JWT's age won't be 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

Refer to the examples below that convey the full flow:

br

```typescript
<section fe-state="isAuthenticated">
  <button fe-action="step-up" fe-state="canStepUp">Step Up</button>

  <section fe-state="isSteppedUp">
      You are STEPPED UP!
  </section>
</section>
```

br

```typescript
const MAX_AGE = 60 * 60;

//...
const app = initialize({
 //...
});

document.querySelector('[fe-action="step-up"]').addEventListener('click', () => {
  app.stepUp({ maxAge: MAX_AGE });
});

app.store.subscribeStateChanged((state) => {
	const isAuthenticated = state.auth.isAuthenticated;

  let styleHtml = ''
  
  if (isAuthenticated) {
    styleHtml += '[fe-state="isAuthenticated"] { }';
    styleHtml += '[fe-state="!isAuthenticated"] { display: none; }';
  } else {
    styleHtml += '[fe-state="isAuthenticated"] { display: none; }';
    styleHtml += '[fe-state="!isAuthenticated"] { }';
  }

  const isUserSteppedUp = app.isSteppedUp({ maxAge: MAX_AGE });
	if (isAuthenticated) {
	  if (isUserSteppedUp) {
	    styleHtml += '[fe-state="isSteppedUp"] { }';
	    styleHtml += '[fe-state="!isSteppedUp"] { display: none; }';
	  } else {
	    styleHtml += '[fe-state="isSteppedUp"] { display: none; }';
	    styleHtml += '[fe-state="!isSteppedUp"] { }';
	  }
	}

  // show/hide step up button 
  if (isAuthenticated && !isUserSteppedUp) {
      styleHtml += '[fe-state="canStepUp"] { }';
	    styleHtml += '[fe-state="!canStepUp"] { display: none; }';
	  } else {
	    styleHtml += '[fe-state="canStepUp"] { display: none; }';
	    styleHtml += '[fe-state="!canStepUp"] { }';
	  }
	}

  style.innerHTML = styleHtml;
});
```

br
### Hosted login with a redirect

If you are using Frontegg's **hosted login** mode and are utilizing the `loginWithRedirect` option, then use the following code in your implementation:

br

```typescript
function isHostedLoginRedirectUrl(state) {
  return window.location.pathname.indexOf(state.auth.routes.hostedLoginRedirectUrl) !== -1;
}

app.ready(() => {
  app.store.subscribeStateChanged(({ auth }) => {
    if (!auth.isLoading && !auth.isAuthenticated && !isHostedLoginRedirectUrl(state)) {
      app.loginWithRedirect();
    }
  });
});
```