HomeAPI ReferenceSDKs
Guides
Help CenterSign up for Frontegg

Vue Step-up SDK

Suggest Edits

🚧

Prerequisites

The required Vue Frontegg SDK version for this feature is 3.0.15.

The SDK exposes two functions to help you integrate with the step-up feature:

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

Updated 10 months ago