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 startOpen http://localhost:3000 to see the app running.
Auth0 helps you to:
- Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, among others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
- Add authentication through more traditional username/password databases.
- Add support for linking different user accounts with the same user.
- Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
- Analytics of how, when and where users are logging in.
- Pull data from other sources and add it to the user profile, through JavaScript rules.
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:
- ->Login widget shows login panel
- ->Redirect to auth0 to check login creds (done in hidden iframe)
- ->Redirect back to localhost:3000/callback (done in hidden iframe)
- ->AuthService waits for 'authenticated' event to fire
- ->Redirects back to homepage
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.
- Add a side effects library (
redux-saga,redux-observable) to manage side effects. It makes the code more redux-compliant, however it goes against minimalism. - Any other ideas are welcome! Just post an issue.
If you like this project, I would really appreciate small donations. Here's my Ethereum address: 0xa395447BF15f7525484C0378c76627D45ADE0B96.