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

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

isSteppedUp - a state reflector
stepUp - an action

`isSteppedUp`

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

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

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

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

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.

const { stepUp } = useFrontegg();

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

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

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

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