React.JS integration
β‘ 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 on 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 [email protected]
yarn add @frontegg/react react-router-dom
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',
};
// 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
We are all set. Let's run the application and see Frontegg in action.
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 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();
};
<button onClick={handleClick}>Settings</button>
You are good to go!
The admin portal should now be shown and you are on the part for a full self-served experience on your product!
Custom options
Supporting newer versions of react-router
react-router
With the new react-router peer dependency, it is required to pass your history
from the useHistory
hook as another prop to the ContextProvider
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { createBrowserHistory } from "history";
import { FronteggProvider } from '@frontegg/react';
const contextOptions = {
baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
};
const history = createBrowserHistory();
// Replace this with your app logo π
const headerImage = 'https://assets.frontegg.com/public-frontegg-assets/acme-logo.svg';
ReactDOM.render(
<Router history={history}>
<FronteggProvider history={history} contextOptions={contextOptions} headerImage={headerImage}>
<App />
</FronteggProvider>
<Router />,
document.getElementById('root')
);
Updated 8 months ago