Frontegg Documentation

 What Is Frontegg?

Frontegg is a first-of-its-kind full-stack user management platform, empowering software teams with user infrastructure features for the product-led era

Suggest Edits

Frontegg is a first-of-its-kind full-stack user management platform, empowering software teams with user infrastructure features for the product-led era. From the most fundamental authentication flows to the most complex use cases, Frontegg has you covered.

Our platform offers innovative security solutions to user and identity management, powered by seamless customer experiences. Frontegg is the only platform that provides complete user management experience, with a customizable Admin Portal layer for your end users. It takes minutes to integrate, and forever to forget about.

We believe while user management starts at auth, it doesn’t end there. Modern applications need a user management solution that connects identities to user data, without compromising on security nor privacy.

Why Frontegg is Different​ ?

Blazing-fast integration - in just 5 lines of code you have Frontegg’s entire platform suite in your app.

• Innovative security methods - Your auth is in good hands -
• Delightful customer experiences - not just APIs - UIs. You get the full package.
• Complex use-case coverage - from complex organizational structures (multi-tenancy) to fine-grained authorization.

After following one of the guides, you will have a working application capable of:

Passwordless or password authentication

1. Social logins
2. Single sign-on
3. Multi-factor authentication
4. reCAPTCHA
5. JSON Web Tokens
6. User management
7. Role and Scopes
8. Email templates
9. Webhooks
10. Custom styling
11. And so much more . . .

Follow our guides to learn how to enable and configure the features you want.

What will we build?

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

In 5 minutes from now, your application will have a login box with Sign in, Sign up, and SSO. All this with just a few lines of code using redirects, Open Id Connect, and OAuth2.

⚡ 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 them for this guide.

STEP 1: Create React app

📘

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

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

npm install @frontegg/react react-router-dom

STEP 3: Configure

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

🚧

Configure Each Environment

Configure the hosted login for each environment separately.

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 shown below.

import './App.css';
// import { useEffect } from 'react';
import { ContextHolder } from '@frontegg/rest-api';
import { useAuth, useLoginWithRedirect } from "@frontegg/react";

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

  // Uncomment this to redirect to login automatically
  // useEffect(() => {
  //   if (!isAuthenticated) {
  //     loginWithRedirect();
  //   }
  // }, [isAuthenticated, loginWithRedirect]);
  
  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!

Try it now!

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