React Step-up SDK



The required React Frontegg SDK version for this feature is 6.0.20.

React's step-up SDK gives you the option to integrate with Step-up in two ways:

  • By hooks - useIsSteppedUp & useStepUp
  • By a HOC - SteppedUpContent

The useIsSteppedUp Hook

The useIsSteppedUp is used to check for a user’s step-up state. The hook returns either a true or false value depending on the user's stepped up state.

// Example #1
const isSteppedUp = useIsSteppedUp(); // no max-age

// Example #2
const isSteppedUp = useIsSteppedUp({ maxAge: 60 * 60 }); // 1 hour

The useStepUp Hook

To trigger the user's step-up flow, use theuseStepup hook. The hook will return the stepUp function which will enroll the user to Step Up.

// Example #1
const stepUp = useStepUp(); 
stepUp(); // no max-age

// Example #2
const stepUp = useStepUp(); 
stepUp({ maxAge: 60 * 60 }); // 1 hour


maxAge parameter

For both useStepUp and useIsSteppedUp, You can pass a maxAge parameter (value stated in seconds). If maxAge won't be provided, 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 pass this timeframe (calculated from the JWT's auth_time claim).

Full Step Up Flow (Hooks)

The complete flow via hooks would be as follows:

import React from 'react';
import { useStepUp, useIsSteppedUp } from '@frontegg/react';

const MAX_AGE = 60 * 60; // 1 hour

const Page = () => {
  const stepUp = useStepUp();
  const isSteppedUp = useIsSteppedUp({ maxAge: MAX_AGE });

  return (
      { isSteppedUp ? (
          You are STEPPED UP!
      ) : (
        <button onClick={() => {
          stepUp({ maxAge: MAX_AGE });
          Step me up


Use the SteppedUpContent HOC to render content that should be displayed only when the user is stepped up.

If the user is not stepped up, the component will trigger the step-up flow unless you disable it by props.


Passing HOC Component Properties

You can pass the following component properties in the HOC:

  • maxAge - value indicated in seconds. If maxAge won't be provided— the JWT's age won't be checked.
  • preventSteppingUp - prevent triggering the step-up operation when the user isn’t stepped up. Default to false.
💡 When multiple HOCs are rendered in the same render cycle, you **SHOULD** allow up to one of them to trigger the step-up flow. That means that you should pass `preventSteppingUp = false` to all of them except for one.

Full Example - By HOC

The complete examples by HOC are as follows:

import { SteppedUpContent } from '@frontegg/react';

// Example #1
<SteppedUpContent maxAge={60 * 60}>
  You are STEPPED UP!

// Example #2 - prevent stepping up when the user isn't stepped up
<SteppedUpContent maxAge={60 * 60} preventSteppingUp={true}>
  You are STEPPED UP!

// Example #3 - Using a render props
  maxAge={60 * 60}
  render={isSteppedUp => isSteppedUp && <div>You are STEPPED UP!</div>}