Securing Microservices with Auth0 Pt. 1 (UI)
Tags: react, spring, microservices, tutorial
Published: 2019-09-22 22:45:48

# Overview

This is going to be a series of posts where I will walk you through creating a **SPA using React** and using a **Microservice Architecture** to create your backend with the [Spring Framework](https://spring.io/) (Resource API, Authentication Server) using [Auth0](https://auth0.com/) to secure your frontend and microservices.

You can also go ahead and play around with [the code](https://github.com/bbenefield89/SpringTodo/tree/bbenefield89/tutorial_pt1) for this post. This branch, `bbenefield89/tutorial_pt1`, is just the UI portion for now. You can also take a look at the `master` branch if you'd like but that branch is specifically for me to play around with as I write this series.

If you decide to play around with the code I've provided, you're going to need to create a file at `todoapp_ui/src/auth_config.json` and inside you will need to provide some credentials that are specific to your **Application** on **Auth0**.

**Example auth_config.json**
```json
{
    "domain": "myAuth0Username.auth0.com",
    "clientId": "as98d6ashasdH"
}
```


# What is a Microservice

> In short, the Microservice Architectural style is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API.

> -- James Lewis and Martin Fowler (2014)

Just to clarify, a **Microservice** is a small subset of your entire application. This is the exact opposite of a **Monolithic application** where everything is written and contained in the same code base, everything runs on the same **PORT** whereas each **Microservice** will be self-contained and running on a different **PORT**.

The advantages of going with a **Microservice Architecture** is that we break out our application into smaller more digestible pieces of code. Coming from mainly the frontend, **React**, the way I wrapped my head around this idea is how we write components. For example, let's say we were writing a component to take in some data, iterate over the data, and display this to the user.

```javascript
class TodoList extends Components {

    // state

    render() {
        return (
            <ul>
                {this.state.todos.map(todo => {
                    return <li key={todo.id}>{todo.title}</li>
                })}
            </ul>
        )
    }

    // methods grabbing data and saving in state

}
```

While this isn't the worst thing to do, we could break our components apart so that each one of our components is only concerned with one thing. We will now create a component, `TodoList`, which will render a list of todos. Then we will create a `TodoItem` component which is only concerned with that one single todo item.


**Todolist.js**

```jsx
class TodoList extends Components {

    // state

    render() {
        return (
            <ul>
                {this.state.todos.map(todo => {
                    return <TodoItem key={todo.id} title={todo.title} />
                })}
            </ul>
        )
    }

    // methods grabbing data and saving in state

}
```


**TodoItem.js**

```jsx
function TodoItem({ title }) {
    return (
        <li>{title}</li>
    )
}
```


While yes this is a small example it should serve its purpose of an example of a **Microservice**. I would like to point out that I'm not saying React components are Microservices but this is just an easy way of explaining what a Microservice could be. We now have two separate "services" that are concerned with one thing and only one thing. **TodoList** is concerned with iterating over data and **TodoItem** is concerned with what to do with the data passed down as props.


Now, the way we're going to go about creating our **Microservices** will be in the form of a **Resource Service (Todo API)** and an **Auth Service**. This could also be extended and you could go ahead and write some other services as your project grows, **Email/Notification Service**, **Message Queue Service**, etc.

- **Frontend**: Handles UI and Authentication with **Auth0**

- **Resource Service**: Responsible for CRUD operations for our Todo's

- **Auth Service**: Responsible for Authorizing requests to any of our **Microservices**


# Aside

It's important to understand the difference between **Authentication** and **Authorization**. 

- **Authentication**: When you log into an application you are being **Authenticated**

- **Authorization**: When you are requesting resources, API, webpage, etc., you are then being checked if you are **Authorized** to access the resource(s).


# Let's write some code

With that explanation out of the way, we can finally get started writing some code. In this post, we're going to write the UI for our application. We will also write the logic to secure frontend routes that can only be accessed to users who have been **Authorized** to access the page.

## Create React App

Open up your terminal, using the `npx` command provided by `npm` let's create our frontend boilerplate

```nim
user@group:~/$ npx create-react-app todoapp_ui
```

After your boilerplate application has been created let's go ahead and open up the app in our favorite IDE.


## Install Auth0 Dependency

Next, we need to install the `@auth0/auth0-spa-js` dependency in order to **auth** users. We will also be using the `access_token` that we receive after successfully **authenticating** a user to later **authorize** requests to our **Resource Server**.

```nim
user@group:~/todoapp_ui$ npm i @auth0/auth0-spa-js
```


## Create Auth0 Account + Application (Free)

Before moving on we need to set up an account with [Auth0](https://auth0.com). Afterwards, go ahead and create your first **Application**. Go ahead and click on the `Applications` link on the left hand side.

From there, look to the far right of your screen and click the large orange button `+ CREATE APPLICATION`.

<img src="https://thepracticaldev.s3.amazonaws.com/i/86xj0s8lh9cyg1kj15aw.PNG" width="100%">

Name your app, mine will be named `TodoApp`, and choose the **Single Page Web Application** option.

<img src="https://thepracticaldev.s3.amazonaws.com/i/xh14gqoyj6qbb0o1hjmf.PNG" width="100%">

Choose the **Quick Start** tab and select **React**, or you can use another type but for this tutorial, we're going to use **React**.

<img src="https://thepracticaldev.s3.amazonaws.com/i/pn278jbfozg9vzy9ezkk.PNG" width="100%">

From here, instead of rewriting everything that **Steve Hobbs** from **Auth0** has written, I would suggest you go ahead and follow his tutorial. Just follow this specific tutorial, don't go to the next tutorial, **Calling an API**.


## Manually testing our frontend

After you've gone through the tutorial from **Auth0** you should have a fully functioning frontend with public and private routes. Users who have logged in should be able to access their **Profile** on your application and those who are not **authorized** should be redirected to the **Home Page**.


## Conclusion

In this post, we learned how easily we can secure our frontend routes and have complete user **auth** in just a few easy steps.

[In the next post](https://dev.to/bbenefield89/securing-microservices-with-auth0-pt-2-2c23), we're going to start building out the **Resource Service** to grab our users **Todos**. First, it will insecure and in the final post, we will write the logic to secure the endpoints from a completely different **Microservice**.