Admin portal (self-service) quickstart

Prerequisite: Complete Frontegg Authentication integration.

If you haven't integrated Frontegg login into your application, please integrate it before moving to the self-service portal integration.

Embedded self-service portal

Bind an app link to open the self-service portal:

<template>
  <div id="app" v-if="fronteggLoaded">
    <img alt="Vue logo" src="./assets/logo.png" />
    <p>
      Logged in as
      {{ this.authState.user ? this.authState.user.email : "Not logged in" }}
    </p>
    <button v-on:click="showAdminPortal">Settings</button>
  </div>
</template>

<script>
import { AdminPortal } from "@frontegg/vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      ...this.mapAuthState(),
    };
  },
  methods: {
    showAdminPortal() {
      AdminPortal.show();
    },
  },
};
</script>

Hosted self-service portal

When using more than one application, it is recommended using the Hosted self-service portal which supports displaying all the relevant sections in an application context. For example, in the Profile section, the user will be able to see all the applications that their account is assigned to.

Prerequisites

The minimal SDK version that is required for this quickstart is @frontegg/vue@3.0.26

<template>
  <div id="app" v-if="fronteggLoaded">
    <img alt="Vue logo" src="./assets/logo.png" />
    <p>
      Logged in as
      {{ this.authState.user ? this.authState.user.email : "Not logged in" }}
    </p>
    <button v-on:click="openHostedAdminPortal">Settings</button>
  </div>
</template>

<script>
import { AdminPortal } from "@frontegg/vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      ...this.mapAuthState(),
    };
  },
  methods: {
     openHostedAdminPortal {
      AdminPortal.openHosted();
    },
  },
};
</script>

You are good to go! The self-service portal should now be shown and you are on the part for a full self-served experience on your product.