React Step-up SDK

🚧

Prerequisites

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 ? (
        <div>
          You are STEPPED UP!
        </div>
      ) : (
        <button onClick={() => {
          stepUp({ maxAge: MAX_AGE });
        }}>
          Step me up
        </button>
      )}
    </>
  );
};

SteppedUpContent

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.

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!
</SteppedUpContent>

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

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