📘

Prerequisite: Complete Frontegg Authentication integration

If you haven't integrated Frontegg Authentication into your application, please integrate it before moving to Admin Portal integration. Read about how to add Frontegg to your application.

Admin Portal Integration

Embed the admin portal into your application by following this guide.

STEP 1: Import the Admin Portal

import { AdminPortal } from '@frontegg/react';

STEP 2: Add a Link to Open the Admin Portal

Bind an app link to open the Admin Portal

const handleClick = () => {
  AdminPortal.show();
};

<button onClick={handleClick}>Settings</button>

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

Custom options

📘

Supporting newer versions of react-router

With the new react-router peer dependency, it is required to pass your history from the useHistory hook as another prop to the ContextProvider.

Here is an example of how to pass your history from the useHistory hook as another prop to the ContextProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { createBrowserHistory } from "history";
import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
};

const history = createBrowserHistory();

// Replace this with your app logo 👇
const headerImage = 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg';

ReactDOM.render(
  <Router history={history}>
    <FronteggProvider history={history} contextOptions={contextOptions} headerImage={headerImage}>
      <App />
    </FronteggProvider>
  <Router />,
  document.getElementById('root')
);

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