HomeAPI ReferenceSDKs
Guides
Help CenterSign up for Frontegg

Vanilla.JS Step-up SDK

Suggest Edits

🚧

Prerequisites

The required Vanilla.JS Frontegg SDK version for this feature is 6.168.0.

The Vanilla.JS Step Up SDK exposes two functions via the FronteggApp instance to allow you to integrate with the feature:

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

Hosted Login with a Re-direct

If you are using Frontegg's hosted login mode and are utilizing the loginWithRedirectoption, 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();
    }
  });
});

Updated 9 months ago