If you want to add authentication to your Ionic app, chances are high today that you want to send some specific headers with all of your requests. And although you could use another package inside your app, you can also easily add your own HTTP interceptor for this!

In this Quick Win we will add a custom HTTP interceptor which will intercept all outgoing HTTP calls that our Ionic app makes. Inside those requests we will use a token that we store and retrieve from the Ionic Storage and also catch any errors that happens at the top most level inside the app.

The result looks like the gif above if you inspect your HTTP calls and headers, so let’s dive into it!

Starting our HTTP Interceptor Ionic App

We don’t need any special packages for this but just a blank Ionic app and an additional provider, so go ahead and run:

After this your provider will be automatically added to your module, but we need to change it a bit. We want to provide it for the HTTP_INTERCEPTORS so it looks just like the custom Ionic Error handler. Also, we add the HttpClientModule and IonicStorageModule to prepare everything.

Go ahead and change yourapp/app.module.ts to:

That’s it for the setup, now the Interceptor will be used whenever an HTTP call takes place and we just have to take care of adding the right headers on the fly!

The HTTP Interceptor Provider

The heart of this Quick Win is the actual Http interceptor which only needs to implement the intercept() function.

Inside the function we have to go through a few steps one by one and especially take care of what we return so don’t confuse Promise and Observables in here and don’t mess up with the async chain! You can find more on this also in the video linked below.

For now, the steps are:

1. Get the stored token from Ionic Storage
2. Use the token inside addToken()
3. Change the headers of the request if the token exists inside addToken(), otherwise return the request again
4. Handle the cloned request like a regular HTTP call
5. Catch errors that might come up and show an alert

Especially the last point is optional, I just wanted to show how you could plug in some error mechanism at that place.

Now open your providers/interceptor/interceptor.ts and change it to:

Now we only need to add a simple test and we are done.

Making HTTP Requests

We should test regular requests and authenticated requests. We don#t really have any authentication in place here, but it would work more or less like the flow inside our app. Plus you would store some information from the token or user so you don’t have to retrieve it all the time.

Anyway, we just switch our auth state around with a function and either write to the storage or remove the key from the storage. That’s all we need to do as the interceptor will handle the rest!

To test successful or failed requests we can also add 2 more functions, but nothing of ths should be new to you so open your pages/home/home.ts and change it to:

The final piece is to wire up some buttons, but the following code doesn’t really needs any explanation at all besides that it goes into your pages/home/home.html:

Now you can make your authorised requests which will get the header token added and the regular requests will not plus in case of an error you directly see the alert that something went wrong with your request!

It’s actually not that hard to build your own logic for adding those kind of things, but in a real environment you might need to make the access/refresh token dance if a request fails or in the beginning of your app check if a stored token is still valid.

You can also find a video version of this Quick Win below.