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 = '';
document.getElementsByTagName('head')[0].appendChild(style);

const app = initialize({
 contextOptions={{
          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', () => {
  app.openHostedAdminPortal()
})

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">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button {
            border-radius: 4px;
            background: dodgerblue;
            color: white;
            border: 0;
            padding: 8px 16px;
        }
    </style>
</head>
<body>

<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>
</div>
<script src="/bundle.js"></script>
</body>
</html>

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.