Self-service (admin portal) 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:

import {initialize} from "@frontegg/js"

const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = '';
document.getElementsByTagName('head')[0].appendChild(style);

const app = initialize({
  contextOptions: {
    baseUrl: "https://YOUR_DOMAIN.frontegg.com", //set your Frontegg environment domain and client ID here
    clientId: 'YOUR_FRONTEGG_CLIENT_ID'
  },
  hostedLoginBox: true //if you are working in embedded mode set this to false
})

document.querySelector('[fe-action="open-admin-portal"]').addEventListener('click', () => {
  app.showAdminPortal()
})

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/js@6.189.0

import {initialize} from "@frontegg/js"

const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = '';
document.getElementsByTagName('head')[0].appendChild(style);

const app = initialize({
  contextOptions: {
    baseUrl: "https://YOUR_DOMAIN.frontegg.com", //set your Frontegg environment domain and client ID here
    clientId: 'YOUR_FRONTEGG_CLIENT_ID'
  },
  hostedLoginBox: true //if you are working in embedded mode set this to false
})

document.querySelector('[fe-action="open-admin-portal"]').addEventListener('click', () => {
  app.openHostedAdminPortal()
})

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.