Skip to content
React, Express and Material UI: In the wild
JavaScript HTML
Branch: master
Clone or download
Latest commit 9f0e351 May 8, 2018

README.md

Auth0, React and Material UI: In the wild.

This repository reflects the working result of following the Auth0 blog post titled Auth0, React and Material UI: In the wild.

Get this repo working!

You're going to need an mLab account (or local Mongo DB) and an Auth0 application and api.

Sign Up for Auth0

You'll need an Auth0 account to manage authentication. You can sign up for a free Auth0 account here.

Next, set up an Auth0 Application and API so Auth0 can interface with the React app and Node API.

Set Up an Auth0 Application

  1. Go to your Auth0 Dashboard and click the "Create a New Application" button.
  2. Name your new app (something like Angular Firebase) and select "Single Page Web Applications".
  3. In the Settings for your new Auth0 application app, add http://localhost:4200/callback to the Allowed Callback URLs.
  4. Enable the toggle for Use Auth0 instead of the IdP to do Single Sign On.
  5. At the bottom of the Settings section, click "Show Advanced Settings". Choose the OAuth tab and verify that the JsonWebToken Signature Algorithm is set to "RS256".
  6. If you'd like, you can set up some social connections. You can then enable them for your app in the Application options under the Connections tab. The example shown in the screenshot above uses username/password database, Facebook, Google, and Twitter.

Note: For production, make sure you set up your own social keys and do not leave social connections set to use Auth0 dev keys.

Set Up an Auth0 API

  1. Go to APIs in your Auth0 dashboard and click on the "Create API" button. Enter a name for the API, such as Auth0 Videos API. Set the Identifier to your API endpoint URL. In this tutorial, our API identifier is http://localhost:3001/. The Signing Algorithm should be "RS256".
  2. You can consult the Node.js example under the Quick Start tab in your new API's settings. In the next steps, we'll implement our Node API in this fashion using Express, express-jwt, and jwks-rsa.

We're now ready to implement Auth0 authentication on both our React client and Node back end API.

Setting up a MongoDB database

We're going to use mLab's free cloud-hosted "sandbox" database. This database is not considered suitable for production websites because it lacks redundancy and its support, availability, and size are limited; however, this database is great for development and prototyping.

Create a free account with mLab. The bonus over a free AWS or Google Cloud instance is that you can get up and running without providing any payment details.

Create an mLab account

After logging in, you'll be taken to your home screen.

  • Click Create New in the MongoDB Deployments section of the home screen.

    Click Create New in the MongoDB Deployments section

  • This opens the Cloud Provider Selection screen.

    Select any provider and a free SANDBOX plan

    • Select any provider from the Cloud Provider section. Their availability regions differ.

    • Select the 'SANDBOX' plan from the Plan Type section, it's free.

    • Now click Continue.

  • This opens the Select Region screen.

    Select a suitable region that's close to you

    • Select the region closest to you and click Continue.
  • This opens the Final Details screen.

    Name your database and click continue

    • Enter the name of your new database and click Continue.
  • This opens the Order Confirmation screen.

    Confirm your details and submit order

    • Confirm the details and click Submit Order.
  • You'll be returned to the home screen.

    • Open the database you just created. Note the URL shown here (or where to go find it), as you'll need it later.

    Open your new database and note the URL

    • Click on the Users tab.

    • Click the Add database user button.

    Click to add a new database user

  • This opens an Add new database user form.

    • Complete form and click Create.

    Complete the user details and click create

  • You'll be returned to the home screen.

    • Click on the Collections tab.

    • Click the Add collection button.

    Click to add a new database collection

  • This opens an Add new collection form.

    • Complete form and click Create.

    Complete the collection details and click create

You now have the URL of a database you can use for development along with a username and password to access it, and a collection to store your favourite videos in. The URL should be something along the lines of mongodb://<db-user>:<db-password>@<user-domain>.mlab.com:<port>/<db-name>.

Edit configs

Edit server/config.js and www-client/src/config.js and complete with the details required for Auth0 and mLab.

// server/config.js
module.exports = {
  auth0Domain: '<auth0-domain>.auth0.com',
  auth0Audience: '<auth0-api-audience-identifier>',
  auth0YoutubeRss: '<youtube-rss-feed>', // https://www.youtube.com/feeds/videos.xml?channel_id=UCUlQ5VoIzE_kFbYjzUwHTKA
  mlabConnectionString: '<mlab-url-string-or-localhost>',
  corsOrigin: '*',
  nodePort: 3001
};
// www-client/src/config.js
module.exports = {
  auth0Domain: '<auth0-domain>.auth0.com',
  auth0ClientID: '<auth0-client-id>',
  auth0RedirectUri: '<auth0-redirect-uri>',
  auth0Audience: '<auth0-api-audience-identifier>',
  auth0ResponseType: 'token id_token',
  auth0Scope: 'openid profile email',
  apiUrl: '<url-to-express-server-application>' // http://localhost:3001
};

Yarn installs

yarn && yarn --cwd=server && yarn --cwd=www-client

Run the apps

# From project root
yarn dev # runs both server & www-client
You can’t perform that action at this time.