raphael-do-vale

Raphael has more than two decades of experience in developing enterprise systems including coding, project planning, architecture, and specification. His technology stack includes Java, Spring, Python, Relational Databases, JavaScript, DevOps, and Artificial Intelligence. He has a PhD and Master's degree in the Semantic Web, winning awards during his studies. He also worked with Description Logic, Prolog, RDF, and OWL tech.

Raphael do Vale

This tutorial demonstrates how to implement asynchronous authorization in a LangGraph application using Auth0 and the CIBA flow for secure, human-in-the-loop actions

Implementing Asynchronous Human-in-the-Loop Authorization in Python with LangGraph and Auth0

matt-raible

Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. 

Developer Advocate

Matt Raible

This tutorial shows you how to build a microservices architecture with Spring Boot and Spring Cloud.

Java Microservices with Spring Boot and Spring Cloud

This tutorial explains what micro frontends are and how you can use them with Java microservices.

Micro Frontends for Java Microservices

I stream, blog, and make youtube videos about tech stuff. I love coding, I love AI, and I love building stuff!

Staff Developer Advocate

Juan Cruz Martinez

Learn how to use the Auth0 Python SDK to query and store user data in this step-by-step tutorial.

The **Auth0 Dashboard** offers a wide range of tools for managing your application's authentication and authorization. You can create and delete users, assign roles, ban IPs, and much more. Although it's convenient to manage users directly from the dashboard, there may be scenarios where you need control from within your application.

Say, for example, that you want to store UI preferences such as dark/light mode settings or the user’s preferred theme directly on the user’s profile so that, independently from which device they connect to your application, they will have their favorite settings ready.

In scenarios like this, where your application directly processes and manages users' information, you can use the [Auth0 Management API](https://auth0.com/docs/api/management/v2), which allows you to work with users' data and programmatically access most features available in the Auth0 Dashboard.

In this article, we’ll explore how to use the Auth0 Management API from Python applications using the Auth0 Python SDK to read and store information about users, and at the end, we’ll build a lottery system to pull a random lucky user from the system.

## Accessing the Auth0 Management API

The Auth0 Management API allows you to programmatically create, access, update, and delete resources from your Auth0 tenant. It is an API built for back-end servers or trusted parties to perform administrative tasks such as user management or DevOps.

