• Introduction
• Setup
• Overview
• 1. Install the CLI
• 2. Create the App
• 3. Run the App
• 4. Setup the API
• Layout
• Overview
• 1. Install Bootstrap
• 2. Add Custom Styles
• 3. Add the Header
• Routing
• Overview
• 1. Convert Title to a Link
• 2. Add Feed to Routes
• Data Structure
• Overview
• 1. Add Mock Data to Feed
• 2. Create Tweet Component
• 3. Add Mock User Data
• Fetching Data
• Overview
• 1. Set API Location
• 2. Create Tweet Model
• Convention over Configuration
• 3. Connect Feed Component
• 4. Display Loading Message
• 5. Fetch User for Tweet
• Authentication
• Overview
• 1. Add Profile to Layout
• 2. Add Auth0 Config
• 3. Add Login Page
• 4. Redirect to Login
• 5. Add Callback Route
• 6. Add Logout Page
• 7. Fetch Current User
• 8. Save User to Context
• Server
• Overview
• 1. Clone the API Server
• 2. Parse the Collection
• 3. Parse the Model
• 4. Add Unauthorized Experience
• 5. Add Authorization Header
• Pagination
• Overview
• 1. Add Pagination Metadata
• 2. Paginate the Tweets
• 3. Add Pagination Links
• 4. Improve User Experience
• Infinite Scrolling
• Overview
• 1. Create Load More Button
• 2. Create Infinite Scrolling List
• 3. Convert the Feed
• Cleanup
• Overview
• 1. Remove Unnecessary Code
• Dialogs
• Overview
• 1. Add Create Button
• 2. Mounting Dialogs
• 3. Add Create Dialog
• 4. Simplify the Dialog
• 5. Generate Dialog via Hook
• 6. Add Edit Dialog
• 7. Add Delete Dialog
• Authorization
• Overview
• 1. Hide Edit Link
• 2. Hide Delete Link
• 3. Alternative Approach
• Optimistic Updates
• Overview
• 1. Freeze Pagination Data
• 2. Display New Tweets
• 3. Display Optimistic Tweets
• 4. Add Optimistic Values
• 5. Show Optimistic Visual Cues
• 6. Hide Deleted Tweets
• Normalization
• Overview
• 1. Normalize Tweet Response
• Filtering
• Overview
• 1. Add Filter
• 2. Display User Tweets
• WebSockets
• Overview
• 1. Add WebSocket Support
• 2. Send Client ID to API
• Publishing
• Overview
• 1. Create Production Build
• 2. Deploy to Production
• 3. Create Production Config
• 2. Redeploy to Production
• Next Steps
• Overview
• Misc
• Installing Node
• Completed Project

Step 2: Add Auth0 Config

In this step we're going to configure Auth0, which we'll be using as the authentication service for this Quickstart.

You can view the finished code for this step by checking out the authentication.2 branch of the completed project.

Install Auth0 Package

Run this command to install auth0-js, a library we'll be using to manage the authentication flow for our application.

npm install auth0-js --save

Add Auth0 Config

Once we integrate Auth0, the user will be redirected to an Auth0 server to login, and then redirected back to our application once they do. In order to accomplish this, our application is going to need to know a few things first:

1. The domain where the authentication server is located
2. The client ID for the application we want the user to log in to
3. The URL the user should be redirected to after they log in

We're going to add these values to the application configuration, but instead of adding them to an existing config file, we're going to create a new one just for Auth0.

Create a new file in /config called auth0.js and paste in this content:

// config/auth0.js
export default {
  domain: 'lorejs.auth0.com',
  clientID: 'XFcYHKv1NXCVrbtSaf0JZPRLtYj5UZ7E',
  redirectUri: 'http://localhost:3000/auth/callback',
  audience: 'https://lorejs.auth0.com/userinfo',
  responseType: 'token id_token',
  scope: 'openid'
}

// config/auth0.js
export default {
  domain: 'lorejs.auth0.com',
  clientID: 'XFcYHKv1NXCVrbtSaf0JZPRLtYj5UZ7E',
  redirectUri: 'http://localhost:3000/auth/callback',
  audience: 'https://lorejs.auth0.com/userinfo',
  responseType: 'token id_token',
  scope: 'openid'
}

// config/auth0.js
export default {
  domain: 'lorejs.auth0.com',
  clientID: 'XFcYHKv1NXCVrbtSaf0JZPRLtYj5UZ7E',
  redirectUri: 'http://localhost:3000/auth/callback',
  audience: 'https://lorejs.auth0.com/userinfo',
  responseType: 'token id_token',
  scope: 'openid'
}

The /config folder in Lore is compiled into a single object, which you can access from lore.config. This means you can add your own files to the /config folder and access their values from lore.config.

Since the name of the file we just added was auth0, that means we can now access these values from the lore.config.auth0 object.

Visual Check-in

If everything went well, your application should now look like this. Exactly the same : )

Code Changes

Below is a list of files modified during this step.

config/auth0.js

export default {
  domain: 'lorejs.auth0.com',
  clientID: 'XFcYHKv1NXCVrbtSaf0JZPRLtYj5UZ7E',
  redirectUri: 'http://localhost:3000/auth/callback',
  audience: 'https://lorejs.auth0.com/userinfo',
  responseType: 'token id_token',
  scope: 'openid'
}

export default {
  domain: 'lorejs.auth0.com',
  clientID: 'XFcYHKv1NXCVrbtSaf0JZPRLtYj5UZ7E',
  redirectUri: 'http://localhost:3000/auth/callback',
  audience: 'https://lorejs.auth0.com/userinfo',
  responseType: 'token id_token',
  scope: 'openid'
}

export default {
  domain: 'lorejs.auth0.com',
  clientID: 'XFcYHKv1NXCVrbtSaf0JZPRLtYj5UZ7E',
  redirectUri: 'http://localhost:3000/auth/callback',
  audience: 'https://lorejs.auth0.com/userinfo',
  responseType: 'token id_token',
  scope: 'openid'
}

Next Steps

Next we're going to add a login experience.