# @frontegg/react-auth Latest version **4.0.23** (published 2022-07-10) · 0 weekly downloads ## Install ```sh npm install @frontegg/react-auth pnpm add @frontegg/react-auth yarn add @frontegg/react-auth bun add @frontegg/react-auth ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.0.23 | | Published | 2022-07-10 | | First published | 2020-09-02 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 2 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Frontegg LTD | | Maintainers | front-egg | ## Links - npm: https://www.npmjs.com/package/@frontegg/react-auth - npm.io page: https://npm.io/package/@frontegg/react-auth ## Dependencies (5) - [uuid](https://npm.io/package/uuid.md) ^8.3.2 - [jwt-encode](https://npm.io/package/jwt-encode.md) 1.0.1 - [clipboard-copy](https://npm.io/package/clipboard-copy.md) ^3.1.0 - [react-dropzone](https://npm.io/package/react-dropzone.md) ^9.0.0 - [react-recaptcha-v3](https://npm.io/package/react-recaptcha-v3.md) ^2.0.1 ## Recent versions - 4.0.23 (latest) — 2022-07-10 - 4.0.24-alpha.2645023243 (next) — 2022-07-10 - 3.0.0-alpha.13 (alpha) — 2021-08-31 - 1.0.84 (canary) — 2020-10-08 - 4.0.23-alpha.2644735232 — 2022-07-10 - 4.0.23-alpha.2644353435 — 2022-07-10 - 4.0.23-alpha.2643767892 — 2022-07-10 - 4.0.23-alpha.2629789271 — 2022-07-07 - 4.0.23-alpha.2621386928 — 2022-07-06 - 4.0.23-alpha.2621193023 — 2022-07-06 - 4.0.23-alpha.2616297689 — 2022-07-05 - 4.0.23-alpha.2610944056 — 2022-07-04 - 4.0.23-alpha.2604466665 — 2022-07-03 - 4.0.23-alpha.2594518864 — 2022-07-01 - 4.0.23-alpha.2589756030 — 2022-06-30 - … 543 more at https://npm.io/package/@frontegg/react-auth/versions ## README

Frontegg logo

Authentication Plugin

Pre-built Authentication components to easily integrate Auth Components into your [React](https://reactjs.org/) App.
## Installation Frontegg-React-Auth is available as an [npm package](https://www.npmjs.com/package/@frontegg/react-core). ```sh // 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``: ```jsx /* imports */ import { FronteggProvider } from '@frontegg/react-core'; import { AuthPlugin } from '@frontegg/react-auth'; ReactDOM.render( , 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`](#header-reactnode) `` - [`backgroundImage`](#backgroundimage-string) `` - [`backgroundColor`](#backgroundcolor-csscolor) `` - [`loaderComponent`](#loadercomponent-reactnode) `` - [`routes`](#routes-string) `` **Advanced Customizations** - [`Login Component`](src/Login/README.md) ### `header ` *(optional)* React Component used to customize your authentication page header ```jsx const plugins = [ AuthPlugin({ header: , //...rest options }) ]; ``` ### `backgroundImage ` *(optional)* CSS Color used to for authentication page background color ```jsx const plugins = [ AuthPlugin({ backgroundImage: 'https://image_url' | 'data:image/png;base64,...', //...rest options }) ]; ``` ### `backgroundColor ` *(optional)* CSS Color used to for authentication page background color ```jsx const plugins = [ AuthPlugin({ backgroundColor: '#FAFAFA' | 'red' | 'rgb(200,200,200)', //...rest options }) ]; ``` ### `loaderComponent ` *(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. ```jsx const plugins = [ AuthPlugin({ loaderComponent: , //...rest options }) ]; ``` ### `routes ` *(optional)* Path routes for Authentication Components, these pathes used to redirect the user to a specific route depends on authentication state. ```jsx 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](https://github.com/frontegg/frontegg-react/tree/master/packages/auth/src/Api). In case you want to implement your states on top of our stateless API follow our docs on the [REST API section](https://github.com/frontegg/frontegg-react/tree/master/packages/rest-api/src/auth). ## 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](/CONTRIBUTING.md) 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](/LICENSE). --- _Source: https://npm.io/package/@frontegg/react-auth · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._