# @pxblue/react-auth-workflow > Re-usable workflow components for Authentication and Registration within Eaton applications. Latest version **2.4.0** (published 2021-08-30) · BSD-3-Clause license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @pxblue/react-auth-workflow pnpm add @pxblue/react-auth-workflow yarn add @pxblue/react-auth-workflow bun add @pxblue/react-auth-workflow ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 2.4.0 | | Published | 2021-08-30 | | First published | 2020-08-28 | | Weekly downloads | 0 | | License | BSD-3-Clause | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 231.4 KB | | Known vulnerabilities | 0 (+16 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 10 | | Author | Power Xpert Blue | | Maintainers | px-blue | | Keywords | pxblue, react, workflows, authentication, login, registration | ## Links - npm: https://www.npmjs.com/package/@pxblue/react-auth-workflow - Repository: https://github.com/pxblue/react-workflows/tree/master/login-workflow - npm.io page: https://npm.io/package/@pxblue/react-auth-workflow ## Dependencies (3) - [dompurify](https://npm.io/package/dompurify.md) ^2.2.9 - [@pxblue/react-auth-shared](https://npm.io/package/@pxblue/react-auth-shared.md) ^3.5.0 - [i18next-browser-languagedetector](https://npm.io/package/i18next-browser-languagedetector.md) ^6.1.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.4.0 (latest) — 2021-08-30 - 2.4.0-beta.2 (beta) — 2021-08-27 - 2.4.0-beta.1 — 2021-08-27 - 2.3.1 — 2021-08-11 - 2.3.0 — 2021-07-27 - 2.2.0 — 2021-06-25 - 2.1.0 — 2021-04-30 - 2.0.0 — 2021-03-31 - 2.0.0-beta.3 — 2021-03-26 - 2.0.0-beta.2 — 2021-03-11 - 2.0.0-beta.1 — 2021-03-11 - 1.0.1 — 2020-12-10 - 1.0.1-beta.0 — 2020-12-02 - 1.0.0 — 2020-08-28 ## README # React Auth Workflow ![npm (scoped)](https://img.shields.io/npm/v/@pxblue/react-auth-workflow) The React Auth Workflow package provides a consistent authentication and registration experience across Eaton web applications using React. This includes pre-built implementations of the screens for Login, Forgot Password, Contact Information, Self-Registration, Registration By Invitation, and a dialog for Change Password. Integrating the user interface into your application is as easy as providing the API calls for the various authentication and registration actions performed by the user. The `AuthNavigationContainer` automatically handles the presentation of the non-secure (pre-authorization) and secure (custom application) portions of a mobile application. ![Login iOS](https://raw.githubusercontent.com/pxblue/react-workflows/master/login-workflow/media/login.png) ![Home iOS](https://raw.githubusercontent.com/pxblue/react-workflows/master/login-workflow/media/home.png) ![Password iOS](https://raw.githubusercontent.com/pxblue/react-workflows/master/login-workflow/media/password.png) # Installation To install the latest version of this package, run: ```shell npm install --save @pxblue/react-auth-workflow // or yarn add @pxblue/react-auth-workflow ``` # Integration You have two options for using this package in your application. You can manually integrate the package into an existing project, or you can start a project using the `/example` project provided in the package. To integrate the package into an existing project, read our [Existing Project Integration ](https://github.com/pxblue/react-workflows/tree/master/login-workflow/docs/existing-project-integration.md) instructions. Even if you are starting from scratch, it may be useful for you to refer to the example project while getting started. To use the example project as a starting point, read our [Sample Project Integration ](https://github.com/pxblue/react-workflows/tree/master/login-workflow/docs/sample-project-integration.md) instructions. # Usage (Security State) After setup, you are now able to access various security actions and state from within your application. Importing `useSecurityActions` and `useSecurityState` allows you use these hooks as follows: ```ts import {useSecurityActions, useSecurityState } from '@pxblue/react-auth-workflow'; const securityActions = useSecurityActions(); const securityState = useSecurityState(); ``` The `securityActions` allows you to access actions related to user authentication and de-authentication. You can call `securityActions.onUserNotAuthenticated();` to un-authenticate (i.e., log user out) from the application. The `securityState` allows you to access state related to security, such as the currently authenticated user's email (`securityState.email`). More information about React Auth Workflow's exported objects can found in the [API](https://github.com/pxblue/react-workflows/tree/master/login-workflow/docs/API.md) documentation. # Routing This library uses [React Router](https://reactrouter.com/) for routing. It includes a `` wrapping the entire application, so in your application, you may skip providing a Router and just render ``s. The following is a list of the screens and their available query strings which a deep link may launch to. Some screens take optional query string parameters: | Screen | Description | Default URL | Query String Params | | ------------------- | ------------------------------------------------------ | ---------------------------- | ------------------- | | Login | the login screen | `'/login'` | | | Forgot Password | the forgot password screen | `'/forgot-password'` | | | Reset Password | the reset password screen | `'/reset-password'` | `code`, `email` | | Invite Registration | the first screen of the invite-based registration flow | `'/register/invite'` | `code`, `email` | | Self Registration | the first screen of the self-registration flow | `'/register/create-account'` | `code`, `email` | | Support | the contact/support screen | `'/support'` | | #### Testing Deep Links - Open the sample URL in your browser `localhost:3000/register/invite?code=8k27jshInvite234Code` Note that the base routes for each screen can be customized via a prop on the ``. # APIs More information about React Auth Workflow's exported objects and functions can found in the [API](https://github.com/pxblue/react-workflows/tree/master/login-workflow/docs/API.md) documentation. # Language Support For information about supporting multiple languages, refer to our [Language Support](https://github.com/pxblue/react-workflows/tree/master/login-workflow/docs/language-support.md) guidelines. # Contributors To work on this package as a contributor, first clone down the repository: ```shell git clone https://github.com/pxblue/react-workflows cd react-workflows/login-workflow ``` You can install all necessary dependencies and run the demo project by running: ```shell yarn start:example ``` If you make changes to the library components and want to link them to the running example project, you can run: ```shell yarn link:workflow ``` You can build the library by running: ```shell yarn build ``` You can run the lint checks, prettier formatter, unit tests, and build by running: ```shell yarn precommit ``` You can update the auto-generated licenses.md file by running: ```shell yarn generate:licenses ``` ## Browser Support PX Blue Login Workflow will work with any modern browser. For details refer to our [Browser Support](https://pxblue.github.io/development/frameworks-web/react#browser-support) documentation. --- _Source: https://npm.io/package/@pxblue/react-auth-workflow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._