## Vue.js 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/vue@3.0.15

br
Frontegg's step-up SDK for Vue.js provides an option to integrate with step-up in two ways:

br
- `isSteppedUp` - a state reflector
- `stepUp` - an action


### `isSteppedUp`

Used to reflect the user’s **Step-up** state.


```typescript
import { useIsSteppedUp } from '@frontegg/vue';

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

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

br
**Return value**

The function returns `true` when the user is *Stepped up* and `false` if otherwise. The calculation is based on the information in the JWT at the moment you run the function.

### `stepUp`

Used for triggering the step-up flow.


```typescript
const { stepUp } = useFrontegg();

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

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

br
The `options` Object and JWT's `max_age`
For both the `stepUp` and `isSteppedUp` functions, You can pass an `options` object with a `maxAge` field (value in seconds). If `maxAge` won't be passed, 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 passed this timeframe (which is calculated from the JWT's `auth_time` claim).

### Full example


```typescript
<template>
  <section v-if="fronteggLoaded">
    <section v-if="isAuthenticated">
      <div v-if="!isSteppedUp">
        <button v-on:click="onStepUp">Step Up</button>
      </div>

      <section v-if="isSteppedUp">
          You are STEPPED UP!
      </section>
    </section>
  </section>
</template>

<script>
import {
  useFrontegg,
  useIsSteppedUp,
  useAuthState,
} from '@frontegg/vue';
import { AdminPortal } from "@frontegg/vue";

export default {
  setup() {
    const stepUpOptions = { maxAge: 60 * 60 };

    const { fronteggLoaded, stepUp, authState } = useFrontegg();
    
    // ...

    function onStepUp() {
      stepUp(stepUpOptions);
    }

    const isSteppedUp = useIsSteppedUp(stepUpOptions);

    return {
      fronteggLoaded,
      onStepUp,
      isSteppedUp,
    };
  },
};
</script>
```