Implementing basic HTTP authentication for HTTP requests in AngularJS

Do you need to send basic HTTP authentication headers with your requests from AngularJS? Maybe for communicating with a RESTful backend API? Here’s how!

So, we were in a situation where we needed to send basic HTTP authentication headers with all our RESTful calls to a backend. Which makes sense, REST is supposed to be stateless so logging in “just once” doesn’t really belong there, even though the opinions on the matter varies. As always in the developer community.

Without fuss, here’s how we did it. If the user is logged in in our AngularJS app, we store the encoded credentials in the cookie and pass them along as regular Basic HTTP Authentication headers with all HTTP calls we make to the backend.

Here’s the code:

And also the Base64 encoder/decoder service (which is an adaption of webtoolkits implementation):

Simple enough. Enjoy!

Note: Using this method will store base64 encoded versions of username and password in a cookie on the client machine, which has to be taken into consideration from a security point of view given your particular application.

Tags: 
angularjs
html5

WMYL Blog

Thursday, November 13, 2014 - 16:06
By default all the files in Concrete5 are stored in the '/files/' directory. When you have defined an alternate storage location you can move your files to this directory by right-clicking the image in the Filemanager, choose 'Access and permissions' and head over to storage location to move it to the alternate storage.
Thursday, September 11, 2014 - 16:07
We recently started using Xamarin for a client project here at We made you look. We basically wanted to be able to display a mobile web page inside a webview along with some native logic "on the side".
Tuesday, May 13, 2014 - 15:54
Arbetet startade under 2013 och handlar om att bygga och utveckla ett säljstöd i form av en smartphone-app för både iOS och Android.
Wednesday, November 13, 2013 - 14:55
"Jag är mycket glad att Wihlborgs har valt att samarbeta med oss. Vårt fokus ligger på att jobba med bolag som satsar på långsiktighet och där ligger Wihlborgs i framkant"
Sunday, October 13, 2013 - 15:56
After doing a clean install of Windows 8.1 on my Macbook Air using Bootcamp (even though Microsoft decided to remove it from the Windows App Store due to a shitstorm of error reports), I also decided to do an install of the brand spanking new Visual Studio 2013.
Friday, September 13, 2013 - 16:46
After finishing my first "normal" 3d effect (where the actual 3d is generated from meshes consisting of vertices and matrices) in Spherical Harmonics Distortion - First experiment in WebGL I wanted to have a go at something closer to raycasting and raytracing. A popular technique to use in a fragment shader is ray marching, which we will explore in this post.
Friday, September 13, 2013 - 16:42
We got WebGL, let's add music
Friday, September 13, 2013 - 16:34
Concrete5 is a great product. Everything from getting the editor up to speed on how to be creative with their own material and ideas, to setting up a development environment that is suitable to the clients needs is easily done in this content management system.
Wednesday, March 13, 2013 - 15:55
Here at We made you look we're always investing time into learning new things, so I, having coded 3D stuff back in the days of yore, decided to give WebGL a go.
Thursday, December 13, 2012 - 16:12
All these new HTML5 form input types are of course nice and all that, but somehow you’d think you could expect some kind of consistency when it comes to their behavior. But no. Not so much.
Thursday, September 13, 2012 - 15:23
Do you need to send basic HTTP authentication headers with your requests from AngularJS? Maybe for communicating with a RESTful backend API? Here’s how!
Friday, April 13, 2012 - 17:23
Having fluid width squares or rectangles (any kind of “box” you like actually) has always been a problem with responsive or fluid width sites.
Friday, April 13, 2012 - 17:17
In our earlier article Proportional scaling of responsive boxes using just CSS, we explained how to scale elements without the need of Javascript. In this article, we are going to pimp it up a with media queries to target different resolution of devices in the world.
Monday, February 13, 2012 - 16:27
I do it, you do it, we all do it. We all live and breathe through the internet.
Monday, February 13, 2012 - 15:58
A strange error when using Airfoil for Windows when updating / installing the software is that a registry key makes git unusable.