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

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.

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.

const app = new FronteggApp(...);

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

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

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:

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

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;
});

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

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