ReactJS Redux and Auth0 example

Overview

This is an example of using Auth0 to secure your ReactJS application.

This application makes secured calls to a nodejs server via Restful service. The user must have a login on the Auth0 site. Once logged in, the button to load data will make a call to the server and get results back to show in a table.

NOTE: This project was created based on the YARSK project for a starting point.

YARSK Featured Frameworks

• React, of course.
• Webpack for asset bundling.
• React hot loader enabled out of the box. Changes to React components will show in the browser immediately without a full reload.
• Babel for ES6+ transpilation.
• SASS (SCSS or Sass style), Less, and Autoprefixer enabled by default through Webpack.
• Image loaders setup and ready to go so you can reference your images as require() statements in JS, or just use url() as usual in CSS and Webpack will take care of the rest. See the Header component and the Application component stylesheet for examples of each.
• Karma + Mocha for testing. Istanbul and isparta are also activated with karma-coverage for code coverage analysis, even on your ES6 classes. See Testing below for more info.
• Production configuration with best practices applied for optimizing React file size. The bundled JS file produced from this example is right at 40KB minified and gzipped. See Building below for more info.
• Built-in command for publishing your app to GitHub pages. See Building below for more info.
• Optional support for ESLint via babel-eslint.

Additional Featured Frameworks

• [Redux] (http://redux.js.org/) implementation of the Flux model for handling state changes.
• [React-Bootstrap] (https://react-bootstrap.github.io) a reactified version of the Bootstrap UI Framework.
• [Superagent] (https://github.com/visionmedia/superagent) a simple and testable http client.
• [React-fontawesome] (https://www.npmjs.com/package/react-fontawesome) a reactified version of the Font Awesome widgets.
• [Auth0-js] (https://www.npmjs.com/package/auth0-js) Auth0 client side javascript library.
• [Express-jwt] (https://www.npmjs.com/package/express-jwt) Server side security on Restful Service api.

Usage

npm install

This will install all required node modules for this application

Configure Auth0

• Create an auth0-variables.js file under the app directory and insert your information from Auth0 site

export const AUTH0_CLIENT_ID=;
export const AUTH0_DOMAIN=;
export const AUTH0_CALLBACK_URL=;

• Create an .env file under conf directory and insert your information from Auth0 site

AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=

Running in Hot Mode

npm start

That will fire up a webpack dev server in hot mode. Most changes will be reflected in the browser automatically without a browser reload. You can view the app in the browser at http://localhost:8080.

Building

To generate a production build, run:

npm run build

The above command will generate a dist folder with the appropriate index.html file along with the minified CSS and JS files.

You can also automatically publish to GitHub pages. Just run this instead of the regular build command:

npm run build:gh

You can then view your app at http://[yourgithubusername].github.io/[reponame]. For example, you can load this demo at http://bradleyboy.github.io/yarsk.

Modifying the HTML

The HTML file is generated using the conf/tmpl.html file. This file is used for both the development and production build.

Tests

The tests use Karma, Mocha and Chai through PhantomJS. See the example test in app/Application/__tests__/index.js. The test suite can be run like so:

npm test

To run the tests in watch mode (tests will re-run each time a file changes), use this instead:

npm run test:watch

You can generate code coverage reports with:

npm run test:coverage

See the coverage directory once that command is completed.

Finally, the repo is Travis ready. The .travis.yml file should work out of the box, just add your repo in Travis.

Linting

If you'd like your JavaScript to be linted, copy the .eslintrc.example to .eslintrc. I've included my own defaults, feel free to modify them to your own taste. For more information on configuring ESLint, consult its documentation. Linting is run before each webpack build when a .eslintrc file is present.

.editorconfig

An example .editorconfig file is provided with sensible defaults for JavaScript. Feel free to modify .editorconfig.example to match your own preferences, then renamed the file to .editorconfig and use an IDE or editor that supports EditorConfig.