Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ederssouza/reactjs-auth-boilerplate

This repository was created to assist in the authentication implementation process in React JS applications with JWT and refresh token.
https://github.com/ederssouza/reactjs-auth-boilerplate

authentication boilerplate coverage coveralls jest jwt jwt-authentication react react-auth react-authentication react-boilerplate reactjs reactrouter reactrouterdom refresh-token testing-library typescript

Last synced: about 21 hours ago
JSON representation

This repository was created to assist in the authentication implementation process in React JS applications with JWT and refresh token.

Awesome Lists containing this project

README 

        


  
React JS Authentication Boilerplate





  

    Build Status

  



  

    Coverage Status

  



  

    Coverage Status

  




## Summary



- [About](#about)

- [Built using](#built-using)

- [Getting started](#getting-started)

  - [Prerequisites](#prerequisites)

  - [Installing dependencies](#installing-dependencies)

- [Project setup](#project-setup)

  - [Compiles and hot-reloads for development](#compiles-and-hot-reloads-for-development)

  - [Compiles and minifies for production](#compiles-and-minifies-for-production)

  - [Lints and fixes files](#lints-and-fixes-files)

  - [Run your unit tests](#run-your-unit-tests)

- [Test users](#test-users)

  - [Administrator](#administrator)

  - [Client](#client)

- [Route types](#route-types)

  - [Public route](#public-route)

  - [Private route](#private-route)

  - [Hybrid route](#hybrid-route)

- [Control visibility of components](#control-visibility-of-components)

- [Contributing](#contributing)

- [Versioning](#versioning)

- [Authors](#authors)

- [License](#license)



## About



This repository was created to assist in the authentication implementation process in React **JS applications with JWT and refresh token**. All components and contexts have **unit tests** and a **basic HTML structure without CSS**. The project has features to **secure routes** and **control the visibility of components** based on permissions, the entire implementation process is in this document.



Feel free to clone the project or use it as a template and make any changes you deem necessary.



## Built using



- [React JS](https://reactjs.org): JavaScript library

- [TypeScript](https://www.typescriptlang.org): JavaScript With Syntax For Types

- [Jest](https://jestjs.io): JavaScript Testing Framework

- [React Testing Library](https://testing-library.com): Testing utilities



## Getting started



### Prerequisites



You need to install on your machine [Node.js](https://nodejs.org) or [Yarn](https://yarnpkg.com).



### Installing dependencies



```bash

npm install

# or

yarn install

```



## Project setup



### Compiles and hot-reloads for development



```bash

# start app open development mode

yarn start

# or

npm run start

```



### Compiles and minifies for production



```bash

yarn build

# or

npm run build

```



### Lints and fixes files

```bash

# show errors

yarn lint

# or

npm run lint



# fix errors

yarn lint:fix

# or

npm run lint:fix

```



### Run your unit tests



```bash

# run tests

yarn test

# or

npm run test



# run tests on watch mode

yarn test:watch

# or

npm run test:watch



# run tests on coverage mode

yarn test:coverage

# or

npm run test:coverage



# run tests on coverage with watch mode

yarn test:coverage:watch

# or

npm run test:coverage:watch

```



## Test users



The app is integrated with the [node-api-refresh-token.cyclic.app](https://node-api-refresh-token.cyclic.app) API, configured in the `.env` file. There are two users with different accesses so that the tests can be performed:



### Administrator



- **Email**: [email protected]

- **Password**: password@123

- **Permissions**: `users.list`, `users.create`, `metrics.list`



### Client



- **Email**: [email protected]

- **Password**: password@123

- **Permissions**: `metrics.list`



## Route types



The route components are based on `` component of [react-router-dom](https://reactrouter.com/web/guides/quick-start) and receive same props.



### Public route



The route can only be accessed if a user is not authenticated. If accessed after authentication, the user will be redirected `/` route.



```tsx

import { Routes } from 'react-router-dom'

import { PublicRoute } from 'src/router/PublicRoute'



const SampleComponent = () => 
Sample component



export const Router = () => (

  

    

  

)

```



### Private route



The route can only be accessed if a user is authenticated. Use permission props (returned by the API) to access the control.



```tsx

import { Routes } from 'react-router-dom'

import { PrivateRoute } from 'src/router/PrivateRoute'



const SampleComponent = () => 
Sample component



export const Router = () => (

  

    {/*

      allow route access if the user has the permissions

      `users.list` and `users.create`

    */}

    

  

)

```



### Hybrid route



The route can be accessed if a user is authenticated or not. Use `Route` component.



```tsx

import { Route, Routes } from 'react-router-dom'



const SampleComponent = () => 
Sample component



export const Router = () => (

  

    } />

  

)

```



## Control visibility of components



Use the `CanAccess` component and pass `permissions` props to control the visibility of a component.



```tsx

import { CanAccess } from 'src/components'



export function NavBar () {

  return (

    <>

      {/*

        the component is shown if the user has the permissions

        `users.list` and `metrics.list`

      */}

      

        {/* YOUR COMPONENT HERE */}

      

    >

  )

}

```



## Contributing



Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.



## Versioning



We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/ederssouza/reactjs-auth-boilerplate/tags).



## Authors



See also the list of [contributors](https://github.com/ederssouza/reactjs-auth-boilerplate/contributors) who participated in this project.



## License



This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details



----



Develop by Eder Sampaio 👋  [See my linkedin](https://www.linkedin.com/in/ederssouza).