Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Minimal starter boilerplate project with React, Redux, React Router and Auth0 authentication
A live demo of this project with a simple Facebook login via Auth0 is available here: https://react-redux-auth0.firebaseapp.com.
First create an auth0 account. Then run the following commands. Make sure your src/utils/config.js
file has the correct values from your auth0 account.
# Install dependencies
npm install
# Copy configuration and replace with your own
cp src/utils/config.example.js src/utils/config.js
# Run
npm start
Open http://localhost:3000
to see the app running.
Auth0 helps you to:
The library auth0-lock
provides the user authentication, and I also have a src/utils/AuthService.js
module to wrap this Lock Widget usage and manage the localStorage items.
I'm using the latest Auth0 Lock 10 version in popup mode, which means here's the flow:
This starter kit is minimal, only the strict necessary is added.
Library | Description |
---|---|
react | Facebook's library for building user interfaces |
redux | State container for JavaScript apps |
react-router | Declarative routing for React apps using navigational components |
create-react-app | All tooling needed for react apps |
The starter kit includes a working example app that puts all of the above to use.
create-react-app
takes care of tooling, development server, live reload, building, testing.
HMR is unfortunately not enabled during development, because create-react-app
doesn't support it.
If you wish to directly use Webpack instead of create-react-app
, you can eject any time by running npm run eject
. Read here for more information about ejecting.
npm run lint
to check linting errors. This projects follows eslint-config-react-app
style.
npm test
to run all tests. This project uses jest to run tests, and enzyme for unit testing React components.
Out of the box, this starter kit is deployable by serving the ~/build
folder generated by npm run build
.
MIT. See LICENSE file.
redux-saga
, redux-observable
) to manage side effects. It makes the code more redux-compliant, however it goes against minimalism.If you like this project, I would really appreciate small donations. Here's my Ethereum address: 0xa395447BF15f7525484C0378c76627D45ADE0B96.