Quickstart

A quick dive into getting started with Lore

Step 3: Add Login Page

In this step we're going to display a login experience.

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

Create the Login Page

First, create a Login component that we can use to initiate the login experience:

lore generate component Login

This component will be responsible for redirecting the user to the Auth0 website to login. Update your Login component to look like this:

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import Auth0 from 'auth0-js';
import ShowLoadingScreen from './ShowLoadingScreen';

export default createReactClass({
  displayName: 'Login',

  componentDidMount() {
    const auth0 = new Auth0.WebAuth(lore.config.auth0);
    auth0.authorize();
  },

  render() {
    return (
      <ShowLoadingScreen/>
    );
  }

});

import React from 'react';
import PropTypes from 'prop-types';
import Auth0 from 'auth0-js';
import ShowLoadingScreen from './ShowLoadingScreen';

class Login extends React.Component {

  componentDidMount() {
    const auth0 = new Auth0.WebAuth(lore.config.auth0);
    auth0.authorize();
  }

  render() {
    return (
      <ShowLoadingScreen/>
    );
  }

}

export default Login;

import React from 'react';
import PropTypes from 'prop-types';
import Auth0 from 'auth0-js';
import ShowLoadingScreen from './ShowLoadingScreen';

class Login extends React.Component {

  componentDidMount() {
    const auth0 = new Auth0.WebAuth(lore.config.auth0);
    auth0.authorize();
  }

  render() {
    return (
      <ShowLoadingScreen/>
    );
  }

}

export default Login;

When this component is mounted, we extract the auth0 config object from lore.config.auth0 and pass it to the Auth0.WebAuth() constructor, which will automatically redirect the user to Auth0 when we call auth0.authorize().

Create the Login Route

Now that our Login component exists, let's create the corresponding route to display it. Open routes.js, import your Login component, and update the routes to look like this:

...
import Login from './src/components/Login';

export default (
  <Route>
    <Route path="/login" component={Login} />

    <Route component={UserIsAuthenticated(Master)}>
      <Route path="/" component={Layout}>
        <IndexRoute component={Feed} />
      </Route>
    </Route>
  </Route>
);

Log in as one of the Characters

With the routing done, let's test out our Login component. Navigate to /login and you should see a login dialog displayed on screen. While you can't create a new account, you can login as any of the characters below:

ayla
crono
frog
lucca
magus
marle
robo

The email format is {name}@example.com, and the password for all of them is password. So if you wanted to login as marle, you would enter marle@example.com for the email and password for the password.

Authorize App Screen

If you see a screen like the one below, that asks you to authorize the application, click the green checkbox to proceed.

In a real production application, you wouldn't see this screen, but Auth0 does not allow the consent dialog to be skipped when an application is redirecting to localhost.

Redirect Error after Login

After you login, you'll be taken back to the application, where you'll see the loading screen, but it will never go away. If you look at the developer console, you'll see an error that looks like this:

Warning: [react-router]
Location "/auth/callback ... did not match any routes

This occurs because Auth0 tried to redirect us back to http://localhost:3000/auth/callback, but that route doesn't exist yet. We'll create it soon, but for now, navigate back to the homepage at http://localhost:3000.

Visual Check-in

If everything went well, your application should now look like this when you navigate to the /login route:

Code Changes

Below is a list of files modified during this step.

src/components/Login.js

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import Auth0 from 'auth0-js';
import ShowLoadingScreen from './ShowLoadingScreen';

export default createReactClass({
  displayName: 'Login',

  componentDidMount() {
    const auth0 = new Auth0.WebAuth(lore.config.auth0);
    auth0.authorize();
  },

  render() {
    return (
      <ShowLoadingScreen/>
    );
  }

});

import React from 'react';
import PropTypes from 'prop-types';
import Auth0 from 'auth0-js';
import ShowLoadingScreen from './ShowLoadingScreen';

class Login extends React.Component {

  componentDidMount() {
    const auth0 = new Auth0.WebAuth(lore.config.auth0);
    auth0.authorize();
  }

  render() {
    return (
      <ShowLoadingScreen/>
    );
  }

}

export default Login;

import React from 'react';
import PropTypes from 'prop-types';
import Auth0 from 'auth0-js';
import ShowLoadingScreen from './ShowLoadingScreen';

class Login extends React.Component {

  componentDidMount() {
    const auth0 = new Auth0.WebAuth(lore.config.auth0);
    auth0.authorize();
  }

  render() {
    return (
      <ShowLoadingScreen/>
    );
  }

}

export default Login;

routes.js

import React from 'react';
import { Route, IndexRoute, Redirect } from 'react-router';

/**
 * Wrapping the Master component with this decorator provides an easy way
 * to redirect the user to a login experience if we don't know who they are.
 */
import UserIsAuthenticated from './src/decorators/UserIsAuthenticated';

/**
 * Routes are used to declare your view hierarchy
 * See: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md
 */
import Master from './src/components/Master';
import Layout from './src/components/Layout';
import Feed from './src/components/Feed';
import Login from './src/components/Login';

export default (
  <Route>
    <Route path="/login" component={Login} />

    <Route component={UserIsAuthenticated(Master)}>
      <Route path="/" component={Layout}>
        <IndexRoute component={Feed} />
      </Route>
    </Route>
  </Route>
);

Next Steps

Next we're going to redirect the user to login page if they aren't logged in.