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 (Resource API, Authentication Server) using Auth0 to secure your frontend and microservices.
You can also go ahead and play around with the code 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
{
"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.
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
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
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
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.
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. 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.
Name your app, mine will be named TodoApp, and choose the Single Page Web Application option.
Choose the Quick Start tab and select React, or you can use another type but for this tutorial, we're going to use React.
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, 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.
Top comments (1)
Thanks a lot Brandon this was a great explaination