React Redux Auth0 Kit
Minimal starter boilerplate project with React, Redux, React Router and Auth0 authentication
Upgrading to webpack2. Come back soon for an update of this boilerplate.
First create an auth0 account. Then run the following commands. Make sure your
.env file has the correct values from your auth0 account.
# Install the dependencies npm install # copy configuration and replace with your own cp .env.example .env # Run npm start
http://localhost:3000 to see the app running.
The npm start command uses webpack to compile the application code and run a simple express server for the development environment.
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.
auth0-lock provides the user authentication, and I also have a
src/utils/AuthService.js class to wrap this Lock Widget usage and manage the localStorage items.
I’m using the latest Auth0 Lock 10 version in redirect mode, which means here’s the flow: * ->Login widget shows login panel * ->Redirect to auth0 to check login creds * ->Redirect back to localhost:3000/callback * ->Instantiated AuthService waits for ‘authenticated’ event to fire * ->Redirects back to homepage
This starter kit is minimal, only the strict necessary is added.
The starter kit includes a working example app that puts all of the above to use.
HMR will be enabled in development.
This boilerplate project includes React-friendly ESLint configuration.
npm run eslint
npm test to run all tests. I use mocha/chai to run tests, and enzyme for unit testing React components.
Out of the box, this starter kit is deployable by serving the
~/dist folder generated by
npm run build.