@frontegg/react-auth

Authentication Plugin

Pre-built Authentication components to easily integrate Auth Components into your React App.

Installation

Frontegg-React-Auth is available as an npm package.

// using npm
npm install @frontegg/react-auth

// using yarn
yarn add @frontegg/react-auth

// NOTE: to get the latest stable use @latest.

Import

All you need is to add pass AuthPlugin to the FronteggProvider:

/* imports */
import { FronteggProvider } from '@frontegg/react-core';
import { AuthPlugin } from '@frontegg/react-auth';

ReactDOM.render(
<BrowserRouter>
  <FronteggProvider
      context={/* context options */}
      plugins={[
        AuthPlugin()
      ]}>
    <App />
  </FronteggProvider>
</BrowserRouter>, document.querySelector('#app'));

Options and Customizations

Frontegg-React-Auth provide the ability to fully customize your components to align it with your App UI design.

• header <ReactNode>
• backgroundImage <string>
• backgroundColor <CSSColor>
• loaderComponent <ReactNode>
• routes <string[]>

Advanced Customizations

• Login Component

header <ReactNode>

(optional) React Component used to customize your authentication page header

const plugins = [
  AuthPlugin({
    header: <MyAuthPageHeader/>,
    //...rest options
  })
];

backgroundImage <string>

(optional) CSS Color used to for authentication page background color

const plugins = [
  AuthPlugin({
    backgroundImage: 'https://image_url' | 'data:image/png;base64,...',
    //...rest options
  })
];

backgroundColor <CSSColor>

(optional) CSS Color used to for authentication page background color

const plugins = [
  AuthPlugin({
    backgroundColor: '#FAFAFA' | 'red' | 'rgb(200,200,200)',
    //...rest options
  })
];

loaderComponent <ReactNode>

(optional) React Component displayed in first load while resolving the verifying the authenticated user, refreshing the token, and to check if the user should be redirected to login page.

const plugins = [
  AuthPlugin({
    loaderComponent: <MyLoaderComponent>,
    //...rest options
  })
];

routes <string[]>

(optional) Path routes for Authentication Components, these pathes used to redirect the user to a specific route depends on authentication state.

const plugins = [
  AuthPlugin({
    routes: {
      /**
       * the page whither need to redirect in the case when a user is authenticated
       */
      authenticatedUrl: '/',
      /**
       * the page whither need to redirect in the case when a user is not authenticated
       */
      loginUrl: '/account/login',
      /**
       * navigating to this url, AuthProvider will logout and remove coockies
       */
      logoutUrl: '/account/logout',
      /**
       * the page whither need to redirect in the case when a user want to activate his account
       */
      activateUrl: '/account/activate',
      /**
       * the page in the case a user forgot his account password
       */
      forgetPasswordUrl: '/account/forgot/password',
      /**
       * the page whither need to redirect in the case when a user redirected from reset password url
       */
      resetPasswordUrl: '/account/reset/password',
    },
    //...rest options
  })
];

Implementing custom React UI on top of Frontegg API

Implementation of custom and dedicated UI on top of the Frontegg stateful API is available by following our docs on the React API section.

In case you want to implement your states on top of our stateless API follow our docs on the REST API section.

Contributing

The main purpose of this repository is to continue developing Frontegg React to making it faster and easier to use. Read our contributing guide to learn about our development process.

Notice that contributions go far beyond pull requests and commits.

License

This project is licensed under the terms of the MIT license.