<commit_before>## Aside: Authenticate a React App with Auth0

We can protect our applications and APIs so that only authenticated users can access them. Let's explore how to do this with a React application using [Auth0](https://auth0.com).

![Auth0 login screen](https://cdn.auth0.com/blog/resources/auth0-centralized-login.jpg)

We'll need an [Auth0](https://auth0.com) account to manage authentication. [To sign up for a free account, we can follow this link](https://auth0.com/signup). Next, let's set up an Auth0 application and API so Auth0 can interface with a React App.

### Setting Up an Auth0 Application

1. Let's go to our [**Auth0 Dashboard**](https://manage.auth0.com/#/) and click the "[create a new application](https://manage.auth0.com/#/applications/create)" button.
2. Let's call our app as "React Demo" and select "Single Page Web Applications".
3. In the **Settings** for our new Auth0 application, let's add `http://localhost:3000/callback` to the **Allowed Callback URLs**.
4. If desired, we can [set up some social connections](https://manage.auth0.com/#/connections/social). We can then enable them for our app in the **Application** options under the **Connections** tab. The example shown in the screenshot above utilizes username/password database, Facebook, Google, and Twitter. For production, make sure to set up the correct social keys and do not leave social connections set to use Auth0 dev keys.

### Set Up an API

1. Go to [**APIs**](https://manage.auth0.com/#/apis) in your Auth0 dashboard and click on the "Create API" button. Enter a name for the API. Set the **Identifier** to your API endpoint URL. In this example, this is `http://localhost:3001/api/`. 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. We'll implement our Node API in this fashion, using [Express](https://expressjs.com/), [express-jwt](https://github.com/auth0/express-jwt), and [jwks-rsa](https://github.com/auth0/node-jwks-rsa).

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

### Dependencies and Setup

There are only two dependencies that we really need to install: [`auth0.js`](https://github.com/auth0/auth0.js) and [`history`](https://github.com/ReactTraining/history). To do that, let's issue `npm install --save auth0-js history` in the project root.

> **Note:** As we want the best security available, we are going to rely on the [Auth0 login page](https://auth0.com/docs/hosted-pages/login). This method consists of redirecting users to a login page hosted by Auth0 that is easily customizable right from the [Dashboard](https://manage.auth0.com/).

After installing it, we can create an authentication service to interface with the `auth0.js` script. Let's call this service `Auth` and create it in the `src/Auth/` directory with the following code:

```js
import history from '../history';
import auth0 from 'auth0-js';

export default class Auth {
  auth0 = new auth0.WebAuth({
    // the following three lines MUST be updated
    domain: 'bkrebs.auth0.com',
    audience: 'https://bkrebs.auth0.com/userinfo',
    clientID: '3co4Cdt3h3x8En7Cj0s7Zg5FxhKOjeeK',
    redirectUri: 'http://localhost:3000/callback',
    responseType: 'token',
    scope: 'openid'
  });

  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
  }

  handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken) {
        this.setSession(authResult);
        history.replace('/home');
      } else if (err) {
        history.replace('/home');
        console.log(err);
      }
    });
  }

  setSession(authResult) {
    // Set the time that the access token will expire at
    let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('expires_at', expiresAt);
    // navigate to the home route
    history.replace('/home');
  }

  login() {
    this.auth0.authorize();
  }

  logout() {
    // Clear access token and expiration from local storage
    localStorage.removeItem('access_token');
    localStorage.removeItem('expires_at');
    // navigate to the home route
    history.replace('/home');
  }

  isAuthenticated() {
    // Check whether the current time is past the
    // access token's expiry time
    let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }
}
```

The `Auth` service just created contains functions to deal with various steps of the sign in/sign up process. The following list briefly summarizes these functions and their descriptions:

- `handleAuthentication`: looks for the result of the authentication in the URL hash. Then, process the result with the `parseHash` method from `auth0-js`;
- `setSession`: sets the user's access token and the access token's expiry time;
- `login`: initiates the login process, redirecting users to the login page;
- `logout`: removes the user's tokens and expiry time from browser storage;
- `isAuthenticated`: checks whether the expiry time for the user's access token has passed;

Besides these functions, the class contains a field called `auth0` that is initialized with values extracted from the Auth0 application. Let's keep in mind that we need to update them accordingly before proceeding.

Attentive readers probably noticed that the `Auth` service also imports a module called `history` that we haven't talked about. We can define this module in only two lines, but let's define it in a file to provide reusability. Let's call this file `./src/history/history.js` and add the following code:

```js
import createHistory from 'history/createBrowserHistory'

export default createHistory()
```

After creating both elements, we can refactor our `App` component to make use of the `Auth` service.

```jsx
import React, { Component } from 'react';
import { Navbar, Button } from 'react-bootstrap';
import './App.css';

class App extends Component {
  goTo(route) {
    this.props.history.replace(`/${route}`)
  }

  login() {
    this.props.auth.login();
  }

  logout() {
    this.props.auth.logout();
  }

  render() {
    const { isAuthenticated } = this.props.auth;

    // ... render the view
  }
}

export default App;
```

Note that we are passing this service through `props`. Therefore, when including the `App` component, we need to inject `Auth` into it: `<App auth={auth} />`.

Considering that we are using the Auth0 login page, our users are taken away from the application. However, after they authenticate, users automatically return to the callback URL that we set up previously (`http://localhost:3000/callback`). This means that we need to create a component responsible for this URL:

```jsx
import React, { Component } from 'react';
import loading from './loading.svg';

class Callback extends Component {
  render() {
    const style = //...

    return (
      <div style={style}>
        <img src={loading} alt="loading"/>
      </div>
    );
  }
}

export default Callback;
```

This component can just contain a loading indicator that keeps spinning while the application sets up a client-side session for the users. After the session is set up, we can redirect users to another route.

Please refer to [the official Quick Start Guide to see, step by step, how to properly secure a React application](https://auth0.com/docs/quickstart/spa/react/01-login). Besides the steps shown in this section, the guide also shows:

- [How to manage profile information of authenticated users](https://auth0.com/docs/quickstart/spa/react/02-user-profile)
- [How to properly call an API](https://auth0.com/docs/quickstart/spa/react/03-calling-an-api)
- [How to control which routes users can see/interact with](https://auth0.com/docs/quickstart/spa/react/04-authorization)
- [How to deal with expiry time of users' access token](https://auth0.com/docs/quickstart/spa/react/05-token-renewal)<commit_msg>updating React aside<commit_after>## Aside: Securing React Apps with Auth0

As you will learn in this section, you can easily secure your React applications with Auth0, a global leader in Identity-as-a-Service (IDaaS) that provides thousands of enterprise customers with modern identity solutions. Alongside with the classic [username and password authentication process](https://auth0.com/docs/connections/database), Auth0 allows you to add features like [Social Login](https://auth0.com/learn/social-login/), [Multifactor Authentication](https://auth0.com/docs/multifactor-authentication), [Passwordless Login](https://auth0.com/passwordless), and [much more](https://auth0.com/docs/getting-started/overview) with just a few clicks.

To follow along the instruction describe here, you will need an Auth0 account. If you don't have one yet, now is a good time to <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a>.

### Setting Up an Auth0 Application

To represent your React application in your Auth0 account, you will need to create an [Auth0 Application](https://auth0.com/docs/applications). So, head to [the Applications section on your Auth0 dashboard](https://manage.auth0.com/#/applications) and proceed as follows:

1. click on the [_Create Application_](https://manage.auth0.com/#/applications/create) button;
2. then define a name to your new application (e.g., "React Demo");
3. then select _Single Page Web Applications_ as its type.
4. and hit the _Create_ button to end the process.

After creating your application, Auth0 will redirect you to its _Quick Start_ tab. From there, you will have to click on the _Settings_ tab to whitelist some URLs that Auth0 can call after the authentication process. This is a security measure implemented by Auth0 to avoid leaking of sensitive data (like [ID Tokens](https://auth0.com/docs/tokens/id-token)).

So, when you arrive at the _Settings_ tab, search for the _Allowed Callback URLs_ field and add `http://localhost:3000/callback` into it. For this tutorial, this single URL will suffice.

That's it! From the Auth0 perspective, you are good to go and can start securing your React application.

### Dependencies and Setup

To secure your React application with Auth0, there are only two dependencies that you will need to install: [`auth0.js`](https://github.com/auth0/auth0.js) and [`history`](https://github.com/ReactTraining/history). To install these dependencies, move into your project root and issue the following command:

```bash
npm install --save auth0-js history
```

> **Note:** As you want the best security available, you are going to rely on the [Auth0 login page](https://auth0.com/docs/hosted-pages/login). This method consists of redirecting users to a login page hosted by Auth0 that is easily customizable right from the [Dashboard](https://manage.auth0.com/). If you want to learn why this is the best approach, check [the _Universal vs Embedded Login_ article](https://auth0.com/docs/guides/login/universal-vs-embedded).

After installing `auth0-js` and `history`, you can create an authentication service to handle the process. You can call this service `Auth` and create it in the `src/Auth/` directory with the following code:

```js
import history from '../history';
import auth0 from 'auth0-js';

export default class Auth {
  constructor(props) {
    super(props);

    this.auth0 = new auth0.WebAuth({
      // the following three lines MUST be updated
      domain: '<AUTH0_DOMAIN>',
      audience: 'https://<AUTH0_DOMAIN>/userinfo',
      clientID: '<AUTH0_CLIENT_ID>',
      redirectUri: 'http://localhost:3000/callback',
      responseType: 'token id_token',
      scope: 'openid'
    });

    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.setSession = this.setSession.bind(this);
  }

  handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.idToken) {
        this.setSession(authResult);
        history.replace('/home');
      } else if (err) {
        history.replace('/home');
        console.log(err);
      }
    });
  }

  setSession(authResult) {
    this.idToken = authResult.idToken;
    // set the time that the id token will expire at
    this.expiresAt = authResult.expiresIn * 1000 + new Date().getTime();
    // navigate to the home route
    history.replace('/home');
  }

  login() {
    this.auth0.authorize();
  }

  logout() {
    // clear id token and expiration
    this.idToken = null;
    this.expiresAt = null;
    // navigate to the home route
    history.replace('/home');
  }

  isAuthenticated() {
    return new Date().getTime() < this.expiresAt;
  }
}
```

The `Auth` service that you just created contains functions to deal with different steps of the sign in/sign up process. The following list briefly summarizes these functions and what they do:

- `handleAuthentication`: This function looks for the result of the authentication process in the URL hash. Then, process the result with the `parseHash` method from `auth0-js`.
- `setSession`: This function sets the user's access token and the access token's expiry time.
- `login`: This function initiates the login process, redirecting users to the login page.
- `logout`: This function removes the user's tokens and expiry time from browser storage.
- `isAuthenticated`: This function checks whether the expiry time for the user's access token has passed.

Besides these functions, the class contains a field called `auth0` that is initialized with values extracted from your Auth0 application. It is important to keep in mind that you **have to** replace the `<AUTH0_DOMAIN>` and `<AUTH0_CLIENT_ID>` placeholders that you are passing to the `auth0` field.

Attentive readers will probably notice that the `Auth` service also imports a module called `history` that you defined yet. This module is actually pretty simple and you can define it in only two lines. You could also create it inside the `Auth` service, however, to provide reusability, you will create in a module of its own.

So, create a file called `./src/history.js` and add the following code to it:

```js
import createHistory from 'history/createBrowserHistory'

export default createHistory()
```

After creating the `createHistory` and the `Auth` services, you can refactor your `App` component to integrate everything together.

```jsx
import React, { Component } from 'react';
import history from '../history';
import './App.css';

class App extends Component {
  // ... constructor definition ...

  goTo(route) {
    history.replace(`/${route}`)
  }

  login() {
    this.props.auth.login();
  }

  logout() {
    this.props.auth.logout();
  }

  render() {
    const { isAuthenticated } = this.props.auth;

    // ... render the view
  }
}

export default App;
```

Note that you are passing the `Auth` service through `props` to `App`. As such, when including the `App` component, you need to inject `Auth` into it: `<App auth={auth} />`.

Considering that you are using the Auth0 login page, your users are taken away from the application. However, after they authenticate, users automatically return to the callback URL that you set up previously (i.e., `http://localhost:3000/callback`). This means that you need to create a component responsible for this URL.

So, create a new file called `Callback.js` inside the `src` directory and insert the following code into it:

```jsx
import React, { Component } from 'react';

class Callback extends Component {
  render() {
    return (
      <div>
        Loading user profile.
      </div>
    );
  }
}

export default Callback;
```

This component can just contain a loading indicator that keeps spinning while the application sets up a client-side session for the users. After the session is set up, your app redirects users to another route (in this case, to `/home`).

If you are interested in learning more, please, refer to [the official React Quick Start Guide](https://auth0.com/docs/quickstart/spa/react/01-login) to see, step by step, how to properly secure a React application. Besides the steps shown in this section, the guide also shows:

- [How to manage profile information of authenticated users](https://auth0.com/docs/quickstart/spa/react/02-user-profile).
- [How to properly call an API](https://auth0.com/docs/quickstart/spa/react/03-calling-an-api).
- [How to control which routes users can see/interact with](https://auth0.com/docs/quickstart/spa/react/04-authorization).
- [How to deal with expiry time of users' access token](https://auth0.com/docs/quickstart/spa/react/05-token-renewal).
{'fraction_non_alphanumeric': 0.10576754514112079, 'fraction_numerical': 0.010635189621924852, 'mean_word_length': 4.004093567251462, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, 'https://': 42, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1760205', 'n_tokens_mistral': 4887, 'n_tokens_neox': 4690, 'n_words': 1968}