React 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/react@6.0.20

Frontegg's step-up SDK for React provides an 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.

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