## 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

br
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.


```typescript
// 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 the`useStepup` hook.  The hook will return the  `stepUp` function which will enroll the user to Step Up.


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

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

br
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).

br
### Full Step-Up flow (hooks)

The complete flow via hooks would be as follows:

br

```typescript
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>
      )}
    </>
  );
};
```

br
### `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.

br
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`.

br
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:

br

```typescript
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>}
/>
```