⚡ Watch how we integrate Frontegg in less than 5 minutes ⚡

Login Box Inegration

STEP 1: Create a New React App

📘

If you have an existing app, skip this step.

To create a new app, use these two lines of code.

npx create-react-app app-with-frontegg
cd app-with-frontegg

STEP 2: Install Frontegg Libraries

Run the following command to Install frontegg React.JS library.

npm install @frontegg/react

yarn add @frontegg/react

STEP 3: Configuration

Wrap your root component with FronteggProvider.

📘

Getting Your Frontegg Subdomain

Frontegg creates a unique subdomain for every workspace created on the account. In order to retrieve the subdomain that will act as the baseUrl in the integration, navigate to your workspace administration menu, and copy the workspace domain.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

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

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

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

STEP 4: Getting the user context

Frontegg exposes the user context and the authentication state via the useAuth hook which allows you to redirect non-authenticated users to the login page and to get the user's information.

import React from 'react';
import { useAuth } from '@frontegg/react'

function App() {
  const { user, isAuthenticated } = useAuth();

  return (
    <div className='App'>
      {isAuthenticated && (
        <div>
          <img src={user.profilePictureUrl} alt={user.name} />
          <span>{user.name}</span>
        </div>
      )}
    </div>
  );
}

export default App;

STEP 5: Run the App, Signup & Login

Execute the following command to run your app.Execute the following command to run your app.

npm start

yarn start

Great, Frontegg is now integrated with your app!

Login and logout routes have been added to your app:

Signup screen will be at http://localhost:3000/account/sign-up

Login screen will be at http://localhost:3000/account/login

If you are already logged in, go to http://localhost:3000/account/logout and log out.

Give it a try by now by signing up & logging in.

Give it a try now!
Open http://localhost:3000/account/sign-up and sign up with your first user.

Admin Portal Integration

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();
};

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