Skip to main content

Build a secure API with Auth0, ExpressJS and AngularJs

Many modern projects separate the backend from the frontend user interface. The bakend usually handles incoming requests and responses with some information in JSON or XML.

When you are working with an architecture like this, your API needs to be exposed in a secure way and here is where Auth0 will simplify your design.

In this post I’m going to explain how I have integrated a website made with AngularJS with an API using ExpressJS and secured with Auth0.

The application

I’m supposing you know how AngularJS and ExpressJS work because in this example I want to focus on how I have integrated all of them with Auth0 to provide a secure access.

In this example I’m going to use a very simple todo-list application where an authorized user will see a list of tasks.

Before starting, you have to know all the code used in this example and many more has been released in Github.

 

To start this project, create a new folder and start an npm project:

Creating an API on Auth0

Before building our example, we need to create an account on Auth0. I’ve chosen Auth0 because it is very easy to integrate it and if offers an account for APIs with up to 7.000 regular active users. Take into account that in this example I’m using just a few features of Auth0, for larger developments take a look to its documentation.

I suppose you already have an account in Auth0 and you are right now on your dashboard.

  1. Click on the left in APIs > Create API
  2. Write a name, e.g: “todo-list-auth0”
  3. Write an identifier, I recommend using a domain like name but it doesn’t have to be a real domain, e.g: “http://todo-list-auth0.com”
  4. Click on Create.todo-list-auth0-1

After creating our API we should add the domain name of our website to allowed-domain names. Our website will be http://localhost:8080 so we will have to add this domain name to the list of allowed domains.

  1. In the left sidebar of Auth0, Click on Client > todo-list-auth0 (Test client). This client has been created automatically when creating the API.
  2. Add http://localhost:8080 into Allowed Origins (CORS)
  3. Click on Save Changes

Building a simple API in Express

As I’ve said, this is a very simple API that responds a list of tasks on route http://localhost:3000/private/tasks. To build our API we need to install some dependencies

And we will create a very simple route that will return a list of tasks:

Remember you have to use your own information instead of YOUR_AUTH0_SECRET and  YOUR_AUTH0_CLIENT_ID.

Building a website to retrieve TODO-list

Now we have a secure API we need a website to request the task list and show it to the user. I’m going to use a simple website build with AngularJS and Express because, as I’ve done with the API I want to focus on the integration with Auth0 instead of the website itself.

Let’s start with the dependencies:

1. Website main template

We need a main index.html to bootstrap the application.

In this index.html we:

  • Create a template to be used by listCmp
  • Inject all scripts needed. Pay attention because in line 43 we are including an external lock-8.2 library

2. Bootstrap of the AngularJS app

We need to create our AngularJS app todoList, inject main angular and Auth0 modules and set its configuration, we are doing it here:

As you can see above we are also configuring authProvider with our Auth0 configuration.

3. Auth0 service

This is the service managing all the integration with Auth0, it provides 3 methods:

  • login: It shows an Auth0 popup that allows the user to signup in our website and login with an email and a password. After a login, token and profile returned from Auth0 is stored in localStorage.
  • logout: Removes token and profile data from localStorage, this is just you need to logout a user.

4. Main service listSvc

This service called listSvc is in charge of requesting our API a list of tasks. It is a very simple service with just a method .get() that is retrieving a promise to be resolved with a list of tasks.

As you can see, get() method is using $http to launch a GET request against http://localhost:3000/private/tasks URL, where our API is responding.

5. Main component listCmp

This component named listCmp is the main component of this example. It contains the code to:

  • Login/logout the user when buttons are clicked.
  • Request listSvc to obtain tasks and loads them into scope.
  • Sets a watcher to load tasks everytime user is logged in.

6. Testing all together

If we execute this code with just two services (listSvc and authSvc) and a component (listCmp) we will see an app with a login button.

home-page

As you can see, a message is warning the user to login to retrieve a list of tasks. If we click on login button a login popup is shown:

login-popup

7. Configuring the $http interceptor

With just this code we can manage the login and logout of a user but API will be responding a 401 error (Not authenticated) to every request because we are not including the token in the request.

Auth0 has simplified this part of the development creating an interceptor that will include the Auth0 token stored in localStorage so we are going to push this interceptor.

To push this interceptor and configure JWT we are doing some changes to the configuration of the app, let’s see:

We have also added some code to our .run() method. In this code we are using authManager to check the login on every refresh and to redirect the user when API returns a status 401 to the route configured in unauthenticatedRedirectPath.

8. Example finished!

This is the result of the website with the user correctly logged in:

example-finished

Extra development

In order to make it easier to deploy and see this example, I’ve created:

  • An ExpressJS app to server the website
  • A simple script in package.json to launch both the API and the website when running “npm run start”

Conclussion

Thanks to the integration of Auth0, with just a few steps you can setup a login/logout system for an AngularJS website and an ExpressJS API.

Of course, there is a lot of features that I’ve not explained in this article but this is because I’ve preferred to focus in a quite simple example and leave extra configurations for another article. If you want to know more about Auth0 and its features, take a look to the main documentation.

I’ve also shared the code of this example in Github, if you have any question, feel free to ask in the comments below, I’ll be glad of helping you.