What will we build?

In this quickstart, we will add the Frontegg embedded login box to your React application.

In 5 minutes from now (start your stopwatch), your application will have a login box with Sign-in, Signup, and SSO. All this with just a few lines of code.

⚑️ The code in the sample below is available in our Frontegg Samples repository in GitHub ⚑️

Ready to start?


alt textalt text

⚑ Before you start: ⚑

πŸ“˜

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.

You will need it for this guide.


STEP 1: Create a New React application


πŸ“˜

If you have an existing app, skip this step.


To create a new app, use the following script.
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 react-router-dom
yarn add @frontegg/react [email protected]

STEP 3: Configuration

Wrap your root component with FronteggProvider.

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

import { FronteggProvider } from '@frontegg/react';
import { BrowserRouter } from 'react-router-dom';

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

ReactDOM.render(
  <BrowserRouter>
     <FronteggProvider contextOptions={contextOptions}>
        <App />
     </FronteggProvider>
  </BrowserRouter>,
  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;

Great, Frontegg is now integrated with your 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.

Give it a try now!

Open http://localhost:3000/account/sign-up and sign up with your first user.


Did this page help you?