React embedded login quickstart

This guide walks you through integrating Frontegg’s login box into your React app, with built-in support for Sign In, Sign Up, SSO, and automatic redirects—all in just a few lines of code.

Check out the sample package on GitHub

Getting your Frontegg subdomain and `clientId`

Frontegg creates a unique subdomain and client id for every environment created on the account. In order to retrieve the clientId subdomain that will act as the baseUrl in the integration, navigate to your workspace Keys & domains menu, and copy the Frontegg domain and clientId.

Step 1: Create a Vite.js app with React

If you have an existing app, skip this step.

To create a new app, use the following script.

npm create vite@latest app-with-frontegg --template react

Run the following command to install the Frontegg React.JS library.

npm install @frontegg/react react-router-dom

Step 2: Configure

Wrap your root component with FronteggProvider.

See contextOptions for more information.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { FronteggProvider } from '@frontegg/react';


const contextOptions = {
  baseUrl: 'https://[YOUR-SUBDOMAIN].frontegg.com',
  appId: '[YOUR-APP-ID]' 
};

const authOptions = {
  keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <FronteggProvider 
    contextOptions={contextOptions} 
    hostedLoginBox={false}
    authOptions={authOptions}
    >
        <App />
    </FronteggProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

See keepSessionAlive and hostedLoginBox for more information.

Step 3: 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 { 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;

Login and logout routes have been added to your app:

Signup screen is at http://localhost:3000/account/sign-up
Login screen is at http://localhost:3000/account/login
If you are already logged in, go to http://localhost:3000/account/logout and log out.

Great, Frontegg is now integrated with your app!

Run your app and click on the Click me to login button.