React JS Authentication Boilerplate

Summary

• About
• Built using
• Getting started
  • Prerequisites
  • Installing dependencies
• Project setup
  • Compiles and hot-reloads for development
  • Compiles and minifies for production
  • Lints and fixes files
  • Run your unit tests
• Test users
  • Administrator
  • Client
• Route types
  • Public route
  • Private route
  • Hybrid route
• Control visibility of components
• Contributing
• Versioning
• Authors
• 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: JavaScript library
• TypeScript: JavaScript With Syntax For Types
• Jest: JavaScript Testing Framework
• React Testing Library: Testing utilities

Getting started

Prerequisites

You need to install on your machine Node.js or Yarn.

Installing dependencies

npm install
# or
yarn install

Project setup

Compiles and hot-reloads for development

# start app open development mode
yarn start
# or
npm run start

Compiles and minifies for production

yarn build
# or
npm run build

Lints and fixes files

# show errors
yarn lint
# or
npm run lint

# fix errors
yarn lint:fix
# or
npm run lint:fix

Run your unit tests

# 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 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 <Route /> component of react-router-dom 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.

import { Routes } from 'react-router-dom'
import { PublicRoute } from 'src/router/PublicRoute'

const SampleComponent = () => <div>Sample component</div>

export const Router = () => (
  <Routes>
    <PublicRoute path="/login" component={SampleComponent} />
  </Routes>
)

Private route

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

import { Routes } from 'react-router-dom'
import { PrivateRoute } from 'src/router/PrivateRoute'

const SampleComponent = () => <div>Sample component</div>

export const Router = () => (
  <Routes>
    {/*
      allow route access if the user has the permissions
      `users.list` and `users.create`
    */}
    <PrivateRoute
      path="/users"
      component={SampleComponent}
      permissions={['users.list', 'users.create']}
    />
  </Routes>
)

Hybrid route

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

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

const SampleComponent = () => <div>Sample component</div>

export const Router = () => (
  <Routes>
    <Route path="/contact" element={<SampleComponent />} />
  </Routes>
)

Control visibility of components

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

import { CanAccess } from 'src/components'

export function NavBar() {
  return (
    <>
      {/*
        the component is shown if the user has the permissions
        `users.list` and `metrics.list`
      */}
      <CanAccess permissions={['users.list', 'metrics.list']}>
        {/* YOUR COMPONENT HERE */}
      </CanAccess>
    </>
  )
}

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See also the list of contributors who participated in this project.

License

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

---

Develop by Eder Sampaio 👋  See my linkedin.