What will we build?

In this quickstart, we will add the Frontegg hosted 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 using redirects, Open Id Connect, and OAuth2.


⚑️ 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 and clientId

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

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';

const contextOptions = {
  baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
  clientId: '[YOUR-CLIENT-ID]'
};

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

Under the hosted login configuration add http://localhost:3000/oauth/callback as the allowed redirectUrl

STEP 4: Redirect to login

Using the Frontegg useAuth hook, you can determine whether a user is authenticated or not. If the user is not authenticated, you can redirect the user to login via the useLoginWithRedirect hook (as the sample below shows).

import './App.css';
import { useAuth, useLoginWithRedirect } from "@frontegg/react";

function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();
  
  return (
    <div className="App">
      { isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl} alt={user?.name}/>
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => alert(user.accessToken)}>What is my access token?</button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>Click me to login</button>
        </div>
      )}
    </div>
  );
}

export default App;

Great, Frontegg is now integrated with your app!

Give it a try now!

Open http://localhost:3000 and click on the Click me to login button.


Did this page help you?