<commit_before>## Add Authentication with Auth0

The [Auth0 hosted login page](/hosted-pages/login) is the easiest way to set up authentication in your application. We recommend using the Auth0 hosted login page for the best experience, best security and the fullest array of features.

::: note
You can also embed the Lock widget directly in your application. If you use this method, some features, such as single sign-on, will not be accessible. 
To learn how to embed the Lock widget in your application, follow the [Embedded Login sample](https://github.com/auth0-samples/auth0-react-samples/tree/embedded-login/01-Embedded-Login).
:::

<%= include('../../_includes/_login_preamble', { library: 'React' }) %>

## Create an Authentication Service

Create a reusable service to manage and coordinate user authentication. You can call the service's methods from your application. You can create an instance of the `WebAuth` object from the auth0.js library in the service.

::: note
You can name the service anything you want. In the examples below, the service is  `Auth` and the filename is `Auth.js`.
:::

Create a service and add an instance of the `auth0.WebAuth` object. Add a `login` method that calls the `authorize` method from auth0.js.

```js
// src/Auth/Auth.js

import auth0 from 'auth0-js';

export default class Auth {
  auth0 = new auth0.WebAuth({
    domain: '${account.namespace}',
    clientID: '${account.clientId}',
    redirectUri: 'http://localhost:3000',
    audience: 'https://${account.namespace}/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

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

::: panel Checkpoint
Try to import the `Auth` service from somewhere in your application. Call the `login` method from the service to see the login page.
For example:

```js
// App.js
import Auth from './Auth/Auth.js';

const auth = new Auth();
auth.login();
```

:::

![hosted login](/media/articles/web/hosted-login.png)

### Finish the Service

Add more methods to the `Auth` service to handle authentication in the app.

The example below shows the following methods:
* `handleAuthentication`: looks for the result of authentication in the URL hash. Then, the result is processed with the parseHash method from auth0.js
* `setSession`: sets the user's access token, ID token, and the access token's expiry time 
* `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

```js
// src/Auth/Auth.js

import history from '../history';

// ...
export default class Auth {
  // ...
  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 && authResult.idToken) {
        this.setSession(authResult);
        history.replace('/home');
      } else if (err) {
        history.replace('/home');<commit_msg>Minor correction<commit_after>## Add Authentication with Auth0

The [Auth0 hosted login page](/hosted-pages/login) is the easiest way to set up authentication in your application. We recommend using the Auth0 hosted login page for the best experience, best security and the fullest array of features.

::: note
You can also embed the Lock widget directly in your application. If you use this method, some features, such as single sign-on, will not be accessible. 
To learn how to embed the Lock widget in your application, follow the [Embedded Login sample](https://github.com/auth0-samples/auth0-react-samples/tree/embedded-login/01-Embedded-Login).
:::

<%= include('../../_includes/_login_preamble', { library: 'React' }) %>

## Create an Authentication Service

Create a reusable service to manage and coordinate user authentication. You can call the service's methods from your application. You can create an instance of the `WebAuth` object from the auth0.js library in the service.

::: note
You can name the service anything you want. In the examples below, the service is  `Auth` and the filename is `Auth.js`.
:::

Create a service and add an instance of the `auth0.WebAuth` object. Add a `login` method that calls the `authorize` method from auth0.js.

```js
// src/Auth/Auth.js

import auth0 from 'auth0-js';

export default class Auth {
  auth0 = new auth0.WebAuth({
    domain: '${account.namespace}',
    clientID: '${account.clientId}',
    redirectUri: 'http://localhost:3000',
    audience: 'https://${account.namespace}/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

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

::: panel Checkpoint
Try to import the `Auth` service from somewhere in your application. Call the `login` method from the service to see the login page.
For example:

```js
// App.js
import Auth from './Auth/Auth.js';

const auth = new Auth();
auth.login();
```

:::

![hosted login](/media/articles/web/hosted-login.png)

### Finish the Service

Add more methods to the `Auth` service to handle authentication in the app.

The example below shows the following methods:
* `handleAuthentication`: looks for the result of authentication in the URL hash. Then, the result is processed with the `parseHash` method from auth0.js
* `setSession`: sets the user's access token, ID token, and the access token's expiry time 
* `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

```js
// src/Auth/Auth.js

import history from '../history';

// ...
export default class Auth {
  // ...
  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 && authResult.idToken) {
        this.setSession(authResult);
        history.replace('/home');
      } else if (err) {
        history.replace('/home');
{'fraction_non_alphanumeric': 0.11383399209486166, 'fraction_numerical': 0.0066403162055335965, 'mean_word_length': 3.926791277258567, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6718883', 'n_tokens_mistral': 1829, 'n_tokens_neox': 1774, 'n_words': 706}