shuaibiyy / react-redux-auth0-kit

Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication

React Redux Auth0 Kit

Minimal starter boilerplate project with React, Redux, React Router and Auth0 authentication

Live demo

A live demo of this project with a simple Facebook login via Auth0 is available here: https://react-redux-auth0.firebaseapp.com.

Getting started

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.

Features

Auth0

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.

AuthService

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

Libraries

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.

Development

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.

Testing

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.

Deployment

Out of the box, this starter kit is deployable by serving the ~/build folder generated by npm run build.

License

MIT. See LICENSE file.

Future ideas

• 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.

Donations

If you like this project, I would really appreciate small donations. Here's my Ethereum address: 0xa395447BF15f7525484C0378c76627D45ADE0B96.