• 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 4: Redirect to Login

In this step we're going to redirect the user to the /login route if they aren't authenticated.

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

Local Storage & User Tokens

While our API does not currently require the user be authenticated, we will be replacing it with a real API later that will. That API is going to require users to be authenticated before they can create, update or delete tweets.

In order to authenticate the user, we will need to send an authentication token in the header of every API request, and the token we'll be sending will be provided to us by Auth0 after the user logs in.

Also, in order to prevent asking the user to log in every time they refresh the page (or navigate away from the site), we'll be storing this token in the browser's localStorage, and only redirect the user to the login page if they have no token.

Auth Utility

If you look inside src/utils you'll find a file called auth.js. This file contains some helper methods for saving and retrieving a user token from localStorage.

For example, when the application loads, we're going to check if a userToken exists in localStorage by calling auth.hasToken(), and once we have a token, we'll be able to save it to localStorage by calling auth.saveToken(token).

You can read more about this file here.

Redirect the User

Open routes.js and find the route that renders the Master component. It should look like this:

// routes.js
<Route component={UserIsAuthenticated(Master)}>
  ...
</Route>

The UserIsAuthenticated() function that wraps Master is a higher order component that can block access to the application if the user isn't authenticated. Currently this component isn't doing anything because the blocking behavior is turned off. Let's turn it on.

To do that, open src/decorators/UserIsAuthenticated.js, which looks like this:

// src/decorators/UserIsAuthenticated.js
import PropTypes from 'prop-types';
import { AuthenticationGenerator } from 'lore-auth';

export default AuthenticationGenerator({

  propTypes: {
    router: PropTypes.object.isRequired
  },

  redirect() {
    const { router } = this.props;
    router.push('/login');
  },

  isAuthenticated() {
    return true;
  }

});

When this component gets mounted, the isAuthenticated() method is called. If it returns true, whatever component this wraps is rendered. If it returns false, the redirect() method is called, and you can send the user somewhere else.

You can read more about this file here.

Since this function currently returns true, the application never redirects the user to /login. To get the behavior we want, import src/utils/auth.js and update the isAuthenticated() method to look like this:

// src/decorators/UserIsAuthenticated.js
import auth from '../utils/auth';
...
  isAuthenticated() {
    return auth.hasToken();
  }
...

If you now try to navigate to the root route at https://localhost:3000, the application will redirect you to /login.

Visual Check-in

If everything went well, your application should now look like this.

Code Changes

Below is a list of files modified during this step.

src/decorators/UserIsAuthenticated.js

import PropTypes from 'prop-types';
import { AuthenticationGenerator } from 'lore-auth';
import auth from '../utils/auth';

export default AuthenticationGenerator({

  propTypes: {
    router: PropTypes.object.isRequired
  },

  redirect() {
    const { router } = this.props;
    router.push('/login');
  },

  isAuthenticated() {
    return auth.hasToken();
  }

});

Next Steps

Next we're going to add a callback route and save the token.