You can access the [Auth0 Management API](https://auth0.com/docs/api/management/v2) via HTTP requests directly or use one of the SDKs we provide for such a purpose. In any scenario, you’ll need a few things before starting the management API.

- **Auth0 account.** If you don’t have one already, you can <a href="https://a0.to/blog_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>.
- **A machine-to-machine application**
- **A short-lived token** for production access to the API

### Set up your Auth0 account

Once you have an <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">Auth0 account</a> you can navigate the the [Auth0 Dashboard](https://manage.auth0.com/#/applications) and access your applications list.

![Auth0 application's dashboard](https://images.ctfassets.net/23aumh6u8s0i/3QEFGVXK0EW2UlGNfaU8jK/bebbcfa41f716523f000c45b6ba863a0/auth0-ma-create-app.png)

Once on the page, click on the “Create Application” button on the top right and enter the following information:

- **Name**: A descriptive name for your application, e.g., User Management App
- **Application Type:** Because we’ll be connecting to this Auth0 application from another system, e.g., your Python application, you need to select “Machine to Machine Applications.”

Then click on “Create”.

![Creating a machine to machine application](https://images.ctfassets.net/23aumh6u8s0i/6F51sEhfGP6lOGXmldL8s7/c274315a617ae8f42c5278e61e91aa41/auth0-ma-create-app-details.png)

In the following dialog, you’ll select which API you’ll authorize this application to access. In our case, you’ll choose the **Auth0 Management API** already available in your tenant. Before authorizing the API, Auth0 will list all the permissions associated with it. There are many available. For our use case, you'll authorize the following: `read:users`, `update:users`, `read:users_app_metadata`, and `update:users_app_metadata`. Finally, click on “Authorize”.

![Assigning permissions to an API](https://images.ctfassets.net/23aumh6u8s0i/6eWpQ9QUTcOT9gT2gb5Do0/b4605872f7de2186401c747f044cd21e/auth0-ma-authorize-api.png)

> You can update your application’s permissions at any point from the Auth0 dashboard.

### Get a Test Token from the Auth0 Dashboard

Now you are ready to test your Auth0 Management API. Visit the API entry on the [Auth0 Dashboard](https://manage.auth0.com/#/apis).

![Auth0 API dashboard](https://images.ctfassets.net/23aumh6u8s0i/4ap0GxPP1WrjfaueqzfovG/150363bf27096f8bda6997aa5f49ced2/auth0-ma-apis.png)

Once there, click on the Auth0 Management API and head on to the “Test” tab. After a few seconds, you’ll see a screen like the following:

![Getting API Access Token from the Auth0 dashboard](https://images.ctfassets.net/23aumh6u8s0i/5HJDsh75FgjFB5fbfFhSLN/38ed227a790b4be7632ecaaa32c0af9e/auth0-ma-api-test.png)

Before continuing, ensure you have the correct application selected on the drop-down; next, you can copy your `access_token` from the UI. Make sure to copy just the value without the quotes. You’ll need this token next.

You can test your API directly on the [API documentation page](https://auth0.com/docs/api/management/v2). You can explore and test all the API endpoints there, though we’ll focus on the list [user’s endpoint](https://auth0.com/docs/api/management/v2#!/Users/get_users) for now.

![Auth0 Management API docs](https://images.ctfassets.net/23aumh6u8s0i/6tZBiNtrWUf8fmGeji8FUS/112e38d8ae05bf8376b402b9ccc04699/auth0-ma-list-users.png)

On the “List or Search Users” section, you’ll find the different parameters you can use to query users. For now, we’ll leave them all to the default values, and if you look to the right of the screen, you’ll find a button, “Test Endpoint”, at the end of the section.

The button is currently disabled as the documentation page is not authorized to make calls to the management API yet. To test endpoints on the documentation page, you'll need to provide an API Token using the "Set API Token" on the top right of the screen.

![Set API Token to make API calls](https://images.ctfassets.net/23aumh6u8s0i/6UO3HenV2TLVG6xTjVVFsF/24eaa6acff4b6728849588e434f7a202/auth0-ma-set-api-token.png)

Next, paste your access token from the Auth0 dashboard into the modal window and click “Set Token”. If you copied the token value correctly and tried the endpoint again, you should now see your list of users.

![Example response for the list users API endpoint](https://images.ctfassets.net/23aumh6u8s0i/5fse9EYIe0xXci2oPtxDXU/2980f08b1cdca89640fc4a0e6f787fa1/auth0-ma-list-users-list.png)

## How to Consume the Auth0 Management API with Python

To make your life easier when working with the Auth0 Management API, Auth0 offers a set of tools in multiple programming languages. In the case of Python, we have the [Auth0 Python SDK](https://github.com/auth0/auth0-python) that allows for easy and convenient access to all the features in the management API.

To consume the Auth0 Management API with Python, we will use the Auth0 Python SDK. To install it, run the following command:

```bash
pip install auth0-python
```

After installing the library, you must get a short-lived access token and initialize it programmatically. You’ll need information about your Auth0 tenant domain and the machine-to-machine application you created before. You’ll need the “Client Id” and the “Client Secret”, which can be found on the [Auth0 Dashboard](https://manage.auth0.com/#/applications) under your application’s settings.

![Domain, Client Id, and Client Secret are available in the app settings](https://images.ctfassets.net/23aumh6u8s0i/72vTRKfXxiFPXNIxTAGZkb/9be57cda028c928c9091d00c638c2d00/auth0-ma-app-settings.png)

Once you can access these values, you set the Auth0 SDK with the following code:

```python
from auth0.authentication import GetToken
from auth0.management import Auth0

domain = 'mydomain.auth0.com'
client_id = 'myclientid'
client_secret = 'myclientsecret'

get_token = GetToken(domain, client_id, client_secret=client_secret)
token = get_token.client_credentials('https://{}/api/v2/'.format(domain))
mgmt_api_token = token['access_token']
auth0 = Auth0(domain, token['access_token'])

auth0 = Auth0(domain, mgmt_api_token)
```

And finally, if you, for example, want to list your users, you can run:

```python
users = auth0.users.list()
print(users)

# Example Output
{
    "start": 0,
    "limit": 25,
    "length": 25,
    "users": [
        {
            "created_at": "2023-07-14T11: 01: 09.493Z",
            "email": "###.#####@###.com",
            "email_verified": False,
            "identities": [
                {
                    "connection": "Username-Password-Authentication",
                    "provider": "auth0",
                    "user_id": "64b12af5c157759fdf791d4d",
                    "isSocial": False
                }
            ],
            "name": "###.#####@###.com",
            "nickname": "###.#####",
            "picture": "https: //s.gravatar.com/avatar/.........png",
            "updated_at": "2023-07-14T11:01:09.493Z",
            "user_id": "auth0|64b12af5c157759fdf791d4d",
            "last_login": "2023-07-14T11:01:09.491Z",
            "last_ip": "2a01:c23:c480:7900:6c:a31c:9c46:f435",
            "logins_count": 1
        },
        ...
    ],
    "total": 40
}
```

## Updating Users’ Profile Information

Auth0's user profiles store basic information about each user, including a unique identifier, name, contact details, and identifying information such as their profile picture. This information is helpful during the authentication process, but you may also require additional information as the user logs in, such as:

- User preferences, such as the application’s theme or color scheme, etc.
- Flags that the user opt-in in the application, such as notification preferences, getting started tutorial completion, etc.
- Others, such as the last read announcement, subscription status, and more.

Auth0's user profiles can store such information as metadata, which your app can access once the user logs in successfully. Although your app could store this information in its own storage system, utilizing Auth0's user profile metadata offers the advantage of immediate availability during and after the login process.

A significant benefit of using metadata is that it is associated with the user's account rather than tied to a specific device. This ensures that if a user switches between the mobile and web versions of your app, their settings and preferences based on metadata will remain consistent across both versions.

Auth0 supports two types of users’ metadata:

- **User metadata:** refers to information the user can see and update, such as user preferences and settings
- **App metadata:** refers to information about the user that is only accessible by the application, for example, feature flags, last read announcement, and more.

Let’s now write a Python script to update the user’s name and metadata to store their preferred theme and an application flag enabling extra features on the user’s account.

```python
# As we did before, we need to get an instance of the Auth0 client
from auth0.authentication import GetToken
from auth0.management import Auth0

domain = 'mydomain.auth0.com'
client_id = 'myclientid'
client_secret = 'myclientsecret'

get_token = GetToken(domain, client_id, client_secret=client_secret)
token = get_token.client_credentials('https://{}/api/v2/'.format(domain))
mgmt_api_token = token['access_token']
auth0 = Auth0(domain, token['access_token'])

auth0 = Auth0(domain, mgmt_api_token)

# Next, we can proceed to update the user's name using the user's id
user_id = '{YOUR_USER_ID}'
auth0.users.update(user_id, {
    'name': 'My name is...'
})

# We can also update the user's metadata
auth0.users.update(user_id, {
    'user_metadata': {
    'theme': 'light'
  },
  'app_metadata': {
    'experimental_features': True
  }
})

# Let's add some more information to see what the end result is
auth0.users.update(user_id, {
    'user_metadata': {
    'font_size': '16px'
  },
  'app_metadata': {
    'notifications': False
  }
})

# Query the user information
user_info = auth0.users.get(user_id)
print(user_info)

# Output
{
    "created_at": "2023-07-14T09:22:19.151Z",
    "email": "###.#####@###.com",
    "email_verified": False,
    "identities": [
        {
            "connection": "Username-Password-Authentication",
            "user_id": "64b113cb6a989b51063087ce",
            "provider": "auth0",
            "isSocial": False
        }
    ],
    "name": "My name is...",
    "nickname": "###.#####",
    "picture": "https://s.gravatar.com/avatar/...",
    "updated_at": "2023-07-14T11:29:53.139Z",
    "user_id": "auth0|64b113cb6a989b51063087ce",
    "user_metadata": {
        "theme": "light",
        "font_size": "16px"
    },
    "app_metadata": {
        "experimental_features": True,
        "notifications": False
    }
}
```

Note that when calling the `update` method, we don’t need to send all the information about the user, but only those fields we would like to change. This makes working with data really simple, as we don’t need to worry about overriding critical fields. Even on the `user_metadata` and `app_metadata` fields, we don’t need to send the full JSON we want to store but rather the individual key-value pairs, Auth0 will automatically merge the existing values with the new ones.

We can also access the user information from the [user’s entry in the Auth0 Dashboard](https://manage.auth0.com/#/users).

![Viewing user's profile and metadata information in the Auth0 dashboard](https://images.ctfassets.net/23aumh6u8s0i/12wH1mxn2Od5hcOQ7SwOTG/d8f45e0725c7eaeeab916bf94a6b9723/auth0-ma-list-user-data.png)

## Query Users

Whether you are building a user dashboard, gathering some statistics, or needing your users’ information to process in your application, the Auth0 Management API and the Auth0 Python SDK allow you to access the information you need and how you need it.

Previously we used the method `users.list` to retrieve a list of all users in the Auth0 database, which may be all that you need. However, that method offers advanced query functions worth knowing and exploring.

First, let’s start with paginating results. By default, paging is disabled. However, you can quickly specify the page and the number of items per page you want to retrieve with these two parameters:

- **page**: Page index of the results to return. The first page is 0.
- **per_page**: Number of results per page.

Here is an example querying the second page of users, up to ten users per page

```python
users = auth0.users.list(page=1, per_page=10)
```

Another common parameter in usage is sorting operations. For this purpose, the SDK exposes the `sort` parameter to specify the field and direction. For example:

```python
users = auth0.users.list(sort="name:1")
```

Use `field:order` where the order is `1` for ascending and `-1` for descending.

Lastly, one of the most powerful functions is the ability to perform complex queries, for example, getting all the users whose names start with `J` or even filtering by custom metadata, listing all the users that prefer the dark mode theme. Auth0 uses [Lucene query string syntax](http://www.lucenetutorial.com/lucene-query-syntax.html) for those complex queries, though there are some limitations, as some query types cannot be used on metadata fields, for details see [Searchable Fields](https://auth0.com/docs/users/search/v3/query-syntax#searchable-fields).

Example 1: List all users whose name starts with `J`

```python
users = auth0.users.list(search_engine='v3', q='name:j*')
```

Example 2: List all users that prefer dark mode

```python
users = auth0.users.list(search_engine='v3', q='user_metadata.theme:dark')
```

You can also mix multiple search criteria, for example:

```python
users = auth0.users.list(search_engine='v3', q='name=j* AND user_metadata.theme:dark')
```

To learn more about how to form queries, check the [Lucene query string syntax](http://www.lucenetutorial.com/lucene-query-syntax.html).

## Selecting a Random User

For the events we attended this year, we created a fun game using Python, Flask, and Auth0 to give some fabulous prizes away to lucky contestants. The game was pretty simple. It consisted of people signing up for our application at events like PyCon. During the day, users registered to the game using the Auth0 Universal Login page. Then, when it was time to give prizes away, we would use the same Flask application to withdraw a lucky winner. The winner would then get a special award from Auth0.

To select the lucky winner, we built a special page using the `users.list` method. There was a caveat: the same user couldn’t win twice. The way we solved it was by using `app_metadata` to store information about the users who had already won and then using Lucene syntax to filter them out when pulling for a new winner.

Though not critical for our situation, we wanted the script to be efficient and thus not pull the whole user’s database, as it could be quite extensive, so instead, we first pulled the API to know how many users were in total with a minimum query, and then we accessed a random user from the pull and extracted only that user’s information.

```python
import random

# List only 1 user just to retrieve the total number of users that match the given query
user_count = auth0.users.list(per_page=1, include_fields=False, search_engine='v3', q='NOT app_metadata.winner:true')["total"]

# Then, use the same trick of listing one user per page to get a random page between 0 and the total number of users
# That resulting user is our lucky winner
winner_user = auth0.users.list(page=random.randint(0, user_count - 1), per_page=1, include_fields=False, search_engine='v3', q='NOT app_metadata.winner:true')['users'][0]

# Before we do anything else with the results, update the user's metadata to reflect them as winner
auth0.users.update(winner_user.get('user_id'), {
    "app_metadata": {
        "winner": True
    }
})
```

## Summary

Today you learned about the Auth0 Management API and how to work with it from the documentation as well as from any Python application. You also learned how to work with user information, user, and app metadata, and how to query users from the Auth0 database using simple and more complex queries.

Thanks for reading!

Use the Auth0 Python SDK for Querying and Storing Users’ Data

This tutorial will guide you in building a React application protected by Auth0 following a tests-first approach.

Testing your React application is important to ensure your code works as intended. But what if you're using Auth0 to protect your application?

In this blog post, you'll learn to follow TDD (Test-Driven Development) to protect a React application with Auth0. We'll go over what you need to do to set up your tests and provide some tips on how to get the most out of them.

So if you're ready to learn how to unit test your Auth0-protected React app, read on!

## Why Should You Use Auth0 to Protect Your React Application?

Auth0 is an identity and access management service that helps you protect your application by providing user authentication, authorization, and security.

Auth0 eliminates needing to be an expert on identity protocols such as [OAuth 2.0](https://auth0.com/docs/protocols/protocol-oauth2) or [OpenID Connect](https://auth0.com/docs/protocols/openid-connect-protocol) and helps you secure your web application stack. With Auth0, integrating authentication and authorization with your app is a breeze - users are redirected to a [customizable login page](https://auth0.com/docs/authenticate/login/auth0-universal-login) when they want to log in. Once successful authentication occurs, [JWTs](https://auth0.com/docs/tokens/concepts/jwts) containing user information is sent back for verification.

Since Auth0 handles all of the authentication and authorization processes on the back end, you don't have to worry about coding your own login system. This makes it much easier to unit test your protected application as well.

## Bootstrap a React Application

Before the actual testing, you'll need to bootstrap a React application. To do this, you'll use Create React App. This tool is great for quickly getting a React development environment up and running.

To get started, open a terminal window and run:

```bash
npx create-react-app react-auth0-tdd
```

While NPM does its thing, you can start with the next step.

## Connect React with Auth0

The best part of using Auth0  is the ease of use. All you have to do to secure your application is follow these steps:

### Sign up and create an Auth0 application

If you haven't already, <a href="https://a0.to/blog_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>.

A free account offers you the following:

- 7,000 free active users and unlimited logins.
- [Auth0 Universal Login](https://auth0.com/universal-login) for Web, iOS & Android.
- Up to 2 [social identity providers](https://auth0.com/docs/identityproviders) like Google, GitHub, and Twitter.
- Unlimited [Serverless Rules](https://auth0.com/docs/rules/current) to customize and extend Auth0's capabilities.

During the sign-up process, you create something called an [Auth0 Tenant](https://auth0.com/docs/getting-started/the-basics#account-and-tenants), an isolated environment representing the product or service to which you are adding authentication.

After that, you need to create an Auth0 application.

Go to the Applications tab in your [Auth0 Management Dashboard](https://manage.auth0.com/) and click the "Create Application" button. Select "Single Page Web Applications" as the type of application you want to create.

### Configure your application

Once you create the application, go to its Settings tab. You'll need to configure three URLs in there:

- **Allowed Callback URLs**: The URL of your React app that users will be sent after they authenticate. This is typically `http://localhost:3000/` for local development. 
- **Allowed Logout URLs**: The URL where users will be redirected after they log out. This is usually `http://localhost:3000` for local development.
- **Allowed Web Origins**:  If you don't register your application URL in this field, your application will be unable to silently refresh the authentication tokens, and your users will be logged out the next time they visit the application or refresh the page. For development, you'd typically add `http://localhost:3000`

Once you save these settings, you can move on to the next step.

### Install the Auth0 React SDK

Now, we're ready to install the Auth0 React SDK. To do this, open a terminal window, navigate to your project directory, and run:

```bash
npm install @auth0/auth0-react
``` 

Now you're all set to start writing your application's code and tests.

## Using TDD to Build Your Application

Test-driven development (TDD) is a powerful and popular methodology for building software. It's based on the idea that you should write tests first, then write code to ensure those tests pass. This process helps developers create better code by designing test cases up front and streamlining the coding process.

In this section, you'll use TDD to build a simple application that uses Auth0 to authenticate and display information about a user.

You'll start by checking the UI renders a "Log In" button, so head to your `App.test.js` file and replace it with the following code:

```javascript
// src/App.test.js

import { render, screen } from '@testing-library/react';
import App from './App';

test('When the app starts it renders a log in button', () => {
  render(<App />);
  const loginElement = screen.getByText("Log In");
  expect(loginElement).toBeInTheDocument();
});
```

Next, you'll run the tests using the following command:

```bash
npm run test
```

And it should be no surprise if the test fails; after all, you haven't implemented the "Log In" button yet. But no worries, you'll do that next.

Replace the file `App.js` with the following content:

```javascript
// src/App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <button>
          Log In
        </button>
      </header>
    </div>
  );
}

export default App;
```

With the button implemented, you can re-run the tests. This time the result should be `1 passed, 1 total`.

But the "Log In" button isn't doing anything yet. Let's make sure it works by using Auth0.

Head back to your `App.test.js` and replace the file with the new contents:

```javascript
// src/App.test.js

import { render, screen, waitFor } from "@testing-library/react";
import App from './App';

import { useAuth0 } from "@auth0/auth0-react";

jest.mock("@auth0/auth0-react");

describe("The Application Component in logged out state", () => {

  beforeEach(() => {
    useAuth0.mockReturnValue({
      loginWithRedirect: jest.fn(),
    });
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  test('When the app starts it renders a log in button', () => {
    render(<App />);
    const loginElement = screen.getByText("Log In");
    expect(loginElement).toBeInTheDocument();
  });

  test('It redirects the user to the Auth0 Universal Login page when the Log In button is pressed', async () => {
    const { loginWithRedirect } = useAuth0();

    render(<App />);
    const loginElement = screen.getByText("Log In");
    loginElement.click();

    // Expect that if we click the "Log In" button, the loginWithRedirect function gets called
    await waitFor(() => expect(loginWithRedirect).toHaveBeenCalledTimes(1));
  });
});
```

This time we added a new test "It redirects the user to the Auth0 Universal Login page when the Log In button is pressed", which validates that the function `loginWithRedirect` from the Auth0 React SDK is called at least one time after pressing the "Log In" button.

In this code snippet, we introduced a few new concepts; I recommend the following read if you want to familiarize yourself with [jest and mocking functions](https://jestjs.io/docs/mock-functions).

As it is required by `jest`, we had to first mock the Auth0 API using `mockReturnValue` at the beginning of each test suite.

Now if you run the test, you'll receive:

```text
The Application Component in logged out state
    ✓ When the app starts, it renders a log-in button (15 ms)
    ✕ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (1015 ms)

  ● The Application Component in logged out state › It redirects the user to the Auth0 Universal Login page when the Log In button is pressed

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0
```

Which is exactly what we expected. Next, you'll make that "Log In" button work.

## Implementing Login with Auth0

Under the hood, the Auth0 React SDK uses [React Context](https://reactjs.org/docs/context.html) to manage the authentication state of your users. One way to integrate Auth0 with your React app is to wrap your root component with an Auth0Provider that you can import from the SDK.

Head to your `index.js` file and update its content as the following:

```javascript
// src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Auth0Provider } from "@auth0/auth0-react"; // 👈 New code

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 👇 New code */}
    <Auth0Provider
      domain="{auth0-domain}"
      clientId="{auth0-clientid}"
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
    {/* 👆 New code */}
      <App />
    {/* 👇 New code */}
    </Auth0Provider>
    {/* 👆 New code */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

The `Auth0Provider` requires you to provide the domain for your Auth0 tenant and the clientId for your Auth0 application. Both values are present in your [Auth0 Application's Dashboard](https://manage.auth0.com/#/applications), as shown below:

![You can retrieve the Auth0 domain and client id from the application's settings](https://images.ctfassets.net/23aumh6u8s0i/3y36XLQcKi70jWZBbROCBj/a4d6e4584cc7d29159893f9a7c56e51b/react-tdd-config.png)

After setting those two values in the code, all we have to do is to change the "Log In" button to enable the `onClick` event.

```javascript
// src/App.js

// 👇 New code
import { useAuth0 } from "@auth0/auth0-react";
// 👆 New code
import './App.css';

function App() {
  // 👇 New code
  const { loginWithRedirect } = useAuth0();
  // 👆 New code

  return (
    <div className="App">
      <header className="App-header">
        {/* 👇 Updated code */}
        <button onClick={() => loginWithRedirect()}>
        {/* 👆 Updated code */}
          Log In
        </button>
      </header>
    </div>
  );
}

export default App;
```

Now if you run your tests once more, you'll see both of them passing.

```text
 PASS  src/App.test.js
  The Application Component in logged out state
    ✓ When the app starts, it renders a log in button (11 ms)
    ✓ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (4 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
```

## Displaying the User’s Profile

So far, we have been able to test the application while in a logged-out state, but how would we go about testing the application after the user signs in, for example, to test if the user name is displayed correctly on the screen?

The simple answer is to continue mocking the `useAuth0` hook, altering the different properties we need for our test.

Let's start by writing a new test to validate if the "Log Out" button is present after the user signs in. Change the content of your `App.test.js` file by adding the following code:

```javascript
// src/App.test.js

...
// 👇 New code
describe("The Application Component in logged in state", () => {
  beforeEach(() => {
    useAuth0.mockReturnValue({
      isAuthenticated: true,
    });
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  test('When the app starts it renders a log out button', () => {
    render(<App />);
    const logoutElement = screen.getByText("Log Out");
    expect(logoutElement).toBeInTheDocument();
  });
});
// 👆 New code
```

Running the tests will now fail until we add the new "Log Out" button to the screen.

```javascript
// src/App.js

import { useAuth0 } from "@auth0/auth0-react";
import './App.css';

function App() {
  const { loginWithRedirect, logout, isAuthenticated } = useAuth0(); // 👈 Updated code

  return (
    <div className="App">
      <header className="App-header">
        {/* 👇 Updated code */}
        {isAuthenticated ? (
          <button onClick={() => logout()}>
            Log Out
          </button>
        ) : (
          <button onClick={() => loginWithRedirect()}>
            Log In
          </button>
        )}
        {/* 👆 Updated code */}
      </header>
    </div>
  );
}

export default App;
```

And when you check the tests again, all of them are passing.

```text
 PASS  src/App.test.js
  The Application Component in logged out state
    ✓ When the app starts, it renders a log in button (11 ms)
    ✓ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (4 ms)
  The Application Component is logged in the state
    ✓ When the app starts, it renders a log-out button (1 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
```

Finally, we'll validate that the user's name and email address are shown on the screen.

```javascript
// src/App.test.js

...
  beforeEach(() => {
    useAuth0.mockReturnValue({
      isAuthenticated: true,
      // 👇 New code
      user: {
        name: "Juan",
        email: "jc@example.com",
        picture: "https://avatar.com",
      },
      // 👆 New code
    });
  });
  
  ...

  test('When the app starts it renders a log out button', () => {
    render(<App />);
    const logoutElement = screen.getByText("Log Out");
    expect(logoutElement).toBeInTheDocument();
  });

  // 👇 New code
  test('It renders the user name and email address', () => {
    render(<App />);
    const userNameElement = screen.getByTestId("user-name");
    expect(userNameElement).toHaveTextContent('Juan');

    const userEmailElement = screen.getByTestId("user-email");
    expect(userEmailElement).toHaveTextContent('jc@example.com');
  });
  // 👆 New code
});
```

For the logged-in state, not only do we need to mock the authentication status with the `isAuthenticated` flag, but we also need to set the user information.

Once that's done, we can fix the UI to display such values and get the test passing.

```javascript
// src/App.js

import { useAuth0 } from "@auth0/auth0-react";
import './App.css';

function App() {
  const { loginWithRedirect, logout, isAuthenticated, user } = useAuth0(); // 👈 Updated Code

  return (
    <div className="App">
      <header className="App-header">
        {isAuthenticated ? (
          // 👇 Updated code
          <div>
            <h2>User:</h2>
            <p data-testid="user-name">{user.name}</p>
            <h2>Email:</h2>
            <p data-testid="user-email">{user.email}</p>
            <button onClick={() => logout()}>
              Log Out
            </button>
          </div>
          // 👆 Updated code
        ) : (
          <button onClick={() => loginWithRedirect()}>
            Log In
          </button>
        )}
      </header>
    </div>
  );
}

export default App;
```

Now the application displays the user name and email as well as the logged-out button.

Let's run the tests and see the final results.

```text
 PASS  src/App.test.js
  The Application Component in logged out state
    ✓ When the app starts, it renders a log in button (12 ms)
    ✓ It redirects the user to the Auth0 Universal Login page when the Log In button is pressed (4 ms)
  The Application Component is logged in the state
    ✓ It renders a log-out button (2 ms)
    ✓ It renders the user name and email address (3 ms)

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
```

Congrats! But before you leave this tutorial, there's another more thing you'll have to do, and that is user testing.

So far, all tests you run on the application are unit tests. Even though they are great for validating functionality, they don't verify that the integrations are working or set up correctly. For example, we mocked the Auth0 API to return the data we would expect if everything was fine. Still, we don't validate if the given Auth0 Domain or Client ID is correct or if the configuration on the Auth0 dashboard is appropriately set.

For that, you can write integration tests or perform manual tests by running the application on the browser.

To test your application manually, go to your terminal and start the app by running the following:

```bash
npm run start
```

Visit `http://localhost:3000`, click the login button, and sign up for a new test user if you don't have one. After you're done, you'll be redirected back to the application where your name is displayed.

| ![Application's start page](https://images.ctfassets.net/23aumh6u8s0i/1ueiE6uYH8ig9Vs6EJ0HVd/5a5f5598a90b091c68ced31c0c163cfe/react-tdd-1.png)|![Auth0 Universal Login Screen](https://images.ctfassets.net/23aumh6u8s0i/7h6l4mzkJvj4SMgIPxqq8J/12ee1f571be10baf746ba5404e0232d2/react-tdd-2.png) | ![Application's user information screen](https://images.ctfassets.net/23aumh6u8s0i/1ZUiCCpbIYKAtsKapLnSB5/9a623efc3daa63d0018be195808a5b7e/react-tdd-3.png) |
| --- | --- | --- | 

## Conclusion

In this tutorial, you have implemented user authentication to identify your users and get user profile information in React following the TDD process to ensure that our code is well-tested.

This tutorial covered the most common authentication use case for a React application, and to keep it simple, we took some shortcuts, like working off a single component.

If you want to learn more about the possibilities of Auth0 with React, please check the [React Authentication by Example Guide](https://developer.auth0.com/resources/guides/spa/react/basic-authentication).

Let me know in the comments below what you think of this tutorial.

Thanks for reading!

Unit Testing Your Auth0 Protected React Application

joey devilla headshot 900px

I’m a Senior Developer Advocate at Auth0, and I like to work on various technologies. I’ve developed software for all sorts of platforms, from CD-ROM and the PalmPilot to my current area of focus, mobile phones, IoT devices, and AI. When I’m not looking for strange new platforms to write software for, I’m playing a strange old instrument — the accordion!

Senior Developer Advocate

Joey deVilla

A step-by-step tutorial on using Auth0 and Kotlin to implement basic login/logout in Android apps

Get Started with Android Authentication Using Kotlin

A step-by-step tutorial on using Auth0 and Swift to implement login/logout and use user metadata in iOS apps.

Get Started with iOS Authentication using Swift and UIKit

Majid Hajian

I am a Google Developer Expert and Media Developer Expert and a passionate software developer with years of developing and architecting complex web and mobile applications. my passions are Flutter, PWA, and performance. I love sharing my knowledge with the community by writing and speaking, contributing to open source, and organizing meetups and events.

Google Developer Expert

In this tutorial, you’ll learn how to enhance your Flutter apps by enabling authentication, supporting federated identity providers, adding authorization by introducing roles and permissions, all leveraging Auth0.

In the exercise from the previous section, you added Auth0 authentication to an existing Flutter app. This added a username/password authentication flow to the app. You also gave the app the ability to request and submit refresh tokens, which enhance the user experience by not requiring the user to authenticate every time they use the app.

This section will expand on the app by examining some useful Auth0 features:

* Refresh token rotation
* Social logins
* Managing your Auth0 account

> **Look for the 🛠 emoji if you’d like to skim through the content while focusing on the build and execution steps.**


## Add Refresh Token Rotation

When the app makes an authentication request to Auth0’s authentication server, it includes the `offline_access` scope. This causes the authentication server to issue a refresh token, which the app can use to re-authenticate without requiring the user to log in again. The app stores this token in the device’s secure storage.

While this enhances the app’s user experience, it also introduces risk. The refresh token is long-lived, and the app could use it as a “lifetime pass” to endlessly request new access tokens and keep the user logged in forever.

I highly recommend taking advantage of *Refresh Token Rotation* and *Automatic Reuse Detection* to help mitigate this risk. With these features enabled, each refresh token can be used only once. When the app exchanges its refresh token for a new access token, the authentication server also returns a new refresh token and invalidates the old one. 

Let’s enable these features!

🛠 Navigate to the **Applications** section of your Auth0 dashboard, select the **MJ Coffee** application, and then select its **Settings** tab. Scroll down the page to the **Refresh Token Rotation** section and turn on the **Rotation** and **Absolute Expiration** options:

![Turn on the “Rotation” and “Absolute Expiration” options.](https://images.ctfassets.net/23aumh6u8s0i/6EizPZZnkGjxoAOle1Q8eL/e06c99f4a49413572736bbf0f470436c/rotation_and_absolute_expiration.png)

It is recommended that you issue a refresh token that expires after a preset lifetime. The refresh token’s lifetime can be extended each time one is used to get a new access token or access token/refresh token pair.

There are two options for token lifetimes, and they can be set independently of each other:

- **Absolute Lifetime:** Enabling **Absolute Expiration** sets a specified *absolute lifetime* for the application’s refresh tokens. Refresh tokens can be exchanged for new access tokens during this lifetime. Once the token’s age goes past its lifetime, the user will need to re-authenticate in order to get a new access token. If **Absolute Expiration** is disabled, the refresh token has an indefinite absolute lifetime.
- **Inactivity Lifetime:** Enabling **Inactivity Expiration** specified *inactivity lifetime* for the application’s refresh tokens. Refresh tokens can be exchanged for new access tokens if the user is active in the application during this lifetime. If the user is inactive in the application for a period longer than the inactivity lifetime, they will need to re-authenticate in order to get a new access token.

🛠 Scroll to the bottom of the page and click the **Save Changes** button:

![The “Save Changes” button. The user is directed to click it.](https://images.ctfassets.net/23aumh6u8s0i/7KsLW4adJ6PNIPAI12al4g/f2c0e8abf6d7377595cfb7df11493e67/save_changes.png)


## Social Logins

These days, it's pretty common to have login methods beyond the standard username/password combination. These include logging in with social media account, which will significantly enhance your users’ experiences.

Implementing these additional login methods and adding them to your authorization server is time-consuming and will come with many considerations and risks. 

Luckily, Auth0 provides lots of integration with well-known third parties’ authentication systems, and even allows you to write your custom connections. Let's add connections to both Google’s and Apple’s authentication systems.


### Create a Google/Gmail social connection

🛠 In the Auth0 dashboard, select **Authentication** in the left column menu, then select **Social**. This takes you to the **Social Connections** page, where you should click the **Create Social Connection** button:

![The steps to create a new social connection in Auth0](https://images.ctfassets.net/23aumh6u8s0i/61w1eXrbY7bGOpNo6ODbaU/da810c63bacd28cabf71e6dee4baa349/create_social_connection.png)

You will be taken to the **New Social Connection** page, which has a list of social login providers that integrate with Auth0. 

🛠 Select **Google**:

![Selecting Google from all the available social connections](https://images.ctfassets.net/23aumh6u8s0i/2YdUxIkwmCTcc9QFlo584q/22f7fd0bf4bc1c93c4ebc555e21009f8/select_google.png)

You will now be on the  **New Google / Gmail Social Connection** page, which tells you what kind of user information is accessed by Google social login.

🛠 Click **Continue**:

![Initial page for creating a new Google/Gmail social connection](https://images.ctfassets.net/23aumh6u8s0i/2SQwtF0vqtXJucnGbE3DNS/baf5bd9d7103a6ecbd59b879bbe2aaf4/click_continue.png)

A new page with a number of fields will appear; this is the connection’s **Settings** tab. 

As long as you’re working in a development environment, you only need to fill the **Name** field (which provides a name for this connection) and leave all the other fields empty. You can always use the default value in the **Name** field:

![New Google/Gmail social connection](https://images.ctfassets.net/23aumh6u8s0i/7Jzsn4ryILOOdACN2urlSo/fdaa205ef09352c0b9aba0acbd592977/new_google_gmail_social_connection.png)

However, production apps require you to provide a **Client ID** and **Client Secret** ([doc](https://auth0.com/docs/connections/social/google)) and specify the **Allowed Mobile Client IDs**. These topics will be covered in another video or article.

🛠 Create the Google/Gmail connection by scrolling to the bottom of the page and clicking **Create**:

![Creating the Google/Gmail connection](https://images.ctfassets.net/23aumh6u8s0i/4S8AJUaj4xehVwVxhNDt5X/69eb88b8bec557d310d0e9d678fe9b7e/click_create.png)

This will create the connection, and you’ll be taken to its **Applications** tab. You’ll see a list of your applications, which will allow you to enable the Google/Gmail connection for any of them. Enable the connection for the *MJ Coffee* application:

![The Google/OAuth2 applications tab](https://images.ctfassets.net/23aumh6u8s0i/681u1RRcha4ABJJ5GRZivy/c7eea90ca4e19ec5ab3b333caa47e5ba/google-oauth2_applications_tab.png)

You may also set more permissions that the end-user will need to approve during authorization. These permissions depend on your application and what you want to do on behalf of the user. The *MJ Coffee* app doesn’t need any extra permissions beyond the basic and extended profile.

![Google Permission](https://images.ctfassets.net/23aumh6u8s0i/13CvLX8tQUTuqU6jpZ6K94/a0eaac13b8fc83fc11b3ca3f6651ebd9/google_permissions.png)

🛠 Make sure you sync user profile attributes at each login and hit the **Save** button.


### Create an Apple ID social connection

🛠 Once again in the Auth0 dashboard, select **Authentication** in the left column menu, then select **Social**. This takes you to the **Social Connections** page, where you should click the **Create Social Connection** button:

![The steps to create a new social connection in Auth0](https://images.ctfassets.net/23aumh6u8s0i/1sohaZxDHuq8X8ZvT5nhvE/d2b7a7e2647708327f8fc6971ddb43a9/create_connection.png)

🛠 This time, select **Apple**:

![Selecting Apple from all the available social connections](https://images.ctfassets.net/23aumh6u8s0i/3JAgbtDSNOsfYrjxkE1wCI/e51d80f7418706c29cd6e9dc06b93719/select_apple.png)

You will now be on the  **New Apple Social Connection** page, which tells you what kind of user information is accessed by Apple social login.

🛠 Click **Continue**:

![Continue](https://images.ctfassets.net/23aumh6u8s0i/3zt2ntLwoHwp6bldLmOOsD/8db3e7f5c057d5782c7202b748013420/click_connect_-_apple.png)

As long as you’re working in a development environment, you can leave the **Client ID** and **Client Secret Signing Key** fields empty. You *will* need proper keys for those fields when the app goes to production; [this document covers that topic in more detail](https://auth0.com/docs/connections/apple-siwa/set-up-apple).

The **Apple Team ID** and **Key ID** values are required:

![Google Permission](https://images.ctfassets.net/23aumh6u8s0i/2qNvT5zkxB1TY06ywkH5Re/7c46fa1399743de9e7bb05d1d804fab0/apple_dev.png)

* To get your Apple Team ID, you need an Apple Developer Account.
* To get a Key ID for your app, you need to register that app using your Apple Developer Account. 

🛠 Sign in to your Apple Developer Account, and go to the **Membership** page and make a note of your Team ID.

🛠 If you have a registered app, you can skip the following steps and jump to the list of tasks for creating a service ID. Otherwise, follow the steps below:

- In the Apple Developer Portal, go to **Certificates, IDs, & Profiles > Identifiers** and click the blue “plus” icon next to **Identifiers** to create a new App ID.
- Choose **App IDs** as the identifier type and click **Continue**.
- Provide a description and a Bundle ID in reverse-domain name format (e.g.: `com.mydomain.mjcoffee`).
- Scroll down and check **Sign In with Apple**.
- Click **Continue**, and then click **Register**.

🛠 Once the app is registered, it’s time to create a service ID:

- Return to the **Certificates, IDs, & Profiles** section, and click the blue “plus” icon next to **Identifiers**.
- Choose **Service IDs** and select **Continue**. Fill in the description and identifier (e.g.: `com.mydomain.mjcoffee`).
- After checking **Sign In with Apple**, select **Configure**, and define your Web Domain (e.g.: `com.mydomain.mjcoffee`) and your "Return URL". Ensure that your Return URL is your Auth0 domain and that it follows this format: `https://YOUR_AUTH0_DOMAIN/login/callback`.

![Return URL apple sign in](https://images.ctfassets.net/23aumh6u8s0i/5Wetff0Tutv55UXsYz0gKq/ab19cd3e48604aea314410d22d194982/callback_apple.png)

🛠 Finally: save, continue and then register the service.


#### Set up your Client Secret Signing Key

🛠 Follow these steps:

- Go to **Keys**, which is located in the **Certificates, Identifiers, & Profiles** section of your Apple developer dashboard.
- Select the blue “plus” icon to add a new key.
- Enter a **Key Name** and check the **Sign In with Apple** option.
- Select **Configure** to make sure the **Choose a Primary App ID** field is filled with the correct App ID.
- Select **Save, Continue**, and then **Register**.
- On the page to which you're redirected after registering, make a note of the Key ID. Then download the key; it will have a `.p8` filename extension.

🛠 Go back to your Apple social connection settings and paste the Key ID. Ensure the proper attributes are selected (Name, Email) and sync user profile at each login is enabled. Hit **Save**.


## Enable Social Connections

🛠 Once you have created all your social connections and set them up correctly, go back to your applications. Go to the **Connections** tab and enable your newly-made social connections:

![app social connections](https://images.ctfassets.net/23aumh6u8s0i/59SCRbiX055qDcmTSNwPVl/fa175f974ceb43515893f24f7747d549/app_social_connections.png)

As you can see, adding and removing social connections for your apps is now as simple and flicking a switch.

On the Flutter side, I have good news: you don’t need to implement anything there! 

Restart the app, log out, then try to log in. You’ll see this:

![app social connections](https://images.ctfassets.net/23aumh6u8s0i/4b6BIaeZ8EHcN1a3MYVOrF/91c9039cf0d56051c99397d1a7524a3e/social_buttons_flutter.png)

That's it! The login screen will now display social login buttons, and their login flows will be ready to use.


## Branding 

While it’s fine to use the default branding in development, you want the login page to be customized to your “look and feel” once the app’s in production.

Auth0 allows you to customize your login page through a number of options. You can change the look and feel of the login page by adding colors and logos, and you can customize the user notification part of the process as well: email templates, text messages, and so on. It’s all in the **Branding** section of the Auth0 dashboard:

![Auth0 branding](https://images.ctfassets.net/23aumh6u8s0i/7oq6VzFQ3nSUcStZTXvjQu/38d1e272f3bef751d9feaca704d580dc/branding.png)


### Add Roles

You may want to provide certain functionalities to the user based on their roles. This is easy with proper authorization server such as Auth0, which facilitates adding roles and specifying what users in each role are allowed to do. 

In the MJ Coffee app, there are three different roles:

- **Admin:** These are administrators, and they will have access to all the app’s functionality with full permissions.
- **Customer:** This is the default role for registered or logged-in users. They are limited to the app’s customer-facing features. You will automatically assign this role to all users upon registration or login, and you will learn how to do so later on in this tutorial.
- **Employee:** These are coffee shop employees. They can access the community screen to answer customer requests in the support chat, as well as other employee-facing features.

![Auth0 roles](https://images.ctfassets.net/23aumh6u8s0i/7nVdiU86TPCF1tLXrBg6ID/54a078bfe7d2382a6776c26adfc5cba4/roles.png)

You can add more roles to the app as the need arises.


## User Management in Auth0

Auth0 provides the infrastructure to store users and their information on its cloud database.

For the *MJ Coffee* app, Auth0’s cloud database is sufficient. One of Auth0’s goals is to reduce the cost of extra infrastructure maintenance and cost.

You can access users by selecting **User Management** in the left column menu of the Auth0 dashboard. The **Users** page allows you to create new users and manage your existing ones by changing their details, adding permissions and roles, or revoking their access.

![Auth0 users](https://images.ctfassets.net/23aumh6u8s0i/3O0JDGBqXHmPfrKaEavP2D/260c804cf50a308e696ecd9a446ab4a9/users.png)

When you open a user, you’ll see that Auth0 provides in-depth details about that user, including basic account data, metadata, their devices, and their history, which might be pretty helpful for debugging the application or investigating a particular user’s access activity, permissions, and roles.

![Auth0 user roles](https://images.ctfassets.net/23aumh6u8s0i/JcGTMspZ9hKtu9RAi4Oq9/257a692aa9a65cd12e96f645b56aafd1/user_roles.png)

Each user account stores some basic information about the user: name, email address, the date and time when the account was created, and so on. 

Additional information can be attached to a user by adding to these metadata stores:  their user metadata, which is a key-value structure for storing information about the user. You can also store information in the user_metadata or manipulating `app_metadata`, which helps to provide more information to the Flutter application while receiving user details.


## Moving Forward

In the next section of this tutorial, you will learn how to add real-time chat to the app.


Flutter Authentication and Authorization with Auth0, Part 2: Refresh Tokens, Social Logins, and More

Flutter Authentication and Authorization with Auth0, Part 1: Adding Authentication to an App

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

Learn how to build client-side Web apps using Blazor and how to secure them with Auth0.

What is Blazor? A Tutorial on Building Web Apps with Authentication

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to use TypeScript and Auth0 to secure a feature-complete Express.js API. Tutorial on how to use Auth0 to implement authorization in Express.

Node.js and TypeScript Tutorial: Secure an Express API

This tutorial shows you how to create a slick-looking, full-stack, secure application using React, Spring Boot, and JHipster.

Full Stack Java with React, Spring Boot, and JHipster

This tutorial shows you how to add authentication to your Angular App with Auth0

AngularJS 1.0 was released in October 2010. At the time, it was considered one of the most revolutionary and popular web frameworks ever to see the light of day. Developers loved it, and created many apps with it. However, as a pioneer in the JS framework space, AngularJS had some growing pains and significant issues. The team went back to the drawing board for a major breaking release with Angular 2. It took two years to develop and influenced many devs to hop onto other frameworks in the meantime.

Today, five years after Angular 2 was released, we just call it “Angular” and its version numbers have far less meaning. Five years is a long time for a modern JS web framework to live and thrive. If you look at the number of Stack Overflow questions, you’ll see that users struggle with React far more than Angular.

![hotframeworks.com](https://images.ctfassets.net/23aumh6u8s0i/59q6jcF1y3liZ2s5dHjFZ1/ff4258bdeac2cad19506a693b21c7e46/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

I kid, I kid. 😅

I don’t think Stack Overflow tags indicate that developers have a hard time with the framework; I think they indicate a thriving community. The more people use technology, the more they submit questions for it.

[hotframeworks.com](https://hotframeworks.com/) lists a score that combines GitHub stars with Stack Overflow tags and says the top six web frameworks are as follows (at the time of this writing):

1. React
2. ASP.NET MVC
3. Angular
4. Ruby on Rails
5. AngularJS
6. Vue.js

Angular is still very popular among developers. If you’re developing an Angular app today, you probably need a way to authenticate your users. That’s where OpenID Connect (OIDC) can help you. OIDC is a layer on top of OAuth 2.0 that provides identity.

In this tutorial, I'll show you how to add OIDC authentication with Auth0 to a new Angular app in just a few steps.

### Prerequisites:

* A favorite text editor or IDE. I recommend [IntelliJ IDEA](https://www.jetbrains.com/idea/), but I know many JavaScript developers prefer [Visual Studio Code](https://code.visualstudio.com/).
* [Node.js](http://nodejs.org/) v14+ and npm installed.

If you would rather follow along by watching a video, check out the screencast below from [the OktaDev YouTube channel](https://youtu.be/YiR7XFgsD8w).

<AmpContent>
<amp-youtube
    data-videoid="YiR7XFgsD8w"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/YiR7XFgsD8w' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

## Create an Angular App

First, you’ll need to create a new Angular app with routing enabled. Install the Angular CLI globally, then create an app.

```shell
npm i -g @angular/cli@13
ng new auth0-demo --routing
```

You’ll be prompted to select your favorite stylesheet format. The selection you make doesn’t matter for this example since we’re focused on functionality rather than updating visuals.

## Add Authentication with OpenID Connect

To add authentication with Auth0, you’ll first need a [free Auth0 account](https://a0.to/blog_signup). Install the [Auth0 CLI](https://github.com/auth0/auth0-cli#installation) and run `auth0 login` to register your account. Then, run `auth0 apps create`. Use the name `auth0-demo` and specify a description of your choosing. Select Single Page Web Application and use `http://localhost:4200/home` for the Callback URL. Specify `http://localhost:4200` for the rest of the URLs. We’re using 4200 as the port here because that’s the default for local Angular development.

![Auth0 Apps Create](https://images.ctfassets.net/23aumh6u8s0i/6treCQmKthgFUfWwzf3AfL/79c7378cb41c2b7fcdc603f7787b493e/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

You can also use the Auth0 Console to create an OIDC app:

* [Log in](https://auth0.com/auth/login) to Auth0 or [create an account](https://a0.to/blog_signup) if you don’t have one. Go to **Applications** > **Create Application**.
* Choose **Single Page Web Applications** as the application type and click **Create**.
* Click **Angular**, then the **Settings** tab.
* Add `http://localhost:4200/home` as an Allowed Callback URL and `http://localhost:4200` as a Logout URL.
* Specify `http://localhost:4200` as an Allowed Origin and click **Save Changes** at the bottom.

Once you have a new Angular app and Auth0 OIDC set up, you can use [OktaDev Schematics](https://github.com/oktadev/schematics#angular--auth0) to add OAuth 2.0 and OIDC support to your Angular app. Be sure to execute this command in the folder for the app itself (`auth0-demo`) adjacent to `package.json`.

```shell
ng add @oktadev/schematics --auth0
```

The Auth0 CLI will prompt you for an issuer URL and client ID, which were displayed when setting up the app in Auth0. If you used the CLI, it would have shown the issuer URL right above the client ID.

```shell
=== dev-0ua1y-go.us.auth0.com application created

  CLIENT ID            TJgZxGnlSkqUe6JfMFSipZcFsbpl6LS2
```

This process will perform the following steps for you:

1. Install the [Auth0 Angular SDK](https://github.com/auth0/auth0-angular).
2. Add `src/app/auth-routing.module.ts` with your OIDC configuration and initialization logic.
3. Configure an `AuthHttpInterceptor` that adds an `Authorization` header with an access token to outbound requests.
4. Create a `HomeComponent` and configure it with authentication logic.
5. Update unit tests for `AppComponent` and `HomeComponent` to mock Auth0.

To see all the changes it makes to your files, see [this pull request on GitHub](https://github.com/oktadev/auth0-angular-example/pull/1/files). If you’re interested in learning more about Schematics, I recommend reading my [Use Angular Schematics to Simplify Your Life](https://developer.okta.com/blog/2019/02/13/angular-schematics) tutorial.

### Test your Angular authentication flow

Run `ng serve` in your app, and you should see a login button at `http://localhost:4200/home`.

![Auth0 Login button](https://images.ctfassets.net/23aumh6u8s0i/50ajbMEhMjKTlo8FFIrhcc/34ab5bd3e71ef2098232c1fa17094f7a/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

Click the **Login** button and sign in with one of the configured users for your Auth0 application. Because this is just a demo, you probably haven’t done that - more likely, you should sign up as a new user.

![Auth0 Login form](https://images.ctfassets.net/23aumh6u8s0i/4k6lvyaFm08105rMKbngMK/04946fb269344caaa466e995895816ee/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

After login, you’ll be redirected back to your app, and you’ll see a **Logout** button displayed in the bottom left corner.

![Auth0 Logout button](https://images.ctfassets.net/23aumh6u8s0i/4wmWthcAoznrbP7iP9qQ6T/38b2188e91decdbdd2a3046a57410369/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

### Display the authenticated user’s name

To display the authenticated user’s name, you can use the `user$` observable on the `AuthService` instance.

Modify `src/app/home/home.component.html` to display a welcome message to the user.

```html
<div>
  <button *ngIf="(auth.isAuthenticated$ | async) === false" (click)="login()" id="login">Login</button>
  <div *ngIf="auth.user$ | async as user">
    <h2>Welcome, {{user?.name}}!</h2>
  </div>
  <button *ngIf="auth.isAuthenticated$ | async" (click)="logout()" id="logout">Logout</button>
</div>
```

Refresh your app, and you should see your name displayed.

![Display user's name](https://images.ctfassets.net/23aumh6u8s0i/40JjOQXUidYCgMIWgDYSdT/b012e9c1c44d0397f89145dc00521053/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly)

If everything works—congrats!

## Learn more about Angular and OpenID Connect

I hope you enjoyed this quick tutorial on using Auth0 and OIDC for authentication in your Angular apps. If you’re looking for a more detailed step-by-step tutorial, please read [The Complete Guide to Angular User Authentication with Auth0](https://auth0.com/blog/complete-guide-to-angular-user-authentication/).

You can find the source code for the example on GitHub in the [@oktadev/auth0-angular-example](https://github.com/oktadev/auth0-angular-example) repository.

To learn more about Angular and OIDC, check out the following blog posts:

* [What You Need to Know about Angular v13](https://developer.okta.com/blog/2021/11/10/angular-v13)
* [The Things to Keep in Mind about Auth](https://developer.okta.com/blog/2021/10/29/things-to-keep-in-mind-about-auth)
* [A Quick Guide to Angular and GraphQL](https://developer.okta.com/blog/2021/10/22/angular-graphql)

<br>
<img src="https://images.ctfassets.net/23aumh6u8s0i/2FKsfPuzkEluf4MALzOoLT/969e1b0d6b58723b2bf263a8799c5cd6/Uploaded_from_Add_OpenID_Connect_to_Angular_Apps_Quickly" alt="The Angular Mini-Book" width="392" height="512">
<p align="center"><i><a href="https://www.infoq.com/minibooks/angular-mini-book/">The Angular Mini-Book</a></i></p>
<p align="left"></p>

I [just published a mini-book book on Angular](https://raibledesigns.com/rd/entry/the_angular_mini_book_1) that might interest you too. It's called [The Angular Mini-Book](https://www.infoq.com/minibooks/angular-mini-book/) and is available as a free download from InfoQ. The book is written tutorial-style and shows you how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication. You'll also learn how to integrate Angular with Spring Boot (a popular REST API framework) and use security best practices like HTTPS and a content security policy.

If you liked this tutorial, chances are you'll like others we publish. Please follow [Auth0](https://twitter.com/auth0) and [OktaDev](https://twitter.com/oktadev) on Twitter to get notified when we publish new developer tutorials.

Add OpenID Connect to Angular Apps Quickly

bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

Learn how to integrate your Android application with a backend API.

Android Tutorial: Building and Securing Your First App (Part 2)

Learn how to develop and secure Android applications with ease.

Android Tutorial: Building and Securing Your First App (Part 1)

fauna_author

Technology focused business professional with experience in Sales & BD, Solutions Architecture and Software Development. Armed with a top-tier MBA and extensive customer-facing experience, I combine technical and business expertise to converge business requirements with technology. 
<br>
My experience in the art of pre-sales is combined with practical hands-on expertise in software SDLC, cloud architecture, containers, networking, APIs and gateways. A trusted advisor, I have the proven capacity to win over the most technically discerning customers and build long lasting relationships.

Head of Solution Architecture at Fauna Inc.

Zee Khoo

In this tutorial, we’ll explore architecting REST APIs in a fully serverless manner by leveraging Fastly’s Compute@Edge, Fauna, and Auth0

Building an Edge API Gateway with Fauna and Securing It with Auth0

Learn how to build a CRUD Web API with ASP.NET through this practical tutorial.

Building ASP.NET CRUD Web APIs

anthony-herbert

Anthony makes tutorials on his <a target='_blank' rel='noopener noreferrer' href='https://www.youtube.com/c/prettyprintedtutorials'>YouTube channel Pretty Printed</a>. He focuses primarily on Python web development, but he has broad interest in programming of all forms. Outside of writing code, he enjoys strength training and travel.

Founder of Pretty Printed

Anthony Herbert

Learn how to create a Django public feed application, add authentication, and moderate posts.

Django Authentication Tutorial

Learn how to develop RESTful APIs with Node.js and Express while securing it with Auth0.

Node.js and Express Tutorial: Building and Securing RESTful APIs

tadej-slamic

With over a decade in the software industry, I've helped startups launch their first product, assisted FTSE100 enterprises with digital transformation, been a part of the fintech boom, and helped particle accelerators cool down. I enjoy architecting and creating scalable backends and crafting modern mobile, web, and desktop apps.

CTO at Shortcut AS

Tadej Slamic

Learn how to use Spring Boot, Java, and Auth0 to secure a feature-complete API. Learn how to use Auth0 to implement authorization in Spring Boot.

Spring Boot Authorization Tutorial: Secure an API (Java)

Flutter Authentication and Authorization with Auth0, Part 4: Roles and Permissions

Flutter Authentication and Authorization with Auth0, Part 3: Adding Real-Time Chat to the App

jekayinoluwa

I love to deal in the intersection of software, hardware, and human interaction. My strength lies in the seamless combination of my top skills - design, software development, and strategic management.

Software Developer & Technical Writer

Jekayinoluwa Olabemiwo

A tutorial to learn how to write unit tests and integration tests for REST APIs in AWS Chalice. Additionally, we will see how to measure test coverage.

Testing AWS Chalice Applications

fikayo-adepoju

Fikayo Adepoju is a Full-stack developer, technical writer and tech content creator proficient in Web and Mobile technologies and DevOps with over 10 years experience developing scalable distributed applications. With over 40 articles written for CircleCI, Twilio, Auth0 and The New Stack blogs and also on his personal Medium page, he loves to share his knowledge to as many developers as would benefit from it. You can also check out his video courses on <a href="https://www.udemy.com/user/fikayo-adepoju/">Udemy</a>.

Full-Stack Developer

Fikayo Adepoju

A tutorial on how to use the Svelte state management store to manage state in Svelte applications.

**TL;DR:** As a Front-end developer, one of the most crucial skills to possess is how to manage state in your applications. The ability to synchronize application state with data changes and manage shared state amongst different components is a strong requirement in building modern frontend applications. Several state management libraries have been developed with certain frameworks having a de-facto state management library that they naturally work well with (e.g., [Redux](https://redux.js.org/) for [Reactjs](https://reactjs.org/)).

In this tutorial, you will learn how to perform state management in [Svelte](https://svelte.dev/) applications using Svelte's built-in state management [Stores](https://svelte.dev/tutorial/writable-stores).

## What We'll Build

In this tutorial, you will be implementing state management in a shopping cart built with Svelte. You will begin with a pre-built e-commerce application that sells different types of wares. However, this application is not yet complete, as its shopping features for adding products to the cart and managing cart items have not been implemented. Using the Svelte store, you will be adding the following features to the application:

- Load the products from a central state store
- Add items to the shopping cart
- Display items added to the shopping cart
- Calculate the total price of items in the cart
- Increase and decrease the quantity of the items in the cart
- Remove items from the cart

## Prerequisites

There are a few requirements to follow along with this exercise:

- [Node.js](https://nodejs.org) installed on your system. You can visit the website and install a suitable version for your operating system [here](https://nodejs.org/).
- Basic knowledge of [Svelte](https://svelte.dev) and using [Svelte components](https://svelte.dev/tutorial/nested-components).

With all these in place, you can proceed with the exercise.

## Cloning the Demo E-commerce Project

To begin, you will clone the starting point for the project and run it. Run the following command to clone a copy of the e-commerce project unto your machine:

```bash
git clone --single-branch --branch base-project https://github.com/coderonfleek/svelte-store
```

Once you have the project on your system, go into the root of the project and install the dependencies with the following commands:

```bash
cd svelte-store
npm install
```

With all dependencies installed, you can then run the project using the following command:

```bash
npm run dev
```

This command will boot up a local development server at [`http://localhost:5000`](http://localhost:5000). Navigate to this address on your browser, and you will see the page displayed below:

!["Homepage - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/nwLSAkqqjS7tFnYJhSUB5/eb8586b16288ada93d2c56fbf3fb00a2/svelte_01.jpg)

At the moment, when you click `Add to Cart` on any of the products, the button does nothing. The source code for the homepage is located in the file `src/views/Home.svelte`. The products are currently loaded from a `products` array on the page using a `Product` component to display the products:

```html
<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-9 pt-5">
        <div
          class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-3"
        >
          {#each products as product}
          <Product {product} />
          {/each}
        </div>
      </div>
      <div class="col-md-3 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>
```

On the right column, a `Cart` component is used to display items that have been added to the cart and their respective quantities, which is also hard-coded into the component at the moment. The `Cart` component also consists of a `Checkout` button which will navigate to the full shopping cart details page shown below when clicked:

!["Cart details page - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/5sW3mmLvYraDwX9d71RZQY/0582cbbb68c9e9c1c697473e8779237e/svelte_02.jpg)

The cart details page source code can be found in `src/views/ShoppingCart.svelte`. It uses a `CartItem` component to display any item added to the cart with buttons to increase or decrease the quantity of the item in the cart or remove it completely. The `Cart` component is also displayed on the right column, just as it was on the homepage. At the moment, these buttons do nothing when clicked.

```html
<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-8 pt-5">
        {#each cart as product}
        <CartItem {product} />
        {/each}
      </div>
      <div class="col-md-4 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>
```

The cart items displayed on this page are loaded from a `cart` array and are currently hard-coded on the page. What's more, clicking any of the buttons does nothing at the moment. All components used in the application are contained in the `src/components` folder.

## Creating the State Management Store

To begin implementing the features listed in the above section, you will need to set up a central state management store in the application. Create a `store.js` file inside the `src` folder, then add the following code:

```js
import { writable, derived } from "svelte/store";

export const products = writable([
  {
    id: 1,
    name: "Chelsea Shoes",
    price: 200,
    shortdesc: "Best Drip in the Market",
    url: "images/chelsea-shoes.png"
  },
  {
    id: 2,
    name: "Kimono",
    price: 50,
    shortdesc: "Classy, Stylish, Dope",
    url: "images/kimono.png"
  },
  {
    id: 3,
    name: "Watch",
    price: 2500,
    shortdesc: "Elegance built in",
    url: "images/rolex.png"
  },
  {
    id: 4,
    name: "Wallet",
    price: 80,
    shortdesc: "Sleek, Trendy, Clean",
    url: "images/wallet.png"
  },
  {
    id: 5,
    name: "Lady Handbags",
    price: 230,
    shortdesc: "Fabulous, Exotic, Classy",
    url: "images/handbag.png"
  },
  {
    id: 6,
    name: "Casual Shirts",
    price: 30,
    shortdesc: "Neat, Sleek, Smart",
    url: "images/shirt.png"
  }
]);

export const cart = writable([]);
```

The store above contains two writable properties:

- The `products` property holds all products contained in the e-commerce application. In a production scenario, you would want to load products from a remote API.
- The `cart` property is an array that holds the items a user adds to their cart. This is empty by default.

These properties are all that is needed to implement the features listed above.

## Loading Products to the Home Page from the Store

The first task is to ensure that the products are loaded from the store instead of being hard-coded on the `Home.svelte` homepage. Locate `src/views/Home.svelte` and replace its content with the following code:

```js
<script>
  import Product from "../components/Product.svelte";
  import Cart from "../components/Cart.svelte";
  import { products } from "../store";
</script>

<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-9 pt-5">
        <div
          class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-3"
        >
          {#each $products as product}
            <Product {product} />
          {/each}
        </div>
      </div>
      <div class="col-md-3 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>
```

In the update above, the `products` variable has now been replaced with store property `products` that references the store to load the products. Now refresh your homepage, and you will not see any change, but you know that your products are now being loaded from the store.

## Adding Items to the Shopping Cart

The next task is to implement the functionality that allows users to click `Add to Cart` on a product on the homepage and see it added to the cart widget on the right column. As mentioned earlier, products displayed on the page are managed using a `Product` component. Locate this component at `src/components/Product.svelte` and replace its content with the following code:

```js
<script>
  import { cart } from "../store";
  export let product;

  let inCart = false;

  $: {
    $cart.forEach((item) => {
      if (item.id == product.id) {
        inCart = true;
      }
    });
  }

  function addToCart() {
    if (!inCart) {
      let updatedCart = [...$cart, { ...product, quantity: 1 }];

      cart.set(updatedCart);
    } else {
      alert("Item already added to Cart");
    }
  }
</script>

<main>
  <div class="col mb-4">
    <div class="card">
      <img src={product.url} class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">{product.name}</h5>
        <p class="card-text">
          ${product.price}
          <br />
          <small>
            {product.shortdesc}
          </small>
        </p>
        <button
          on:click={() => addToCart()}
          class="btn btn-primary"
          disabled={inCart}>{inCart ? "Added" : "Add to Cart"}</button
        >
      </div>
    </div>
  </div>
</main>
```

The updates to this file add two properties to the component:

- A reference to the `cart` property in the store
- The `inCart` checks if the product using this component has been added to the store or not

The `addToCart` function adds an item to the cart when the `Add to Cart` button is clicked by updating the `cart` property in the store with the new item. This function first checks if the product is already in the cart. If so, an alert is displayed indicating that the product has already been added. If not, the product is added to the cart.

The `inCart` property is also used in the template to disable the `Add to Cart` button if the product has already been added.

Next, the `Cart` component needs to display the products that have been added to the cart and also the total price. Locate the `src/components/Cart.svelte` file and replace its content with the following code:

```js
<script>
  import { link } from "svelte-spa-router";
  import { cart } from "../store";

  $: totalPrice = $cart.reduce((total, next) => {
    console.log($cart);
    return total + next.quantity * next.price;
  }, 0);
</script>

<main>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Your Cart</h5>
      {#if $cart.length == 0}
        <p>Your Cart is Empty</p>
      {/if}
    </div>
    <ul class="list-group list-group-flush">
      {#each $cart as item}
        <li
          class="list-group-item d-flex justify-content-between align-items-center"
        >
          {item.name}
          <span class="badge badge-primary badge-pill">{item.quantity}</span>
        </li>
      {/each}
      <li
        class="list-group-item d-flex justify-content-between align-items-center"
      >
        Price <b>${totalPrice}</b>
      </li>
    </ul>

    <div class="card-body">
      <a use:link href="/shop" class="btn btn-primary btn-block">Checkout</a>
    </div>
  </div>
</main>

```

The update to this file first replaces the hard-coded cart items with reference to that `cart` state in the store. A `totalPrice` property is also used to evaluate the total cost of all items currently added to the shopping cart. In the template, the length of `cart` is used to display a message to the user to add items to the shopping cart when the cart is empty.

Return to the browser and reload the homepage if it hasn't been reloaded. You will see the view below. Notice the new look of the cart widget on the right column:

!["Updated Cart - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/3OzDAoyWDYhkPpma41kAlK/34958e5b49a984b65df3857f763f9cc3/svelte_03.jpg)

Now click on `Add to Cart` to add at least 2 items to the cart and observe the cart widget update based on your selections like below:

!["Items selection - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/UyhS5wLpRtIr7zRjiOXsT/cacc42d088fe9417a084e78e76a8f3e7/svelte_04.jpg)

## Changing Items Quantity and Removing Items from the Cart

Notice how the default quantity of each product added to the cart is set to one (1)? This is because every count has to start from 1. In a proper shopping cart application, users should be allowed to increase the quantity of each selected item.

The next task is to add features for increasing and decreasing the number of cart items. You will also add the ability to completely remove an item from the cart.

From the shopping cart details page shown earlier, each cart item displayed with buttons to manage its quantity uses the `CartItem` component. Locate this component at `src/components/CartItem.svelte` and replace the code in it with the following:

```js
<script>
  import Product from "../components/Product.svelte";
  import { cart } from "../store";

  export let product;

  let itemQuantity = 0;

  $: {
    let get_product = $cart.filter((item) => item.id == product.id);

    itemQuantity = get_product[0].quantity;
  }

  function changeQuantity(action = "add") {
    if (action == "add") {
      product.quantity = product.quantity + 1;

      updateCart(product);
    } else {
      if (product.quantity > 1) {
        product.quantity = product.quantity - 1;
        updateCart(product);
      } else {
        //Remove the item

        removeItem(product);
      }
    }
  }

  function removeItem(product) {
    let removedItemCart = $cart.filter((cartItem) => {
      return cartItem.id != product.id;
    });

    cart.set(removedItemCart);
  }

  function updateCart(product) {

    let updatedCart = $cart.map((cartItem) => {
      if (cartItem.id == product.id) {
        return product;
      }

      return cartItem;
    });

    cart.set(updatedCart);
  }
</script>

<main>
  <div class="row cart-item-row">
    <div class="col-md-6">
      <Product {product} />
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-5">
          <button
            on:click={() => changeQuantity()}
            class="btn btn-primary btn-block">+</button
          >
        </div>
        <div class="col-md-2 text-center">{product.quantity}</div>
        <div class="col-md-5">
          <button
            on:click={() => changeQuantity("remove")}
            class="btn btn-warning btn-block">-</button
          >
        </div>
      </div>
      <div class="row cart-remove-button">
        <div class="col-md-12">
          <button on:click={() => removeItem()} class="btn btn-danger btn-block"
            >Remove Item</button
          >
        </div>
      </div>
    </div>
  </div>
</main>

<style scoped>
  .cart-item-row {
    border-bottom: 1px solid #ccc;
    margin-top: 20px;
  }
  .cart-remove-button {
    margin-top: 10px;
  }
</style>
```

This update adds two computed properties, `cart`, which is a reference to the `cart` state property in the store, and `itemQuantity`, which gets the current quantity of the item in the shopping cart.

Three methods are also added which do the following:

- `changeQuantity`: takes in an `action` argument that is either set to `add` or `decrease` to determine whether to increase or decrease the item quantity by 1. If the current quantity is 1 and the function is asked to decrease the item, the item would be removed completely.
- `removeItem`: completely removes an item from the shopping cart.
- `updateCart`: A utility function for reusing the update logic for `cart` in the store

Next, locate the shopping cart details page at `src/views/ShoppingCart.svelte` and replace its content with the following code:

```js
<script>
  import Cart from "../components/Cart.svelte";
  import CartItem from "../components/CartItem.svelte";

  import { cart } from "../store";
</script>

<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-8 pt-5">
        {#each $cart as product}
          <CartItem {product} />
        {/each}
      </div>
      <div class="col-md-4 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>

```

This update replaces the hard-coded cart items with reference to the `cart` property in the store.

## Running the Application

With these changes, your app should be reloaded once again. Add a few items to the shopping cart if the reload has reset the cart back to being empty, then click "Checkout" to go to the shopping cart details page. On this page, increment and decrement some of the items in the cart and try removing one of them by clicking "Remove". You will see the cart widget update accordingly on the right column like below:

!["Update Cart Items - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/7xFFbT1x3IfKUxCFT7IDvl/b42328e5782e261ffb3d1a454eba2a8c/svelte_05.jpg)

Perfect!

## Conclusion

In this tutorial, you have been able to implement state management in a Svelte application using a shopping cart demo application.

State management involves a design thinking process where you have to decide which state properties are global (reside in the store) and which state properties are to be localized to the respective components that make use of them. Knowing which state should be local and which state properties should reside in the central store will help you make good design decisions.

If any part of your demonstration is not working as expected, I advise you to go through the article once again to see if there is any step you may have missed. If you need additional help, feel free to reach out in the comments.

Happy coding :)

State Management in Svelte Applications

Learn how to use Spring and Java to build a feature-complete API. Learn how to use Spring Boot to create, read, update, delete, and validate data.

Spring Boot Tutorial: Build a CRUD API (Java)

Learn how to use TypeScript to build a feature-complete Express API. Tutorial on how to use TypeScript with Express to create, read, update, and delete data.

Node.js and TypeScript Tutorial: Build a CRUD API

5e074956ee8ba1fea26e30d28c190495?s=300 avatar

5e074956ee8ba1fea26e30d28c190495?s=300

Full stack developer creating content at Auth0. I love taking a deep dive into hard-to-understand concepts and creating content that makes them easier to grasp. In my free time you can usually find me reading, hanging out with my dogs, or curling in the squat rack.

Former Developer Content Manager

Holly Guevara

Learn how to use the Vue 3 Composition API to build a project idea generator.

Vue Composition API Tutorial: Build a Project Idea Generator

Learn how to build a Vue.js application from scratch and add authentication.

Beginner Vue.js Tutorial with User Login

A practical tutorial showing how to create Web Components using Stencil.

Creating Web Components with Stencil

Learn how to leverage Vue.js and Electron to build and secure modern desktop applications.

Electron Tutorial: Building Modern Desktop Apps with Vue.js

Learn how to leverage Ambassador to secure apps running in your Kubernetes clusters with TLS certificates for free.

Kubernetes Tutorial: Managing TLS Certificates with Ambassador

Learn about the basic Kubernetes concepts while deploying a sample application on a real cluster.

Kubernetes Tutorial - Step by Step Introduction to Basic Concepts

332d7898dae6bc56031ac3507a0248ba

I'm a full-stack developer with a passion for technology and code. I love writing tutorials for developers to showcase a particular technology whilst building something useful at the same time. Right now  I can mostly be found developing for the front-end, playing around with Docker, or tinkering with Unreal Engine and electronics!

Developer Experience Engineer

Steve Hobbs

Learn all about Cross-Origin Resource Sharing, how it protects you, and how to enable CORS in your applications



**TL;DR:** In this article, we'll take a look at CORS, the circumstances under which it is needed, the benefits it provides, and how to configure a Node + Express application to support CORS. If you wish, you can [grab the accompanying source code](https://github.com/auth0-blog/express-cors-demo) from GitHub!

---

Cross-Origin Resource Sharing (CORS) is a protocol that enables scripts running on a browser client to interact with resources from a different origin. This is useful because, thanks to the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) followed by `XMLHttpRequest` and `fetch`, JavaScript can only make calls to URLs that live on the same origin as the location where the script is running. For example, if a JavaScript app wishes to make an AJAX call to an API running on a different domain, it would be blocked from doing so thanks to the same-origin policy.

But why is this necessary, and how does it work?

<include src="TweetQuote" quoteText="Learn all about CORS, the difference between simple and preflighted requests, and how to add CORS support to an existing Node Express app!"/>

## CORS - Why Is It Needed?

Most of the time, a script running in the user's browser would only ever need to access resources on the same origin (think about API calls to the same backend that served the JavaScript code in the first place). So the fact that JavaScript can't normally access resources on other origins is a good thing for security.

In this context, "other origins" means the URL being accessed differs from the location that the JavaScript is running from, by having:

- a different scheme (HTTP or HTTPS)
- a different domain
- a different port

However, there are legitimate scenarios where cross-origin access is desirable or even necessary. For example, if you're running a React SPA that makes calls to an API backend running on a different domain. [Web fonts also rely on CORS to work](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements).

<include src="ebook-ads/Oauth2OidcGuide" />

## Identifying a CORS Response

When a server has been configured correctly to allow cross-origin resource sharing, some special headers will be included. Their presence can be used to determine that a request supports CORS. Web browsers can use these headers to determine whether or not an `XMLHttpRequest` call should continue or fail.

There are [a few headers that can be set](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#The_HTTP_response_headers), but the primary one that determines who can access a resource is [`Access-Control-Allow-Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin). This header specifies which origins can access the resource. For example, to allow access from any origin, you can set this header as follows:

```
Access-Control-Allow-Origin: *
```

Or it can be narrowed down to a specific origin:

```
Access-Control-Allow-Origin: https://example.com
```

## Understanding CORS Request Types

There are two types of CORS request: "simple" requests, and "preflight" requests, and it's the _browser_ that determines which is used. As the developer, you don't normally need to care about this when you are constructing requests to be sent to a server. However, you may see the different types of requests appear in your network log and, since it may have a performance impact on your application, it may benefit you to know _why_ and _when_ these requests are sent.

Let's have a look at what that means in more detail in the next couple of sections.

### Simple requests (GET, POST, and HEAD)

The browser deems the request to be a ["simple" request](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests) when the request itself meets a certain set of requirements:

- One of these methods is used: `GET`, `POST`, or `HEAD`
- A [CORS safe-listed header](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) is used
- When using the `Content-Type` header, only the following values are allowed: `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain`
- No event listeners are registered on any `XMLHttpRequestUpload` object
- No [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) object is used in the request

The request is allowed to continue as normal if it meets these criteria, and the `Access-Control-Allow-Origin` header is checked when the response is returned.

### Preflight requests (OPTIONS)

If a request does not meet the criteria for a **simple** request, the browser will instead make an automatic [preflight request](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests) using the `OPTIONS` method. This call is used to determine the exact CORS capabilities of the server, which is in turn used to determine whether or not the intended CORS protocol is understood. If the result of the `OPTIONS` call dictates that the request cannot be made, the actual request to the server will not be executed.

The preflight request sets the mode as `OPTIONS` and sets a couple of headers to describe the actual request that is to follow:

- `Access-Control-Request-Method`: The intended method of the request (e.g., `GET` or `POST`)
- `Access-Control-Request-Headers`: An indication of the custom headers that will be sent with the request
- `Origin`: The usual origin header that contains the script's current origin

An example of such a request might look like this:

```bash
# Request
curl -i -X OPTIONS localhost:3001/api/ping \
-H 'Access-Control-Request-Method: GET' \
-H 'Access-Control-Request-Headers: Content-Type, Accept' \
-H 'Origin: http://localhost:3000'
```

This request basically says "I would like to make a GET request with the `Content-Type` and `Accept` headers from http://localhost:3000 - is that possible?".

The server will include some `Access-Control-*` headers within the response to indicate whether the request that follows will be allowed or not. These include:

- `Access-Control-Allow-Origin`: The origin that is allowed to make the request, or `*` if a request can be made from any origin
- `Access-Control-Allow-Methods`: A comma-separated list of HTTP methods that are allowed
- `Access-Control-Allow-Headers`: A comma-separated list of the custom headers that are allowed to be sent
- `Access-Control-Max-Age`: The maximum duration that the response to the preflight request can be cached before another call is made

The response would then be examined by the browser to decide whether to continue with the request or to abandon it.

So a response to the earlier example might look like this:

```
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: Content-Type, Accept
Content-Length: 0
Date: Fri, 05 Apr 2019 11:41:08 GMT
Connection: keep-alive
```

The `Access-Control-Allow-Origin` header, in this case, allows the request to be made from any origin, while the `Access-Control-Allow-Methods` header describes only the accepted HTTP methods. If a given HTTP method is not accepted, it will not appear in this list.

In this example, `Access-Control-Allow-Headers` echos back the headers that were asked for in the `OPTIONS` request. This indicates that all the requested headers are allowed to be sent. If for example, the server doesn't allow the `Accept` header, then that header would be omitted from the response and the browser would reject the call.

## How to Add CORS to a Nodejs Express App

As a concrete example of how this works, let's take an existing [Node Express](https://expressjs.com) application and modify it to allow cross-origin JavaScript requests. The application you're going to work with was created using [Vue CLI 3](https://cli.vuejs.org/) and runs on port 3000, along with an Express server running on port 3001. The Vue frontend provides a UI that makes an API call to the server, but unfortunately, this doesn't work as the server is not CORS-enabled. You're going to fix that!

To start, check out the tutorial repository to somewhere on your local machine. The following commands will get you set up with the application:

```bash
# Clone the repository using SSH
git clone git@github.com:auth0-blog/express-cors-demo.git

# Move into the project directory
cd express-cors-demo

# Install dependencies
npm install

# Run the application
npm run dev
```

Now open the website at [http://localhost:3000](http://localhost:3000) and click the **Call API** button. You should find that the call will fail. This is because a request is being made to the API at `http://localhost:3001/api/ping` which, thanks to the different port number, makes it a different origin from where the web application is running. Therefore, it constitutes a cross-origin request and is blocked by the browser by default.

Make the same request from `curl` to see that no CORS headers are returned:

```bash
curl -i localhost:3001/api/ping

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 22
ETag: W/"16-IP+nb8Blfh+WTVdL6Lq1eXiDJXg"
Date: Fri, 05 Apr 2019 12:23:48 GMT
Connection: keep-alive

{"msg":"Hello, World"}%
```

> **Note**: The call using `curl` works just fine, as CORS only affects `XMLHttpRequest` calls in the browser.

### Adding CORS headers to the app

Now modify the server to return CORS headers and make this API call work from the browser. To do this, open the `server/index.js` file and modify it to look like the following:

```js
const express = require("express");
const debug = require("debug")("server");

const app = express();
const port = process.env.SERVER_PORT || 3001;

// NEW - Add CORS headers - see https://enable-cors.org/server_expressjs.html
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

// API endpoint
app.get("/api/ping", (req, res) => {
  res.send({
    msg: "Hello, World"
  });
});

app.listen(port, () => debug(`Listening on port ${port}`));
```

Notice that some custom middleware is added before the `/api/ping` endpoint is defined. The code to add these headers has been taken from [enable-cors.org](https://enable-cors.org/server_expressjs.html).

Let's run that `curl` command again to see the effects:

```bash
curl -i localhost:3001/api/ping

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Content-Type: application/json; charset=utf-8
Content-Length: 22
ETag: W/"16-IP+nb8Blfh+WTVdL6Lq1eXiDJXg"
Date: Fri, 05 Apr 2019 12:31:51 GMT
Connection: keep-alive

{"msg":"Hello, World"}%
```

Here you can see the headers have been added correctly. Now open the web application again and click the **Call API** button; this time the call should work!

![The API call working after adding CORS headers](https://images.ctfassets.net/23aumh6u8s0i/30Os8lS2aYKqE1bpHpeeLw/53318f27bd9495a7371fe68f625da35b/express-cors_02)

### Forcing a preflight request

The request made by clicking the **Call API** button meets the criteria for being a _simple request_, so no preflight is needed. You can force one by modifying the call so that its effect on the network is more visible.

Open the `src/components/CallAPI.vue` file and modify the `callApi()` function so that it sends a `Content-Type: application/json` header. This is because a content type of `application/json` is not within the criteria for a simple request, as explained earlier.

This will not affect the call but it will force the browser to send a preflight request before the real call is made:

```js
// ...

methods: {
    callApi() {
      fetch("//localhost:3001/api/ping", {
        // NEW - add a Content-Type header
        headers: {
          "Content-Type": "application/json"
        }
      })
        .then(async response => {
          if (response.ok) {
            this.apiError = false;
            this.result = await response.json();
          } else {
            this.apiError = true;
          }
        })
        .catch(() => (this.apiError = true));
    }
  }

// ...
```

Click the **Call API** button again. This time an initial preflight request will be sent before the actual request, which can be observed in the network tab of your browser development tools:

![The API call being made, causing a preflight request](https://images.ctfassets.net/23aumh6u8s0i/2i5XcsdA9kTpxlqd9uZyra/901aa29bd2a53035e2d3fc04fabc1e37/express-cors_03)

### Using the CORS middleware for Express

Instead of manually specifying the headers, there is a [CORS Express middleware package](https://npmjs.com/package/cors) that can be used instead.

To use it, install the package from the terminal:

```bash
npm install cors
```

Then modify the server to use this package _instead of_ the custom middleware that was inserted earlier. Your `server/index.js` file should look something like the following:

```js
const express = require("express");
const debug = require("debug")("server");

// NEW - bring in the cors library
const cors = require("cors");

const app = express();
const port = process.env.SERVER_PORT || 3001;

// NEW - replace custom middleware with the cors() middleware
app.use(cors());

app.get("/api/ping", (req, res) => {
  res.send({
    msg: "Hello, World"
  });
});

app.listen(port, () => debug(`Listening on port ${port}`));
```

Once these changes are made, the application should automatically restart. If it doesn't, use `Ctrl+C` to stop the application and then run `npm run dev` once more. Open [http://localhost:3000](http://localhost:3000) once again and click the **Call API**. Note that the application still works as intended!

### Configuring the CORS middleware

The CORS middleware can be configured to accept only specific origins and headers. It's a good idea for security reasons to be restrictive by default.

As an example of how to do this, you can reconfigure the CORS middleware to only accept requests from the origin that the frontend is running on. Modify the `cors()` setup from the previous example to look like the following:

```js
app.use(
  cors({
    origin: "http://localhost:3000", // restrict calls to those this address
    methods: "GET" // only allow GET requests
  })
);
```

Again, the application should restart once these changes are made and the file is saved. Open the application in the browser and click the **Call API** button once again. The application should be working as normal, but let's have a closer look at the response from the server:

![The preflight request showing the more restrictive CORS headers](https://images.ctfassets.net/23aumh6u8s0i/5MzoVdegn3NFbCYOvLF1bj/e2a30b56925a312ed66f7d9b82599ddf/express-cors_04)

Notice that the `OPTIONS` request has returned the more restrictive values that you specified. This still allows the sample application to work, but calls from scripts running on other origins would be denied.

You can [have a look at the other `cors` configuration options](https://github.com/expressjs/cors#configuring-cors) on the GitHub page.

<include src="TweetQuote" quoteText="I learned how to take an existing Node Express app and add CORS support to it!"/>

## Recap

In this article you learned about CORS, what the different headers mean and the differences between simple and preflight requests. You then altered a broken Node + Express application so that it accepted cross-origin requests, and could successfully make API calls to a backend running on a different origin.

<include src="asides/AboutAuth0" />


CORS Tutorial: A Guide to Cross-Origin Resource Sharing

Learn how to use Django to build web applications easily, and Auth0 to make the process even faster and more secure.

Django Tutorial: Building and Securing Web Applications

30b8d1b7c0dab4bb311c121a47a6aae9?s=80 avatar

30b8d1b7c0dab4bb311c121a47a6aae9?s=80

Guest Author

Vladimir Fomene

Learn how to use Express Validator, a set of middleware functions, to perform server-side validation on user data.



**TL;DR:** In this article you will learn to validate and sanitize data in your Express.js
applications using a set of middleware called [`express-validator`](https://express-validator.github.io/docs/). You will do so by completing a demo application that takes in user input and validates/sanitizes it using
this library. If you want to see the complete application developed throughout this article, take a look at [this GitHub repository](https://github.com/auth0-blog/expressjs-validator).

## Prerequisites

Software you need to install to follow this tutorial:

* [Node.js and NPM (Node Package Manager)](https://nodejs.org/en/download/). While writing this article, the author used Node.js `v8.13.0`.
* Any text editor or IDE of your choice ([VS Code](https://code.visualstudio.com/), [WebStorm](https://www.jetbrains.com/webstorm/download/), [Atom](https://atom.io/), [Sublime](https://www.sublimetext.com/), etc.).

## What Is Express Validator?

According to the [official website](https://express-validator.github.io/docs/), Express Validator is a set of [Express.js middleware](http://expressjs.com/en/guide/using-middleware.html) that wraps [`validator.js`](https://github.com/chriso/validator.js), a library that provides validator and sanitizer functions. Simply said, Express Validator is an Express middleware library that you can incorporate in your apps for server-side data validation.

### Why Server-Side Validation?

Mainly speaking, you _must_ care about server-side validation because data coming from other clients (single-page apps, regular web apps, mobile applications, etc.) cannot be trusted. For example, your servers have no means to know if a malicious user (or virus) disabled front-end validation (e.g., JavaScript) to allow the app to submit bogus data to your server. That is, client-side validation is _not enough_.

## Set Up Your Playground For Express Validator

To start playing with Express Validator, you will clone a simple Express server to use as a playground. To do so, open your terminal in a preferred directory and clone the starter project with the following command:

```bash
# clone repository
git clone https://github.com/auth0-blog/expressjs-validator.git

# move into your clone repository
cd expressjs-validator
```

Then, install all the project dependencies by running the following command in the project root:

```bash
npm install
```

This simple Express application contains just enough for you to get started and focus on learning about the `express-validator` library. For example, if you check the `views/layout.pug` file, you will see that it contains some basic HTML elements to define how the app should look like.

> **Note:** If you are not familiar with [Pug, the template engine](https://pugjs.org/api/getting-started.html), you might find the syntax of this file a bit different. Don't worry, you don't need to be acquainted with Pug to follow this article along. Also, if you take a close look to the source code, you will probably understand what is going on. For example, you will see a line starting with `link` that contains the `href` keyword pointing to a [BootStrap](https://getbootstrap.com/) file. This is just the code telling the browser to import an external CSS file, quite similar to what you would do in HTML.

Besides the `views/layout.pug` file, these are other important files that you must know about:

- `./routes/index.js`: This file is responsible for rendering the homepage of your app. The `res.render('index')` line will make Express and Pug work together to render the `views/index.pug` file.
- `./routes/users.js`: For now, this file adds an endpoint to your app that doesn't do anything. Soon, you will start using this file to learn about the `express-validator` library.
- `./public/javascripts/script.js`: This is the file that will be in charge of sending user data to your backend. The requests will be some AJAX calls to the endpoint defined on the `routes/users.js` file.
- `./app.js`: This is the file responsible for bootstrapping the backend. This file sets up Pug as the template engine and tells Express.js where to find the other JavaScript files.

With that, you now know how the app is structured, but don't run the project yet! You still need to define the home page of your app.

## Build Homepage For User Input

After learning about the structure of the playground, you will need to add the following code to the `views/index.pug` file:

```pugjs
extends layout

block content
  .container
    .alert(class="alert-danger", role="alert", id="error-group", style="display: none")
      ul(id="errors")
    .row
      .col-sm.col-md-8.offset-md-2.col-lg-6.offset-lg-3
        h3 Welcome To Express Validator!
        form
          .form-group
            input.form-control(type="text", id="name", placeholder="Name")
          .form-group
            input.form-control(type="text", id="classYear", placeholder="Class Year")
          .form-group
            input.form-control(type="text", id="weekday", placeholder="Available Weekday")
          .form-group
            input.form-control(type="email", id="email", placeholder="Email")
          .form-group
            input.form-control(type="password", id="password", placeholder="Password")
          .form-group
            input.form-control(type="password", id="confirmPassword", placeholder="Confirm Password")
          .form-group
            button.form-control(type="button", class="btn btn-primary", id="signup-btn") Submit
```

What you are doing here is to add a bunch of `input` elements to the homepage that will receive user input to be sent to the backend. With that covered, you have everything in place to have a sneak peek at the app. Go to the project root directory
and run the following command to get the app started.

```bash
node app.js
```

Now, if you visit [`http://localhost:3000/`](http://localhost:3000/) in your favorite browser, you should see the following page:

![Express Validator Tutorial: Scaffolding the sample app.](https://images.ctfassets.net/23aumh6u8s0i/4HKvT3HZ3MqdXsTZMKUaqQ/5e1105b1c1c24aad89af2bee6938c70e/app-screenshot)

> **Note:** You can stop the server now, but whenever you add a new feature/functionality, you will need to restart the server if it is already running or just start it.

Once the user enters data on your homepage and clicks the **Submit** button, you will need to handle the on submit event and make an AJAX request to your Express back-end. To do that, add the following code to your `./public/javascripts/script.js` file:

```js
$('#signup-btn').click(function () {
  $.ajax({
    url: '/users',
    type: 'POST',
    cache: false,
    data: {
      name: $('#name').val(),
      classYear: $('#classYear').val(),
      weekday: $('#weekday').val(),
      email: $('#email').val(),
      phoneNumber: $('#phoneNumber').val(),
      password: $('#password').val(),
      confirmPassword: $('#confirmPassword').val()
    },
    success: function () {
      $('#error-group').css('display', 'none');
      alert('Your submission was successful');
    },
    error: function (data) {
      $('#error-group').css('display', 'block');
      var errors = JSON.parse(data.responseText);
      var errorsContainer = $('#errors');
      errorsContainer.innerHTML = '';
      var errorsList = '';

      for (var i = 0; i < errors.length; i++) {
        errorsList += '<li>' + errors[i].msg + '</li>';
      }
      errorsContainer.html(errorsList);
    }
  });
});
```

From the code above, on form submission, a POST request is made to the `http://localhost:3000/users` endpoint with the data entered by users on the HTML fields defined before. If there is an error during validation, this code will make sure to display the error messages inside a `div` marked with the `alert` class. If no errors are found, a successful validation will trigger an alert with this message: "Your submission was successful".

## Server-Side Validation With Express Validator

Now that you have your front-end set up, you will start learning about `express-validator`. To do that, the first thing you will need to do is to install the library:

```bash
npm install express-validator --save
```

After installing `express-validator`, open the `routes/users.js` file and import the [check API](https://express-validator.github.io/docs/check-api.html) to use its validation functions:

```js
// ... call to require('express') ...
const {check, validationResult} = require('express-validator/check');

// ... leave the rest untouched ...
```

### Making sure fields are not empty

Now, to validate your form input, you need to pass an array in which you specify the fields that you want to validate as a second argument to your route handler for `/users` POST requests. To do that, add the following code after the GET route handling code in `routes/user.js`:

```js
// ... require statements ...

// ... router.get ...

router.post('/', [
    check('name').not().isEmpty().withMessage('Name must have more than 5 characters'),
    check('classYear', 'Class Year should be a number').not().isEmpty(),
    check('weekday', 'Choose a weekday').optional(),
    check('email', 'Your email is not valid').not().isEmpty(),
    check('password', 'Your password must be at least 5 characters').not().isEmpty(),
  ],
  function (req, res) {
    const errors = validationResult(req);
    console.log(req.body);

    if (!errors.isEmpty()) {
      return res.status(422).jsonp(errors.array());
    } else {
      res.send({});
    }
  });

module.exports = router;
```

The string passed as an argument to the `check` function specifies which data field you want to validate (e.g., `classYear`). The `not().isEmpty()` function chain makes the library validate that this field is not empty. The string argument added to `withMessage()` specifies a custom error message which will be send back to your users if this particular field violates a validation requirement.

> **Note:** You can also provide a custom error message by passing it as a second argument to the `check()` function.

By calling the `optional()` function on it, you have made the `weekday` field optional. So far, you have only specified how you want your fields to be validated. You might be wondering where Express.js actually does the validation. Validation happens in the request handler when it calls the `validationResult()` function. To test this, run your application and submit an empty form to the server and you should see the following error displayed in red.

![Express validator showing error messages.](https://images.ctfassets.net/23aumh6u8s0i/55oL7TnIWUeSSUPWph5aal/fc62311dd2d57123edf25666b015efc5/error-messages)

Remark how there is no error for the **weekday** field, this is because you made the field optional during validation. Pretty cool, huh?

### Validating fields' length

You can also check if a data field meets a certain character length requirement by using the `isLength()` function. This function takes in an object in which you specify the minimum and/or the maximum number of characters in that field. To see this in action, update the validation requirements for the name and password field as follows:

```js
[
  // ... leave other validations untouched ...
  check('name').not().isEmpty().isLength({min: 5}).withMessage('Name must have more than 5 characters'),
  check('password', 'Your password must be at least 5 characters').not().isEmpty().isLength({min: 5}),
]
```

Now, restart the app and try to enter a name and password less than five characters long. You should see the app complaining about the field length.

### Validating fields' type

Apart from validating the character length of a field, you can also validate its type or validate it against a list. For example, you can specify that your `classYear` field needs to be an integer. You can also specify that weekday should not be Saturday or Sunday. To do that, update your validation requirements as follows:

```js
[
  // ... leave other validations untouched ...
  check('classYear', 'Class Year should be a number').not().isEmpty().isInt(),
  check('weekday', 'Choose a weekday').optional().not().isIn(['Sunday', 'Saturday']),
]
```

Now, after restarting the app, if you try to enter a value which is not an integer in the class year field, you will see an error message. Also, if you enter "Saturday" or "Sunday" in the weekday field, you will see the backend complaining.

### Validating and sanitizing emails

Express Validator also validates emails with the `isEmail()` function. Besides that, you can also make this library normalize emails with the `normalizeEmail()` function. In case you are wondering what it means to normalize an email, you can read about it in this [Stack Overflow post](https://stackoverflow.com/questions/27936705/what-does-it-mean-to-normalize-an-email-address).

In order to validate the email field, refactor the `check('email'` call in your code:

```js
[
  // ... leave other validations untouched ...
  check('email', 'Your email is not valid').not().isEmpty().isEmail().normalizeEmail(),
]
```

Then, after restarting the app, if you enter an invalid email on your homepage you will get an error message:

![Validating email addresses with Express Validator](https://images.ctfassets.net/23aumh6u8s0i/26cwBYI8B4AvRLMizfbUcV/57d5b927eb05c0ab024257c38a9607e9/email-error-messages)

### Sanitizing fields with trim and escape

With Express Validator, you can also trim away spaces from your data and escape special characters using the `trim()` and `escape()` functions. The `escape()` function can really come in handy when protecting yourself from cross-site scripting attacks. To add this feature to your app, refactor the call to `check('name')` as follows:

```js
[
  // ... leave other validations untouched ...

  check('name').exists().isLength({min: 5}).trim().escape().withMessage('Name must have more than 5 characters'),
]
```

To test this, the starter project came with code that prints every request body to the console after validation. So, imagine a malicious user types the following JavaScript code in your name field: `<script> alert("hello, there");</script>`. By using `escape` you will have no problem, as the name that you will get in your backend will look like:

```text
&lt;script&gt; alert(&quot;hello, there&quot;);&lt;&#x2F;script&gt;
```

That is, Express Validator transformed the malicious code into special HTML characters. Amazing, right?

### Validating with custom validators

Although Express Validator offers a bunch of solutions out of the box for you, chances are you will need to implement some custom validation. For example, imagine you need to make sure that the `password` field matches the `confirmPassword` field. To do that, you can use the `custom()` validation function as follows:

```js
[
  // ... leave other validations untouched ...

  check('confirmPassword', 'Passwords do not match').custom((value, {req}) => (value === req.body.password)),
]
```

The `custom` function takes in a function (an arrow function in this case) as an argument and checks if the `value` of the `confirmPassword` is the same as the value of the `req.body.password` field. To see this in action, restart your app, then enter a different password and you should get the message saying that "passwords do not match".

## Conclusion

In this article, you learned how to use the Express Validator middleware to validate and sanitize user data in an Express application. Guess what? You only scratched the surface of what is possible with Express Validator. Aside from learning more validation and sanitization functions, you can learn how to add wildcards to your validations, do schema validation and whole body validation from [Express Validator's documentation](https://express-validator.github.io/docs/). I will love to see what you build with Express Validator.

<include src="asides/AboutAuth0" />


Express Validator Tutorial

Learn how to develop REST APIs with ease by using Spring Boot and Spring Data REST.

Spring Data REST Tutorial: Developing RESTful APIs with Ease

Learn, through a practical tutorial, how to use Vuex to manage the state of your Vue.js apps the right way.

State Management with Vuex: a Practical Tutorial

A tutorial about using FuseBox to configure your JavaScript development environment on Node.js

Introducing FuseBox, an alternative to Webpack

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

Learn how to use CLI schematics, effects, Auth0, and more to secure your NgRx application.

NgRx Authentication Tutorial: Secure an App



**TL;DR:** In this article, we’ll get a quick refresher on NgRx basics and get up to speed on more features of the NgRx ecosystem. We'll then walk through how to add Auth0 authentication to an NgRx app. You can access the finished code for this tutorial on the [ngrx-auth GitHub repository](https://github.com/auth0-blog/ngrx-auth).

## Adding Authentication to an NgRx Project

We’re caught up on the latest and greatest with NgRx, so let’s learn how to implement authentication in NgRx.

Authentication is a perfect example of shared state in an application. Authentication affects everything from being able to access client-side routes, get data from private API endpoints, and even what UI a user might see. It can be incredibly frustrating to keep track of authentication state in all these places. Luckily, this is exactly the kind of problem NgRx solves. Let’s walk through the steps. (We’ll be following the best practices Brandon Roberts describes in his ng-conf 2018 talk [Authentication in NgRx](https://www.youtube.com/watch?v=46IRQgNtCGw).)


### Our Sample App
We’re going to use a heavily simplified version of the official [ngrx/platform book collection app](https://github.com/ngrx/platform/tree/master/projects/example-app) to learn the basics of authentication in NgRx. To save time, most of the app is done, but we’ll be adding Auth0 to protect our book collection through an Auth0 login page.

You can access the code for this tutorial at the [Auth0 Blog repository](https://github.com/auth0-blog/ngrx-auth). To get started with the application, you'll need to clone the app, install the dependencies, and check out the "Starting point" commit in order to follow along. You can also run the application using the Angular CLI. You can do all of that with these commands:

```bash
git clone https://github.com/auth0-blog/ngrx-auth.git
cd ngrx-auth
git checkout 23c1b25
npm install
ng serve
```

You can now visit `http://localhost:4200` to see the running application.

We'll also be taking advantage of NgRx schematics to help us set up authentication in this app, so I've added them to the project and set them as the default.

Our app currently has the book library (found in the `books` folder), as well as some basic setup of NgRx already done. We also have the very beginnings of the `AuthModule`. The `UserHomeComponent` just lets us go to the book collection. This is what we'll protect with authentication.

The first phase of this task will be the basic scaffolding of the authentication state, reducer, and selectors. Then, we’ll add Auth0 to the application, create our UI components, and finally set up effects to make it all work.

### Two Quick Asides
Before we get started, I need to make a couple of side notes.

First, because this article is focused on how to set up authentication in an NgRx app, we're going to abstract away and over-simplify things that aren't specific to NgRx. You'll learn the mechanics of adding the necessary state setup, adding actions and reducers to handle the flow of logging in, and using effects to retrieve and process a token.

Second, almost all NgRx tutorials need a caveat. In the real world, if you had an application this simple, you most likely wouldn't use NgRx. NgRx is extremely powerful, but the setup and learning curve involved prevent it from being a fit for every application, especially super simple ones.

## Define Global Authentication State

The first step to adding authentication to an NgRx app is to define the piece of your state related to authentication. Do you need to keep track of a user profile, or whether there is a token stored in memory? Often the presence of a token or profile is enough to derive a “logged in” state. In any case, this is what you’ll want to attach to your main state.

We’re going to keep it very simple for this example and just detect the presence of a valid token. If we have a valid token, we'll toggle a global piece of state called `isLoggedIn`.

To get started, let’s use a schematic to create a reducer in the main `state` folder:

```bash
ng g reducer state/auth --no-spec
```

This is where we’ll define our authentication state, reducer, and selector functions. We can go ahead and update the state interface and initial state like this:

```typescript
// src/app/state/auth.reducer.ts
// ...

// Leave everything else and update the following:
export interface State {
  isLoggedIn: boolean;
}

export const initialState: State = {
  isLoggedIn: false
};

// ...
```

We'll come back to the reducer in this file once we've defined our actions in the next section.

Next, import everything from the auth reducer file into the `index.ts` file. That way we can add the authentication state to the overall application state and the authentication reducer to our action reducer map. The complete file will look like this right now:

```typescript
// src/app/state/index.ts
import {
  ActionReducerMap,
  createFeatureSelector,
  createSelector,
  MetaReducer
} from '@ngrx/store';
import { environment } from '../../environments/environment';
import * as fromAuth from './auth.reducer';

export interface State {
  auth: fromAuth.State;
}

export const reducers: ActionReducerMap<State> = {
  auth: fromAuth.reducer
};

export const metaReducers: MetaReducer<State>[] = !environment.production
  ? []
  : [];
```

In a more complex application, you’ll need to think through the state of other pages that use authentication in addition to your overall authentication state. For example, it’s common for login pages to need pending or error states. In our example, we’ll be using Auth0’s [login page](https://auth0.com/docs/hosted-pages/login), which will redirect our application to a login screen to authenticate, then back to the application. Because of this, we won’t need to keep track of our login page state in this example.

### Define Authentication Actions
Before we write our authentication reducer, let’s take Mike Ryan’s advice and write our actions first. Let’s walk through the flow of authentication in our example:

1. User clicks the “Log In” button to trigger the Auth0 login screen.
2. After going through the Auth0 authentication process, the user will be redirected to a `callback` route in our application.
3. That `CallbackComponent` will need to trigger an action to parse the hash fragment and set the user session. (Hint: this is where we’re altering our application state.)
4. Once that’s done, the user should be redirected to a `home` route.
5. If the user refreshes while logged in, the authentication state should persist.

I can identify several actions here:

- **Login** — to trigger the Auth0 login screen.
- **LoginComplete** — to handle the Auth0 callback.
- **LoginSuccess** — to update our authentication state `isLoggedIn` to `true` and navigate to the `home` route.
- **LoginFailure** — to handle errors.
- **CheckLogin** - to see if the user is still logged in on the server and update the state accordingly.

Notice that only the **LoginSuccess** action will modify our application state, which means that one will need to be in our reducers. The rest of these actions will use effects.

The logout process is similar:

1. User clicks “Log Out” button to trigger a confirmation dialog.
2. If the user clicks “Cancel,” the dialog will close.
3. If the user clicks “Okay,” we’ll trigger the Auth0 logout process.
4. Once logged out, Auth0 will redirect the user back to the application, which should default to the `login` route when not authenticated.

Can you think of what actions we’ll need? I spotted these:

- **Logout** — to trigger the logout confirmation dialog
- **LogoutCancelled** — to close the logout dialog.
- **LogoutConfirmed** — to tell Auth0 to log out and redirect home.

We’ll use the **LogoutConfirmed** action to reset our authentication state in a reducer in addition to telling Auth0 to log out. The rest will be handled with effects.

### Add the Auth NgRx Feature
We've defined our actions and identified which will be handled by the reducer and which will be handled with effects. We'll need to add some new files to the `AuthModule` and wire them up to our main application. Luckily, we can use schematics to make this much easier for us:

```bash
ng g feature auth/auth --group --no-spec --module auth
```

Let's break this command down to understand what's happening:
- `g` is short for `generate` in the CLI
- `feature` is the NgRx schematic that generates actions, effects, and reducers for a new feature
- `auth/auth` tells the CLI to put these files under the `auth` folder and name them `auth`
- `group` is an NgRx schematic option that groups all the files under respective folders (e.g. actions go in an `actions` folder)
- `no-spec` skips generation of test files
- Finally, `module auth` wires up the feature in the `AuthModule`

We should end up with `actions`, `effects`, and `reducers` folders inside of `src/app/auth` with corresponding TypeScript files prefixed with `auth` (e.g. `auth.actions.ts`).

We actually won't be using the module-specific `reducers`, so we can delete that file and folder (`src/app/auth/reducers`) and the references to the auth reducer in `auth.module.ts`. We'll need to delete the import of the reducer on line 9 and the reducer registration from the `imports` array on line 22:

```typescript
// src/app/auth/auth.module.ts
import * as fromAuth from './reducers/auth.reducer'; // remove this line
// ...
StoreModule.forFeature(‘auth’, fromAuth.reducer), // remove this line
// ...
```

It's helpful to stop and re-run `ng serve` to prevent getting some errors at this stage.

### Adding the Auth Actions
Let's create the actions we defined earlier in our newly created `/auth/auth.actions.ts` file. We can delete the generated code, but we’ll follow the same pattern in our code: creating an enum with the action type strings, defining each action and optional payload, and finally defining an `AuthActions` type that we can use throughout the application. The finished result will look like this:

```typescript
// src/app/auth/actions/auth.actions.ts
// Finished:
import { Action } from '@ngrx/store';

export enum AuthActionTypes {
  Login = '[Login Page] Login',
  LoginComplete = '[Login Page] Login Complete',
  LoginSuccess = '[Auth API] Login Success',
  LoginFailure = '[Auth API] Login Failure',
  CheckLogin = '[Auth] Check Login',
  Logout = '[Auth] Confirm Logout',
  LogoutCancelled = '[Auth] Logout Cancelled',
  LogoutConfirmed = '[Auth] Logout Confirmed'
}

export class Login implements Action {
  readonly type = AuthActionTypes.Login;
}

export class LoginComplete implements Action {
  readonly type = AuthActionTypes.LoginComplete;
}

export class LoginSuccess implements Action {
  readonly type = AuthActionTypes.LoginSuccess;
}

export class LoginFailure implements Action {
  readonly type = AuthActionTypes.LoginFailure;

  constructor(public payload: any) {}
}

export class CheckLogin implements Action {
  readonly type = AuthActionTypes.CheckLogin;
}

export class Logout implements Action {
  readonly type = AuthActionTypes.Logout;
}

export class LogoutConfirmed implements Action {
  readonly type = AuthActionTypes.LogoutConfirmed;
}

export class LogoutCancelled implements Action {
  readonly type = AuthActionTypes.LogoutCancelled;
}

export type AuthActions =
  | Login
  | LoginComplete
  | LoginSuccess
  | LoginFailure
  | CheckLogin
  | Logout
  | LogoutCancelled
  | LogoutConfirmed;
```

You can see that, in our example, we’re only using a payload for the `LoginFailure` action to pass in an error message. If we were using a user profile, we’d need to define a payload in `LoginComplete` in order to handle it in the reducer. Instead, we'll just be handling the token through an effect and an `AuthService` we'll create later.

Do you notice how thinking through the actions in a feature also helps us identify our use cases? This keeps us from cluttering our reducers and application state because we shift most of the heavy lifting to effects.

> Quick aside: if you'd like your application to continue to build at this step, you'll need to comment out the generated code in `auth.effects.ts`, since it now references the deleted schematic-generated action. Comment out lines 8 and 9:

```typescript
// src/app/auth/effects/auth.effects.ts

// ...

// @Effect()
// loadFoos$ = this.actions$.pipe(ofType(AuthActionTypes.LoadAuths));

// ...
```

### Define Authentication Reducer

Now let’s circle back to authentication reducer (`state/auth.reducer.ts`). Since we’ve figured out what our actions are, we know that we’ll only need to change the state of our application when the login is successful and when the logout dialog is confirmed.

First, import the `AuthActions` and `AuthActionTypes` at the top of the file so we can use them in our reducer:

```typescript
import { AuthActions, AuthActionTypes } from '@app/auth/actions/auth.actions';
```

Next, replace the current reducer function with this:

```typescript
// /state/auth.reducer.ts
export function reducer(state = initialState, action: AuthActions): State {
  switch (action.type) {
    case AuthActionTypes.LoginSuccess:
      return { ...state, isLoggedIn: true };

    case AuthActionTypes.LogoutConfirmed:
      return initialState; // the initial state has isLoggedIn set to false

    default:
      return state;
  }
}
```

Notice that the `LoginSuccess` case toggles the global `isLoggedIn` state to `true`, while the `LogoutConfirmed` case returns us to our initial state, where `isLoggedIn` is `false`.

We’ll handle the rest of our actions using effects later on.

### Define Authentication Selector
We've defined our `isLoggedIn` state, actions related to our login process, and a reducer to modify our application state. But how do we access the status of `isLoggedIn` throughout our application? For example, we’ll need to know whether we're authenticated in a route guard to control access to the `home` and `books` routes.

This is exactly what **selectors** are for. To create a selector, we’ll first define the pure function in `/state/auth.reducer.ts` and then register the selector in `index.ts`. Underneath our reducer function, we can add this pure function:

```typescript
// src/app/state/auth.reducer.ts
// ...all previous code remains the same
export const selectIsLoggedIn = (state: State) => state.isLoggedIn;
```

We can then define our selectors at the bottom of `state/index.ts`:

```typescript
// src/app/state/index.ts
// ...all previous code remains the same
export const selectAuthState = createFeatureSelector<fromAuth.State>('auth');
export const selectIsLoggedIn = createSelector(
  selectAuthState,
  fromAuth.selectIsLoggedIn
);
```

We’ve now got all the basic scaffolding set up for an authenticated state. Let's start setting up our authentication process.



NgRx Authentication Tutorial: Build an App



**TL;DR:** In this article, we’ll get a quick refresher on NgRx basics and get up to speed on more features of the NgRx ecosystem. We'll then walk through how to add Auth0 authentication to an NgRx app. You can access the finished code for this tutorial on the [ngrx-auth GitHub repository](https://github.com/auth0-blog/ngrx-auth).

## NgRx: From Humble Beginnings to a New Ecosystem

I remember when [Rob Wormald](https://twitter.com/robwormald), an Angular Core Team member, [first wrote ngrx/store](https://github.com/ngrx/store/commit/c7c562cc447416ce6c386b1522f301064af43a95) at the end of 2015. It was a tiny library implementing Redux in Angular (`store.ts` was a single file with 66 lines of code!). Fast forward a few years and [NgRx](https://github.com/ngrx) is much more than a simple library — it’s an entire ecosystem with over 120 contributors! Learning to think in the Redux pattern, while also keeping up with the various structures and pieces of NgRx, can be a challenge at first. Don’t worry, though &mdash; we’ve got your back.

In this article, we’ll do a quick refresher on NgRx concepts and learn about what has changed in its ecosystem in the last year. Then, we’ll look at how authentication works in NgRx and how to add Auth0 to an NgRx application.

Let’s get started!

<include src="TweetQuote" quoteText="I'm learning about adding authentication to an NgRx application."/>

## Basics of NgRx - A Recap

While we have a great tutorial [on managing state with `ngrx/store`](https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/) and implementing Auth0, a lot has changed with NgRx since then. Let’s do a quick recap of what hasn't changed &mdash; the fundamental concepts of NgRx and the Redux pattern.

**State** is an immutable data structure describing the current status of parts of your application. This could be in the UI or in the business logic. State can represent a range of different things, from whether to show a navigation menu to whether a user is logged in.

You can access that state through the **store**. You can think of the store as the main brain of your application. It’s the hub of anything that needs to change. Since we’re using Angular, the store is implemented using an [RxJS subject](https://rxjs-dev.firebaseapp.com/guide/subject), which basically means it’s both an observable and an observer. The store is an observable of state, which you can subscribe to, but what is it observing?

The store is an observer of **actions**. Actions are information payloads that describe state changes. You send (or **dispatch**) actions to the store, and that’s the only way the store receives data or instructions on how to update your application’s state. An action has a _type_ (like “Add Book”) and an optional **payload** (like an object containing the title and description for the book **Return of the King**).

Actions are the bedrock of an NgRx application, so it’s important to follow best practices with them. Here are some pro tips on actions from Mike Ryan’s ng-conf talk [Good Action Hygiene](https://www.youtube.com/watch?v=JmnsEvoy-gY):

- Write your actions first. This lets you plan out the different use cases of your application before you write too much code.
- Don’t reuse actions or use action sub-types. Instead, focus on clarity over brevity. Be specific with your actions and use descriptive action types. Use actions like `[Login Page] Load User Profile` and `[Feature Page] Load User Profile`. You can then use the switch statement in your reducer to modify the state in the same way for multiple actions.
- Remember: good actions are actions you can read after a year and tell where they are being dispatched.

Once the store receives an action to change the state, pure functions called **reducers** use those actions along with the previous state to compute the new state.

If you’re feeling lost on the basics of the Redux pattern, one of my favorite introductory resources is Dan Abramov’s [Egghead course on getting started with Redux](https://egghead.io/courses/getting-started-with-redux).

## Going Further with NgRx

With the basics covered, let’s look at some additional concepts in NgRx we'll need for this tutorial.

### Selectors
Selectors are pure functions that are used to get simple and complex pieces of state. They act as queries to your store and can make your life a lot easier. Instead of having to hold onto different filtered versions of data in your store, you can just use selectors.

For example, to get your current user, you’d set up a selector by first exporting this function:

```typescript
export const selectAuthUser = (state: AuthState) => state.user;
```

You typically put these pure functions in the same file as your feature’s reducer functions and then register both the feature selectors and individual state piece selectors in the `index.ts` file where you register your reducers with NgRx. For example:

```typescript
// state.index.ts
// Feature selectors get registered first.
export const selectAuthState = createFeatureSelector<fromAuth.State>('auth');

// Then you can use that feature selector to select a piece of state.
export const selectAuthUser = createSelector(
  selectAuthState,
  fromAuth.selectUser, // the pure function that returns the user from our auth state
);
```

You can then easily use that selector in your component or your route guards:

```typescript
this.user = this.store.pipe(select(fromAuth.selectAuthUser));
```

To learn more, check out [this talk from ng-conf 2018 on selectors by David East and Todd Motto](https://www.youtube.com/watch?v=Y4McLi9scfc).

### Effects
Effects (used with the library [`@ngrx/effects`](https://github.com/ngrx/platform/tree/master/modules/effects)) are where you connect actions to side effects or external requests. Effects can listen for actions, then perform a side effect. That effect can then (optionally) dispatch a new action to the store. For example, if you need to load data from an API, you might dispatch a `LOAD_DATA` action. That action could trigger an effect that calls your API and then dispatches either a `LOAD_DATA_SUCCESS` or `LOAD_DATA_FAILURE` action to handle the result. Here’s how that looks:

```typescript
@Effect()
loadData$ = this.actions$.ofType(LOAD_DATA)
  .pipe(switchMap(() => {
    return this.apiService.getData().pipe(
      map(data => new LOAD_DATA_SUCCESS(data)),
      catchError(error => of(new LOAD_DATA_FAILURE(error)))
    );
});
```

You can see that the effect is listening for the `LOAD_DATA` action, and then calls the `ApiService` to get the data and return a new action.

Using effects ensures that your reducers aren’t containing too many implementation details and that your state isn’t full of temporary clutter. For more information, check out [this tutorial from Todd Motto on using effects](https://www.youtube.com/watch?v=xkUOQeGqIGI).

### NgRx Schematics
One of the most common complaints about NgRx is the amount of repetitive code that it takes to set up an application and add new features (never say "boilerplate" around NgRx Core Team member [Brandon Roberts](https://twitter.com/brandontroberts)!). Part of this is due to the NgRx philosophy to focus on clarity over brevity, and to front-load the work of app architecture so that future feature additions are easy and straightforward. At the same time, there can be a lot of repetition in the code you write — adding a new reducer, set of actions, effects, and selectors for each new feature. Luckily, Angular CLI *schematics* are here to help.

Schematics for the Angular CLI are blueprints to generate new code quickly and are a huge time-saver. NgRx has its own set of schematics that you can take advantage of when writing your application. These schematics follow best practices and cut out lots of repetitive tasks. They also automatically register your feature states, wire up your effects, and integrate into NgModules. Awesome!

There are NgRx schematics for:

- [Action](https://github.com/ngrx/platform/blob/master/docs/schematics/action.md)
- [Container](https://github.com/ngrx/platform/blob/master/docs/schematics/container.md)
- [Effect](https://github.com/ngrx/platform/blob/master/docs/schematics/effect.md)
- [Entity](https://github.com/ngrx/platform/blob/master/docs/schematics/entity.md)
- [Feature](https://github.com/ngrx/platform/blob/master/docs/schematics/feature.md) (generate an action, reducer, and an effect and automatically wire them up to a module!)
- [Reducer](https://github.com/ngrx/platform/blob/master/docs/schematics/reducer.md)
- [Store](https://github.com/ngrx/platform/blob/master/docs/schematics/store.md)

To get started with schematics, first install them in your project:

```bash
npm install @ngrx/schematics --save-dev
```

Then, set the NgRx schematics as your defaults in your CLI configuration:

```bash
ng config cli.defaultCollection @ngrx/schematics
```

Once that’s done, you can simply run CLI commands to generate new NgRx items. For example, to generate the initial state for your application, you can run:

```bash
ng generate store --name State --root -m app
```

This will generate a store for you at the root of your application and register it in your `AppModule`. Pretty cool!

For more information on NgRx schematics, check out the [repository readme](https://github.com/ngrx/platform/blob/master/docs/schematics/README.md) and [this excellent ng-conf talk](https://www.youtube.com/watch?v=q3UcqG72Zl4&t=1031s) by Vitalii Bobrov.


NgRx Authentication Tutorial: Quick Intro

abdulazeez

I'm a software developer using JavaScript to implement every instance of life into software.

Software Developer and Student

Abdulazeez Adeshina

Managing state with the new React Context API is very easy. Learn what the differences with Redux are and how to use it in this practical tutorial.



**TL;DR:** The React Context API isn't a new thing on React's ecosystem. However, the React's `16.3.0` release [brought a lot of improvements to this API](https://auth0.com/blog/whats-new-in-react-16-3/). These improvements are so overwhelming that they greatly reduce the need for Redux and other advanced state management libraries. In this article, you will learn, through a practical tutorial, how the new React Context API replaces the need for Redux on small React applications.

<include src="TweetQuote" quoteText = "Learn how to migrate from Redux to the new React Context API in this practical tutorial."/>

## Quick Review on Redux

Before diving into the React Context API, we need to do a quick review on Redux, so we can compare both. [Redux is a JavaScript library that facilitates state management](https://redux.js.org). Redux is not tied to React itself. Developers from all around the world have been using Redux with popular JavaScript frontend frameworks such as _React_ and _Angular_.

To be clear, in this context, state management means handling changes that occur upon a particular event that occurs on a Single Page App (SPA). For example, events like the click of a button or an async message coming from the server can trigger changes to the app's state.

In Redux, particularly, there are a few things that you have to keep in mind:

1. The state of the entire app is stored in a single object (known as the source of truth).
2. To change the state, you need to dispatch `actions` that describes what needs to happen.
3. You cannot change properties of objects or make changes to existing arrays. In Redux, you must always return a new reference to a new object or a new array.

If you are not familiar with Redux and you want to learn more, please, check [this practical tutorial on Redux](https://auth0.com/blog/redux-practical-tutorial/).

## React Context API Introduction

The React Context API provides a way to pass data through the component tree without having to pass `props` down manually to every level. In React, data is often passed from a parent to its child component as a property.

Using the new React Context API depends on three main steps:

1. Passing the initial state to `React.createContext`. This function then returns an object with a `Provider` and a `Consumer`.
2. Using the `Provider` component at the top of the tree and making it accept a prop called `value`. This value can be anything!
3. Using the `Consumer` component anywhere below the Provider in the component tree to get a subset of the state.

As you can see, the concepts involved are actually not that different from Redux. The fact is, even Redux uses the React Context API underneath its public API. However, only recently the Context API reached a level of maturity high enough to be used in the wild.

## Creating a React App with Redux

As mentioned, the goal of this article is to show you how the new Context API can replace Redux for small apps. Therefore, you will start by creating a simple React app with Redux and, after that, you will learn how to remove this state management library so you can take advantage of the React Context API.

The sample application you will build is an app that handles a list of some popular foods and their origin. This app will also include a search functionality to enable users to filter the list based on some keyword.

In the end, you will have an app that looks like this:

### Project Requirements

As this article uses only React and some NPM libraries, you will need nothing else than Node.js and NPM installed in your development machine. If you don't have Node.js and NPM yet, check out the [official installation procedures](https://nodejs.org/en/download/) to install both.

After installing these dependencies, you will need to install the `create-react-app` tool. This tool helps developers getting started with React. So, to install it, open a terminal and run the following command:

```bash
npm i -g create-react-app
```

### Scaffolding the React App

With `create-react-app` installed, you will have to move to the directory where you want to put your project and execute the following command:

```bash
create-react-app redux-vs-context
```

After a few seconds, `create-react-app` will have finished creating your app. So, after that, you can move into the new directory created by this tool and install Redux:

```bash
# move into your project
cd redux-vs-context

# install Redux
npm i --save redux react-redux
```

> **Note:** `redux` is the main library and `react-redux` is a library that facilitates the interaction between React and Redux. In short, the latter acts as a proxy between React and Redux.

### Developing React Apps with Redux

Now that you have your React app structured and that you installed Redux, open your project in your preferred IDE. From there, you will create three files into the `src` directory:

- `foods.json`: This file will hold a static array of foods and their origin.
- `reducers.js`: This file will manage the state of the Redux version of your app.
- `actions.js`: This file that will hold the functions that will trigger changes in the state of the Redux version of your app.

So, to start, you can open the `foods.json` file and add the following content to it:

```json
[
  {
    "name": "Chinese Rice",
    "origin": "China",
    "continent": "Asia"
  },
  {
    "name": "Amala",
    "origin": "Nigeria",
    "continent": "Africa"
  },
  {
    "name": "Banku",
    "origin": "Ghana",
    "continent": "Africa"
  },
  {
    "name": "Pão de Queijo",
    "origin": "Brazil",
    "continent": "South America"
  },
  {
    "name": "Ewa Agoyin",
    "origin": "Nigeria",
    "continent": "Africa"
  }
]
```

As you can see, there is nothing special about this file. It is just an array of different food from different countries.

After defining the `foods.json` file, you can focus on defining your Redux store. To recap, the `store` is the place where you keep the single source of truth of the state of your app. So, open the `reducers.js` file and add the following code to it:

```js
import Food from './foods';

const initialState = {
  food: Food,
  searchTerm: '',
};

export default function reducer(state = initialState, action) {
  // switch between the action type
  switch (action.type) {
    case 'SEARCH_INPUT_CHANGED':
      const {searchTerm} = action.payload;
      return {
        ...state,
        searchTerm: searchTerm,
        food: searchTerm ? Food.filter(
          (food) => (food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1)
        ) : Food,
      };
    default:
      return state;
  }
}
```

In the code above, you can see that the `reducer` function receives two parameters: `state` and `action`. When you start your React application, this function will get the `initialState` defined right before it and, when you dispatch instances of an action, this function will get the current state (not the `initialState` anymore). Then, based on the contents of these actions, the `reducer` function will generate a new state for your app.

Next, you have to define what these actions are. Actually, to keep things simple, you will define a single action that will be triggered when users input a search term in your app. So, open the `actions.js` file and insert the following code into it:

```js
function searchTermChanged(searchTerm) {
  return {
    type: 'SEARCH_INPUT_CHANGED',
    payload: {searchTerm},
  };
}

export default {
  searchTermChanged,
};
```

With this `action` creator in place, the next thing you need to do is to wrap your `App` component into the `Provider` component that is available on `react-redux`. This provider is responsible for making your single source of truth (i.e., the `store`) to your React app.

To use this provider, first, you will create your app's `store` using the `initialState` defined in the `reducers.js` file. Then, you will pass this `store` to your `App` with the help of `Provider`. To accomplish these tasks, you will have to open the `index.js` file and replace its contents with:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import App from './App';

// Creating the store using the reducers info.
// That's because reducers are the building blocks of a Redux Store.
const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);
```

That's it! You just finished configuring Redux in your React app. Now, you have to implement the UI (User Interface), so your users can use the features implemented in this section.

### Building the React Interface

Now that you have the core of your application ready to go, you can focus on building your user interface. For that, open your `App.js` file and replace its contents with this:

```js
import React from 'react';
import {connect} from 'react-redux';
import actions from './actions';
import './App.css';

function App({food, searchTerm, searchTermChanged}) {
  return (
    <div>
      <div className="search">
        <input
          type="text"
          name="search"
          placeholder="Search"
          value={searchTerm}
          onChange={e => searchTermChanged(e.target.value)}
        />
      </div>
      <table>
        <thead>
        <tr>
          <th>Name</th>
          <th>Origin</th>
          <th>Continent</th>
        </tr>
        </thead>
        <tbody>
        {food.map(theFood => (
          <tr key={theFood.name}>
            <td>{theFood.name}</td>
            <td>{theFood.origin}</td>
            <td>{theFood.continent}</td>
          </tr>
        ))}
        </tbody>
      </table>
    </div>
  );
}

export default connect(store => store, actions)(App);
```

For those not used to Redux, the only thing that they might not be familiar with is the `connect` function used to encapsulate the `App` component. This function is actually a [High Order Component (HOC)](https://reactjs.org/docs/higher-order-components.html) that acts as the glue between your app and Redux.

If you run your app now, you will be able to use it in your browser:

```bash
npm run start
```

However, as you can see, the app right now is ugly. So, to make it look a little bit better, you can open the `App.css` file and replace its contents with: 

```css
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  line-height: 25px;
}

th {
  background-color: #eee;
}

td, th {
  text-align: center;
}

td:first-child {
  text-align: left;
}

input {
  min-width: 300px;
  border: 1px solid #999;
  border-radius: 2px;
  line-height: 25px;
}
```

![React app implemented with Redux](https://images.ctfassets.net/23aumh6u8s0i/1u1ImuQtARWbJa1nRYqAhW/65c6f6e215d597668ca8d246cd78e204/react-app-with-redux)

Done! You now have a basic React and Redux app and can start learning about how to migrate to the Context API.

## Implementing React Apps with React Context API

In this section, you will learn how to migrate the Redux version of your app to the React Context API.

Fortunately, as you will see, you won't really need to do a lot of refactoring to switch between Redux and the Context API.

For starter, you will have to remove every trace of Redux from your app. For that, go to your terminal and remove both the `redux` and `react-redux` libraries:

```bash
npm rm redux react-redux
```

After that, you can remove the `import` statements that reference these libraries. So, open the `App.js` file and remove these lines:

```js
import {connect} from 'react-redux';
import actions from './actions';
```

Then, still in this file, replace the last line (the one that starts with `export default`) with this:

```js
export default App;
```

With these changes in place, you can rewrite your app with the Context API.

### Migrating from Redux to React Context API

To convert the previous app from a Redux powered app to using the Context API, you will need a context to store the app's data (this context will replace the Redux Store). Also, you will need a `Context.Provider` component which will have a `state`, a `props`, and a normal React component lifecycle.

Therefore, you will need to create a `providers.js` file in the `src` directory and add the following code to it:

```js

import React from 'react';
import Food from './foods';

const DEFAULT_STATE = { allFood: Food, searchTerm: '' };

export const ThemeContext = React.createContext(DEFAULT_STATE);

export default class Provider extends React.Component {
  state = DEFAULT_STATE;
  searchTermChanged = searchTerm => {
    this.setState({searchTerm});
  };

  render() {
    return (
      <ThemeContext.Provider value={{
        ...this.state,
        searchTermChanged: this.searchTermChanged,
      }}> {this.props.children} </ThemeContext.Provider>);
  }
}

```

The `Provider` class defined in the code above is responsible for encapsulating other components inside the `ThemeContext.Provider`. By doing that, you enable these components to have access to your app's state and to the `searchTermChanged` function that provides a way to change this state.

To consume these values later in the component tree, you will need to initiate a `ThemeContext.Consumer` component. This component will need a render function that will receive the above value `props` as arguments to use at will.

So, next, you need to create a filed called `consumer.js` in the `src` directory and write the following code into it:

```js

import React from 'react';
import {ThemeContext} from './providers';

export default class Consumer extends React.Component {
  render() {
    const {children} = this.props;

    return (
      <ThemeContext.Consumer>
        {({allFood, searchTerm, searchTermChanged}) => {
          const food = searchTerm
            ? allFood.filter(
              food =>
                food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
            )
            : allFood;

          return React.Children.map(children, child =>
            React.cloneElement(child, {
              food,
              searchTerm,
              searchTermChanged,
            })
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}

```

Now, to finalize the migration, you will open your `index.js` file, and inside the `render()` function, wrap the `App` component with the `Consumer` component. Also, you will wrap the `Consumer` inside the `Provider` component. Exactly as shown here:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Provider from './providers';
import Consumer from './consumer';
import App from './App';

ReactDOM.render(
  <Provider>
    <Consumer>
      <App />
    </Consumer>
  </Provider>,
  document.getElementById('root')
);
```

Done! You just finished migrating from Redux to the React Context API. If you run your app now, you will see that the whole thing is working just like before. The difference now is that your app is not using Redux more.

<include src="TweetQuote" quoteText = "The new React Context API s a great alternative to Redux in small React applications."/>

<include src="asides/React" />

## Conclusion

Redux is an **advanced** state management library that should be used when building large scale React apps. The Context API, on the other hand, can be used in small-scale React apps where byte-sized changes are made. By using the Context API, you do not have to write a lot of code such as `reducers`, `actions`, etc. to work out the logic exhibited by state changes. 


React Context API: Managing State with Ease

In this Redis tutorial, learn how to install and setup Redis as well as commands to write, read, update, and delete data from the store using its core data structures.

Introduction to Redis: Installation, CLI Commands, and Data Types

Daniel Krzyczkowski

Founder of Tech Mind Factory. Works as a Cloud & Identity Engineer, helping organizations design, build, and deploy modern identity solutions and secure cloud applications.



Tech Mind Factory

In this tutorial, learn how to use Xamarin Forms and Microsoft Azure Functions to develop mobile apps that are supported by serverless functions.

Developing Mobile Apps with Xamarin Forms and Azure Functions

indermohan-singh

Indian expat living and working in Vienna, Austria. Besides programming,  I love Music. I sing Bollywood and Indian Classical Music. Perfect by Ed Sheeran is my Go to song for Karaoke. I also like to run and in the process of running a marathon. I am also the author of "Ionic 2 Blueprints" and co-authored "Ionic Cookbook". Apart from that, I am a GuestAuthor at Auth0 and LogRocket Blogs.

Mobile Developer

Indermohan Singh

Learn how to develop modern mobile apps with Angular, Ionic, RxJS and NgRx. Follow this tutorial to create a mobile audio player app.

Building An Audio Player App with Ionic, Angular, RxJS, and NgRx

A practical tutorial showing how to setup and develop a modern Web application based on ASP.NET Core 2.0 and React.

Developing Web Apps with ASP.NET Core 2.0 and React - Part 3

greg-holmes

I am a Senior Software Engineer for an online estate agent (Housesimple). I am a backend web developer for an online estate agent in Colchester, England. I have been a professional developer since 2011, having worked previously for what used to be a well known and active VPN company, HideMyAss. Aside from web development, some technology that has caught my attention over the years has been the Raspberry Pi.

Greg Holmes

Learn how to create and deploy a secure blog engine with Symfony.

Symfony Tutorial: Building a Blog (Part 3)

Let's create a secure blog engine with Symfony.

Symfony Tutorial: Building a Blog (Part 2)

Symfony Tutorial: Building a Blog (Part 1)

Developing Web Apps with ASP.NET Core 2.0 and React - Part 2



**TL;DR:** In this series of posts, starting with this one, you will build a Web application based on ASP.NET Core 2.0 and React. To solve the identity management feature, you will integrate this stack with [Auth0](https://auth0.com/). In this first part of the series, you are going to use ASP.NET Core 2.0 to develop the APIs of your application. [The final code can be found in this GitHub repository](https://github.com/andychiare/netcore2-auth0).

<include src="TweetQuote" quoteText="Learn how easy it is to create a modern web application with ASP.NET Core 2.0 and React"/>

---

## Setting Up the ASP.NET Core Application

The application that you are going to implement will allow users to browse an online bookstore. Following [the API-First Development approach](https://dzone.com/articles/an-api-first-development-approach-1), you will start building your application by creating the ASP.NET Core 2.0 Web API. To do that, you have two alternatives: first, you can create your application from Visual Studio; second, you can create your application from the command line.

### Creating the Project with Visual Studio

If you are using Visual Studio, you can create the project by choosing *ASP.NET Core Web App* project template, as shown in the following picture:

![Creating an ASP.NET Core Web App with Visual Studio](https://images.ctfassets.net/23aumh6u8s0i/3VdEYdUZjg1dZ8CjKW7FFy/e6dacc131f59c2ab0459cb72a6addb6a/creating-project)

> If you don't have Visual Studio, [you can download it for free here](https://www.visualstudio.com/free-developer-offers/).

After selecting the *ASP.NET Core Web App* project template, you need to specify the type of ASP.NET application you want to build. In your case, you will select the *Web API* application type, as in the following picture:

![Creating ASP.NET Core 2 Web API](https://images.ctfassets.net/23aumh6u8s0i/fSpJBnx1JsWrguTiNfcyh/c5ccb832f295f9cd27184e7b8c0ff926/choosing-web-api)

Make sure you **do not** select any type of authentication, since you will integrate your application with [Auth0](https://auth0.com/).

### Creating the Project from the Command Line

If you prefer to use the command line, you can create your application by typing the following command:

```shell
dotnet new webapi -n API-Auth0
```

This will create an ASP.NET Web API directory, with your project inside, named `API-Auth0` in the current directory.

Whether you use Visual Studio or the command line, you will get the same result. That is, after following these steps, you will get a basic ASP.NET Core 2 Web API application.

### Creating the Books Controller on ASP.NET Core 2.0

Now that you have your project created, you can start refactoring it to provide the desired functionality. The first thing you will do is to remove the `ValuesController.cs` file under the `Controllers` directory. You won't need this controller in your application.

After removing it, you can create the `BooksController.cs` file, in this same directory, with the following code:

```csharp
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace APIAuth0.Controllers
{
    [Route("api/[controller]")]
    public class BooksController : Controller
    {
        [HttpGet]
        public IEnumerable<Book> Get()
        {
            var currentUser = HttpContext.User;
            var resultBookList = new Book[] {
                new Book { Author = "Ray Bradbury", Title = "Fahrenheit 451", AgeRestriction = false },
                new Book { Author = "Gabriel García Márquez", Title = "One Hundred years of Solitude", AgeRestriction = false },
                new Book { Author = "George Orwell", Title = "1984", AgeRestriction = false },
                new Book { Author = "Anais Nin", Title = "Delta of Venus", AgeRestriction = true }
            };

            return resultBookList;
        }

        public class Book
        {
            public string Author { get; set; }
            public string Title { get; set; }
            public bool AgeRestriction { get; set; }
        }
    }
}
```

Here, you have defined a Web API returning a list of books. For simplicity, you are storing the list of books in an array. In a real-world case, however, this list should be stored in a persistent database. The Web API's URL will be `/api/books` and any HTTP client can get the list of books by issuing a simple HTTP GET request:

```bash
# run the application in the background
dotnet run &

# issue a get request
curl -D - http://localhost:5000/api/books
```

Of course, you don't want that any client could access your bookstore without some proper authentication process. You want that only authorized clients could get the list of books managed by your application. That's where [Auth0](https://auth0.com/) can help you: it provides a set of identity solutions that integrate security into your application.

## Integrating ASP.NET Core 2.0 with Auth0

As the first step, you will need an Auth0 account. If don't have one yet, you can sign up for a <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">free account here</a>.

During the registration process, you will need to provide the *tenant domain name*, the service hosting region, and a few other details about your company and yourself. The domain name is quite important since it will determine the root part of the API endpoints exposed by [Auth0](https://auth0.com/) to your authorized clients. Once you provide a domain name, you cannot change it anymore. However, you can create as many tenants as needed. Once the registration phase is completed, [you can access your Auth0 dashboard](https://manage.auth0.com/).

### Creating an Auth0 API

As you are creating a backend API that enables users to browse an online bookstore, you will need to create an [Auth0 API](https://auth0.com/docs/apis) to represent your backend. To do that, head to [the APIs section of the Auth0 dashboard](https://manage.auth0.com/#/apis) and click on the *Create API* button. After that, the dashboard will ask you for three things:

- the *Name* of your API, you can set it to *Online Bookstore*;
- an *Identifier* for your API, you can set it to `https://onlinebookstore.mycompany.com`;
- and the *Signing Algorithm*, you can choose *RS256* in this field;

![Securing an online bookstore with Auth0](https://images.ctfassets.net/23aumh6u8s0i/3VAKT9b1bo3bmn6AH17tqu/279ae8cc498c576196d6d575d9ea6a33/creating-an-auth0-api)

When you complete this form, you can hit the *Create* button.

### Creating an Auth0 Application

Your goal is to control your API access by authorizing only trusted clients. To do that, you will also need an application configuration on Auth0. Usually, you would need to create a new application to represent your front-end app. The type of the front-end app would help you decide the type of the Auth0 Application to create. However, as in this first part you will not create the front-end yet, you can use the application that was automatically created for your Auth0 API.

If you chose *Online Bookstore* as the name of your API, then [you will see an application called *Online Bookstore (Test Application)* in the Application section of the Auth0 dashboard](https://manage.auth0.com/#/applications). Click on this application and head over to the *Settings* tab. In this tab, you will see three properties that you will need:

- the *Domain* of your Auth0 tenant;
- the *Client ID* key;
- and the *Client Secret* key;

You will use these values soon enough.

### Configuring Auth0 on ASP.NET Core Apps

After creating the Auth0 API, you will have to modify your application in order to hand the identity management over to [Auth0](https://auth0.com/). As a first step, you will need to add an Auth0 section in the `appsettings.json` configuration file, as shown below:

```json
{
  "Logging": {
    "IncludeScopes": false,
    "Debug": {
      "LogLevel": {
        "Default": "Warning"
      }
    },
    "Console": {
      "LogLevel": {
        "Default": "Warning"
      }
    }
  },
  "Auth0": {
    "Authority": "<YOUR_AUTH0_DOMAIN>",
    "Audience": "<YOUR_AUTH0_AUDIENCE>"
  }
}
```

You will have to replace both `<YOUR_AUTH0_DOMAIN>` and `<YOUR_AUTH0_AUDIENCE>` with the values that you have defined in the previous sections. For example, if you defined your tenant domain to `https://dotnet2-react.auth0.com` that's what you will use in the place of the `<YOUR_AUTH0_DOMAIN>` placeholder. In the place of the `<YOUR_AUTH0_AUDIENCE>` placeholder, you will use the value that you defined for the *Identifier* of your Auth0 API (e.g. `https://onlinebookstore.mycompany.com`).

Then, you will have to change the `ConfigureServices()` method in the `Startup.cs` file, as follows:

```csharp
using Microsoft.AspNetCore.Authentication.JwtBearer;

// ... other using statements
// ... namespace definition
// ... class definition
// ... etc

public void ConfigureServices(IServiceCollection services) {
	services.AddAuthentication(options =>
	{
		options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
		options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
	}).AddJwtBearer(options =>
	{
		options.Authority = Configuration["Auth0:Authority"];
		options.Audience = Configuration["Auth0:Audience"];
	});

	services.AddMvc();
}

// ... etc
```

As you can see, you have added the authentication service by specifying the [JWT](https://jwt.io/) bearer scheme and providing the authority and audience values taken from the `appsetting.json` configuration file.

After that, you will need to add an invocation to `app.UseAuthentication()` in the body of `Configure()` method, as follows:

```csharp
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	if (env.IsDevelopment())
	{
		app.UseDeveloperExceptionPage();
	}

	app.UseAuthentication();

	app.UseMvc();
}
```

After enabling authentication support, you can block public access to your API by adding the `Authorize` attribute to the endpoint in the `BooksController.cs` file:

```csharp
[HttpGet, Authorize]
public IEnumerable<Book> Get()
{
	var currentUser = HttpContext.User;
	var resultBookList = new Book[] {
		new Book { Author = "Ray Bradbury", Title = "Fahrenheit 451", AgeRestriction = false },
		new Book { Author = "Gabriel García Márquez", Title = "One Hundred years of Solitude", AgeRestriction = false },
		new Book { Author = "George Orwell", Title = "1984", AgeRestriction = false },
		new Book { Author = "Anais Nin", Title = "Delta of Venus", AgeRestriction = true }
	};

	return resultBookList;
}
```

Now, if you try to access the `/api/books` endpoint, you will get a 401 HTTP status code (which means that you are not authorized). You can verify it by using any HTTP client, such as a browser, [curl](https://curl.haxx.se/), or [Postman](https://www.getpostman.com/).

```bash
# run the application in the background
dotnet run &

# issue a get request
curl -D - http://localhost:5000/api/books
```

The last command will generate a response like the following one:

```bash
# HTTP/1.1 401 Unauthorized
# Date: Wed, 24 Jan 2018 16:28:09 GMT
# Server: Kestrel
# Content-Length: 0
# WWW-Authenticate: Bearer
```

### Getting an Access Token

Now that you have secured your endpoints with Auth0, you will learn how to authenticate a machine to machine application to be able to get the list of books again. You can use any HTTP client, but in this section, you will see how to achieve that by using `curl`.

The first step is to get an authorization token from Auth0. You can do that by issuing a POST request to [the `/oauth/token` endpoint](https://auth0.com/docs/api/authentication#authorization-code) of your Auth0 domain, as follows:

```bash
AUTH0_CLIENT_ID=<YOUR_AUTH0_CLIENT_ID>
AUTH0_CLIENT_SECRET=<YOUR_AUTH0_CLIENT_SECRET>
AUTH0_AUDIENCE=<YOUR_AUTH0_AUDIENCE>
AUTH0_DOMAIN=<YOUR_AUTH0_DOMAIN>

curl -X POST -H 'content-type: application/json' -d '{
    "client_id": "'$AUTH0_CLIENT_ID'",
    "client_secret": "'$AUTH0_CLIENT_SECRET'",
    "audience": "'$AUTH0_AUDIENCE'",
    "grant_type":"client_credentials"
}' https://$AUTH0_DOMAIN/oauth/token
```

Note that you will have to replace `<YOUR_AUTH0_CLIENT_ID>`, `<YOUR_AUTH0_CLIENT_SECRET>`, `<YOUR_AUTH0_AUDIENCE>`, and `<YOUR_AUTH0_DOMAIN>` in the commands above with the values corresponding to the Auth0 API and Application that you have created before.

The response to this request will be something similar to the following:

```json
{
    "access_token": "eyJ0eXAiO...pJmNFPA",
    "expires_in": 86400,
    "token_type": "Bearer"
}
```

Now, you can use the `access_token` you have received from [Auth0](https://auth0.com/) to request the list of books, as follows:

```bash
ACCESS_TOKEN=eyJ0eXAiO...pJmNFPA

curl -H 'Authorization: Bearer '$ACCESS_TOKEN -D - http://localhost:5000/api/books
```

This request will generate the following response:

```bash
# HTTP/1.1 200 OK
# Date: Wed, 24 Jan 2018 17:35:26 GMT
# Content-Type: application/json; charset=utf-8
# Server: Kestrel
# Transfer-Encoding: chunked

# [{"author":"Ray Bradbury","title":"Fahrenheit 451","ageRestriction":false},{"author":"Gabriel García Márquez","title":"One Hundred years of Solitude","ageRestriction":false},{"author":"George Orwell","title":"1984","ageRestriction":false},{"author":"Anais Nin","title":"Delta of Venus","ageRestriction":true}]
```

<include src="TweetQuote" quoteText="Adding identity management to an ASP.NET Core 2.0 is really easy with Auth0."/>

### Creating Integration Tests as a Machine to Machine Applications

The test performed with `curl` in the previous section should only verify that the Auth0 configuration data and that the API implemented by our application work well together. This is a test performed on the fly that should not be persisted. In fact, the type of application that Auth0 automatically created was _Machine to Machine Application_. This type of application is intended for a server to server or unattended interaction. You **must never** store the *Client Secret* on the client side, since it will compromise the application security.

The implementation of the integration test may be a case where you can use the *Client Secret* since this information will not be exposed to the client but remains in the development environment.

Now, it's time to write an integration test that verifies that a request to obtain the book list without an access token fails:

```csharp
[Fact]
public async Task UnAuthorizedAccess()
{
    var response = await _client.GetAsync("/api/books");

    Assert.Equal(HttpStatusCode.Unauthorized, response.StatusCode);
}
```

This simple test verifies that such a request will receive a 401 Unauthorized HTTP status code. After that, you can verify that the configuration data you put in the `appsetting.json` file allows you to get a valid access token:

```csharp

[Fact]
public async Task TestGetToken()
{
    var auth0Client = new HttpClient();
    var bodyString = $@"{{""client_id"":""{_configuration["Auth0:ClientId"]}"", ""client_secret"":""{_configuration["Auth0:ClientSecret"]}"", ""audience"":""{_configuration["Auth0:Audience"]}"", ""grant_type"":""client_credentials""}}";
    var response = await auth0Client.PostAsync($"{_configuration["Auth0:Authority"]}oauth/token", new StringContent(bodyString, Encoding.UTF8, "application/json"));

    Assert.Equal(HttpStatusCode.OK, response.StatusCode);

    var responseString = await response.Content.ReadAsStringAsync();
    var responseJson = JObject.Parse(responseString);
    Assert.NotNull((string)responseJson["access_token"]);
    Assert.Equal("Bearer", (string)responseJson["token_type"]);
}

```

Here, you have replicated through the code the same request you made via `curl`. The `Assert` clauses just verify that a non-null token has been received and that the type of token is *Bearer*.

The last test ensures that a request with a valid access token will get the list of books returned by the API:

```csharp
[Fact]
public async Task GetBooks()
{
    var token = await GetToken();

    var requestMessage = new HttpRequestMessage(HttpMethod.Get, "/api/books");
    requestMessage.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);
    var booksResponse = await _client.SendAsync(requestMessage);

    Assert.Equal(HttpStatusCode.OK, booksResponse.StatusCode);

    var bookResponseString = await booksResponse.Content.ReadAsStringAsync();
    var bookResponseJson = JArray.Parse(bookResponseString);
    Assert.Equal(4, bookResponseJson.Count);
}
```

This code uses a method called `GetToken()` that requests a valid token to [Auth0](https://auth0.com/) authentication endpoint:

```csharp

public async Task<string> GetToken()
{
    var auth0Client = new HttpClient();
    string token = "";
    var bodyString = $@"{{""client_id"":""{_configuration["Auth0:ClientId"]}"", ""client_secret"":""{_configuration["Auth0:ClientSecret"]}"", ""audience"":""{_configuration["Auth0:Audience"]}"", ""grant_type"":""client_credentials""}}";
    var response = await auth0Client.PostAsync($"{_configuration["Auth0:Authority"]}oauth/token", new StringContent(bodyString, Encoding.UTF8, "application/json"));

    if (response.IsSuccessStatusCode)
    {
        var responseString = await response.Content.ReadAsStringAsync();
        var responseJson = JObject.Parse(responseString);
        token = (string)responseJson["access_token"];

    }

    return token;
}

```

This test completes the validation of your ASP.NET Core 2.0 application with [Auth0](https://auth0.com/). If needed, you can download the full source code of the application from [GitHub](https://github.com/andychiare/netcore2-auth0).

## Summary

In this article, you have built an ASP.NET Core 2 Web API application and you have integrated it with Auth0 in order to expose the API only to trusted clients.

This is the first step in a series of articles that will show how to build a complete modern application. This application will be based on the ASP.NET Core API that you have just created and in a React Single Page Application. [In the next article](https://auth0.com/blog/developing-web-apps-with-asp-dot-net-core-2-dot-0-and-react-part-2/), you will build this Single Page Application to allow users to browse the bookstore. Stay tuned.


Developing Web Apps with ASP.NET Core 2.0 and React - Part 1

Learn, through a practical tutorial, what tools we can leverage to develop and publish high-quality NPM packages.

Developing and Publishing an NPM Package

956290?s=200

R&D Content Engineer

Luke Oliff

You can't escape Phoenix if you're looking for a good framework to build on when using Elixir.

Elixir & Phoenix Tutorial: Build an Authenticated App

A practical tutorial showing how to use JSON Web Tokens in ASP.NET Core 2 applications.

Securing ASP.NET Core 2.0 Applications with JWTs

A practical tutorial that teaches Redux through examples.



**TL;DR:** Actually, the idea is to create an article that is not too long at all (TL;DR stands for _Too Long; Didn't Read_ 😊). However, to summarize in a few words, the idea here is to show through practical, short examples how Redux works and what are its main pieces. To find the final code that we are going to create in this article, please check [this GitHub repository](https://github.com/auth0-blog/redux-in-action).

## What is Redux

Mostly used with React, Redux is a _storage facility_ that helps JavaScript applications to _manage state_. Note that I started the introductory sentence with "Mostly used". What I mean is that we do not have to use Redux with React. We don't even need a browser to use Redux. We can use it to control the state of a Node.js backend application, for example.

The biggest advantage of Redux is that this facility works as the single source of truth for our data. That is, whenever we want to know the state of our application, we have to look into a single place, the Redux Store. Another advantage of Redux, as we will see in the next section, is that to manage the state, we have only to deal with simple objects and pure functions. Redux does not rely on fancy, extensive APIs. It is quite the opposite actually.

<include src="TweetQuote" quoteText="Redux is as simple as it gets."/>

## Learning Redux

To learn how to properly use Redux, we have to understand three basic concepts of this library. The first one is called _store_. When using Redux to manage our state, we let it keep an updated version of this state in the store. This is the main purpose of this piece of Redux. The store exists to hold (store) the current state of our data and to become the single source of truth.

The second concept is called _reducer_. Reducer is nothing but a [pure function](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#purity) that gets our app's current state and generates a new state based on an _action_. Actions are the third concept that we are interested in. To define an action to be applied to our state, we simply create an object with a `type` and any arbitrary number (`0..N`) of properties.

![Redux data flow.µ](https://images.ctfassets.net/23aumh6u8s0i/6V7dWUVqhqbAdRIFCVeUlO/023c49381612d3641145410e2b2dbde7/redux-graph)

For example, we can have as the current state a simple JavaScript object that contains a person’s name. To change this state (object), we use a reducer that, based on an action, updates the person with arbitrary data. The following code snippet illustrates these concepts.

```js
const BIRTHDAY_UPDATE = 'BIRTHDAY_UPDATE';
const initialState = {name: 'Bruno Krebs'};

function reducer(state, action) {
  const {birthday} = action;
  switch (action.type) {
    case BIRTHDAY_UPDATE:
      return {
        ...state,
        birthday
      };
    default:
      return state;
  }
}

const updateAction = {
  type: BIRTHDAY_UPDATE,
  birthday: new Date(1984, 10, 20)
};

const newState = reducer(initialState, updateAction);

console.assert(initialState.birthday === undefined, 'Initial state must not be changed');

console.assert(
  newState.birthday !== undefined &&
  newState.birthday.getTime() === new Date(1984, 10, 20).getTime(),
  'New state must contain 1984/10/20 as the birthday'
);
```

> Note that the [spread operator (`…state`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) used in the example above is a feature recently introduced to JavaScript and might not be available on all environments. For example, it is [not available on Node.js prior to version `8.2.1`](http://node.green/). Therefore, we must have a Node.js newer than `8.2.1` or we need to run this in a browser compatible with this feature.

In the snippet exhibited, we can see that we use the `initialState` to generate a `newState`. This new state is the product of calling the `reducer` function with the `updateAction` object and the `initialState`. After passing the state and the action to the reducer, we get a new state where we can still find the name of the person, and the new `birthday` property correctly applied.

Although simple, the code snippet used above shows another concept that is quite important when using Redux. The state **does not** change. What happens is that we have to generate a new state (or return the same) when using Redux. The pros of creating new states instead of updating the current one is that, by following this paradigm, we enable [traceability](https://en.wikipedia.org/wiki/Traceability) in our application's state. By enabling traceability, we also enable other great features like the possibility to [time travel](https://github.com/gaearon/redux-devtools).

After understanding these three concepts (well, four with state immutability), we are ready to start using Redux in practice. In the following sections, we are going to create a small Node.js script that uses Redux to manage state.

## Using Redux

You might have noticed that we haven't used Redux in the previous section. A great characteristic of Redux is that it relies on simple concepts and structures. As we will see, introducing Redux to manage states in apps is easy. The Redux library itself is quite small, have a great performance, and is really intuitive.

To keep things organized, let's create a new Node.js project, and add actions and reducers to it. In a terminal, let's issue the following commands:

```bash
# create a dir to our project
mkdir redux-node

# change working directory to it
cd redux-node

# initialize the directory as a NPM project
npm init -y

# create the source folder
mkdir src

# create files for the main app, actions, and reducers
touch src/index.js src/actions.js src/reducers.js
```

These commands will give us a brand new project with the basic structure that we will need. To makes our lives easier and before proceeding with the next steps, let's open this project on an IDE (like WebStorm or Visual Studio Code).

### Creating Redux Actions

Now, let's open the `src/actions.js` file and add the following action creators and action types to it:

```js
// action types
export const ADD_EXPENSE = 'ADD_EXPENSE';
export const REMOVE_EXPENSE = 'REMOVE_EXPENSE';

// action creators
export const addExpense = expense => ({
  type: ADD_EXPENSE,
  expense
});

export const removeExpense = expense => ({
  type: REMOVE_EXPENSE,
  expense
});
```

These action creators are quite simple. They simply returns objects that contain `type`, to indicate if it is a removal or an addition, and an `expense` as the payload. We won't invest time creating automated tests to these action creators, as they are trivial.

### Creating Redux Reducers

We are going to add the business logic of our tutorial app in the reducer that we are going to create in this section. This reducer will have a `switch` statement that, based on an action, will trigger the proper function to generate the new state. Let's open the `src/reducers.js` file and add the following reducer definition to it:

```js
import {ADD_EXPENSE, REMOVE_EXPENSE} from './actions';

export default expenses;

export const initialState = {
  expenses: [],
  balance: 0
};

function expenses(state = initialState, action = {}) {
  switch (action.type) {
    case ADD_EXPENSE:
      return addExpense(state, action.expense);
    case REMOVE_EXPENSE:
      return removeExpense(state, action.expense);
    default:
      return state;
  }
}

function addExpense(state, expense) {
  return Object.assign({}, state, {
    expenses: [...state.expenses, expense],
    balance: state.balance + expense.amount
  });
}

function removeExpense(state, expense) {
  const persistedExpense = state.expenses.find(item => item.id === expense.id);

  return Object.assign({}, state, {
    expenses: state.expenses.filter(item => item.id !== expense.id),
    balance: state.balance - persistedExpense.amount
  });
}
```

To decide exactly what function to call (`addExpense` or `removeExpense`), the reducer created by this file (`expenses`) compares the `action.type` with both `ADD_EXPENSE` and `REMOVE_EXPENSE` constants. After identifying the correct type, it triggers the proper function passing the current `state` of the application and the `expense` in question.

### Testing Redux Reducers with Jest

It is easy to create an automated test to validate the behavior of this reducer. As reducers are pure functions, we don't need to mock anything. We just need to generate some samples of expenses and actions, trigger our reducer with them, and check the generated output. Let's install the [`jest`](https://facebook.github.io/jest/) test runner and [`babel`](https://babeljs.io/) to help us testing the reducer.

```bash
npm i -D jest babel-jest babel-preset-es2015
```

After that, let's create a file called `.babelrc` in the project root (i.e., alongside with the `package.json` file), and configure Babel to use the `es2015` preset:

```json
{
  "presets": ["es2015"]
}
```

Also, let's update the `scripts` property in the `package.json` file so we can easily run `jest`:

```js
{
  // ...
  "scripts": {
    "test": "jest",
    "test:watch": "npm test -- --watch"
  },
  // ...
}
```

With these scripts in place, we can create the test suite that will validate the `expenses` reducer. Let's create a file called `reducers.test.js` alongside with `reducers.js` and define two tests in a new test suite, as follows:

```js
import {addExpense, removeExpense} from './actions';
import expenses, {initialState} from './reducers';

describe('reducers', () => {
  it('should be able to add expenses', () => {
    const stateStep1 = expenses(initialState, addExpense({
      id: 1,
      amount: 20
    }));
    expect(stateStep1.expenses.length).toEqual(1);
    expect(stateStep1.balance).toEqual(20);

    const stateStep2 = expenses(stateStep1, addExpense({
      id: 2,
      amount: 10
    }));
    expect(stateStep2.expenses.length).toEqual(2);
    expect(stateStep2.balance).toEqual(30);
  });

  it('should be able to remove expenses', () => {
    const stateStep1 = expenses(initialState, addExpense({
      id: 1,
      amount: 55
    }));
    expect(stateStep1.expenses.length).toEqual(1);
    expect(stateStep1.balance).toEqual(55);

    const stateStep2 = expenses(stateStep1, addExpense({
      id: 2,
      amount: 36
    }));
    expect(stateStep2.expenses.length).toEqual(2);
    expect(stateStep2.balance).toEqual(91);

    const stateStep3 = expenses(stateStep2, removeExpense({
      id: 1
    }));
    expect(stateStep3.expenses.length).toEqual(1);
    expect(stateStep3.balance).toEqual(36);
  });

  it('should return the default state', () => {
    expect(expenses()).toEqual(initialState);
  });
});
```

The test suite and its tests are a little bit verbose, but they are easy to understand. We start by importing the `addExpense` and `removeExpense` action creators. After that, we import the `expenses` reducer from its source alongside with the `initialState`. Lastly, we use the `describe` function to define the test suite and the `it` function to create three tests.

The first two tests are pretty similar. Therefore, let's analyze the first one to understand how they work. The first step executed by this test calls the `expenses` reducer passing to it the `initialState` and the `addExpense` action creator. As the parameter of this action creator, we pass an expense with `id = 1` and `amount = 20`. We then check if the result of the `expenses` execution, the `stateStep1`, contains a single expense and if the `balance` is equal 20. After that, we execute a similar process that validates if the `expenses` reducer accepts a new expense and updates the `balance` accordingly. The difference in the second test is that, after adding two expenses, we use the reducer to remove an expense.

Let's run the `npm test` command to verify our implementation. If we followed the steps above correctly, we should get an output similar this:

```
> redux-node@1.0.0 test /Users/brunokrebs/git/tmp/redux-node
> jest

 PASS  src/reducers.test.js
  reducers
    ✓ should be able to add expenses (3ms)
    ✓ should be able to remove expenses (1ms)
    ✓ should return the default state

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.834s, estimated 1s
Ran all test suites.
```

### Defining a Redux Store

So far, we haven't used the central piece of Redux, the Redux Store. We have only defined two functions to create Redux Actions and a Redux Reducer. Actually, we haven't even installed and used Redux anyhow. So, the first thing we need to do next is to install Redux. To do so, let's issue the following command in our terminal:

```bash
# from the project root
npm i redux
```

Now, it's time to create a Redux Store and put our reducer and our action creators to work. As we want to use modern JavaScript code, let's install `babel-cli` and a plugin:

```bash
npm i -D babel-cli
```

The plugin simply guarantees that we can use the spread operator with Babel. After installing both dependencies, let's open the `index.js` file and add the following code:

```js
import {createStore} from 'redux';
import {addExpense, removeExpense} from './actions';
import expenses from './reducers';

const store = createStore(expenses);

store.dispatch(addExpense({
  id: 1,
  amount: 45
}));

store.dispatch(addExpense({
  id: 2,
  amount: 20
}));

store.dispatch(addExpense({
  id: 3,
  amount: 30
}));

store.dispatch(removeExpense({
  id: 2
}));

console.assert(store.getState().balance === 75);
console.assert(store.getState().expenses.length === 2);
```

Pretty simple, right? To create a Redux Store, all we had to do was to import the `createStore` function from Redux and call it passing our reducer. Interacting with the store was not hard either. After importing the action creators, we simply called the `dispatch` function of the store, passing to it actions created by our action creators (`addExpense` and `removeExpense`).

In the end, to verify that the store ended up in the correct state, we added two `console.assert` calls. The first one showed that the `balance` is indeed 75, and the second one guaranteed that we finished with two expenses in the last state.

To run our code, we need to use the [`babel-node`](https://babeljs.io/docs/usage/cli/#babel-node) command provided by Babel. To easily run this command, let's edit the `package.json` file and add the following record to the `script` property:

```js
{
  // ...
  "scripts": {
    "start": "babel-node src/",
    // ...
  },
  // ...
}
```

After that, we can simply issue `npm start` and we will see Babel run our code and assert that we get the expected state.

<include src="TweetQuote" quoteText="I just finished a Redux tutorial."/>

<include src="asides/JavascriptAtAuth0" />

## Conclusion

As we can see, Redux is an easy technology to reason about. Although not hard, correctly understanding its three main pieces (the store, reducers, and actions) is important before we move to other topics, like integrating with front-end frameworks. However, once we learn Redux's concepts, we can integrate it with, for example, React to get a great foundation for modern Single Page Apps.

By the way, in our blog we have an article that shows how to properly [secure React and Redux Apps with JWTs](https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/). Take a look at it if you are going to use these technologies in your next project.


Redux: A Practical Tutorial

001c9ddc5ceb9829b6aaf24f5d28502a

I am software developer with a keen interest in open-source technologies, Linux, and native development. I've worked on many different platforms Android, iOS, Win32, Linux, FreeRTOS, the Web, and others. I've gone through the whole stack and I enjoy learning and using the latest technologies. I now work as a full-stack developer at Auth0.

Senior Engineer

Sebastian Peyrott

In this tutorial we implement centralized logins for iOS both manually and using the Auth0 SDK.

"Tutorial"