reactjs-auth-boilerplate
reactjs-auth-boilerplate copied to clipboard
This repository was created to assist in the authentication implementation process in React JS applications with JWT and refresh token.
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.