Hosted Admin Portal Integration (Vanilla.js)

Admin Portal Integration

For Frontegg admin portal integration, we will import the FronteggAppService from the @frontegg/vanilla package and use openHostedAdminPortalmethod when clicking on the relevant button.

import {initialize} from "@frontegg/js"

const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = '';

const app = initialize({
          baseUrl: 'my-base-url',
          clientId: 'my-client-id',
          appId: 'my-app-id'
  hostedLoginBox: true //if you are working in embedded mode remove this one

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

Add the representative HTML button that will show the admin portal view. Clicking on the button should show the admin portal right away.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
        button {
            border-radius: 4px;
            background: dodgerblue;
            color: white;
            border: 0;
            padding: 8px 16px;

<div id="app-root" style="display: none">
    <h1>This is Frontegg Integration in Vanilla Javascript </h1>
    <button fe-action="open-admin-portal" fe-state="isAuthenticated">Open  Admin Portal</button>
<script src="/bundle.js"></script>

You are good to go! You should now see the admin portal in your application and be able to use our full self-served experience with your product.