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
anduseIsSteppedUp
, You can pass amaxAge
parameter (value stated in seconds). IfmaxAge
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'sauth_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.
💡 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.Passing HOC Component Properties
You can pass the following component properties in the HOC:
maxAge
- value indicated in seconds. IfmaxAge
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 tofalse
.
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>}
/>
Updated 9 months ago