Authentication on AngularJS with JWTs
In this demo we'll show step by step how to add Authentication to your AngularJS app with an API that uses JWTs.
Running the example
This application has an AngularJS Frontend and a NodeJS backend
In order to run the the AngularJS app, all you need to do is to start a server at that folder. I recommend using
serve for that. Just run:
npm install -g serve
Then go to http://localhost:3000 and see the Frontend app running
The backend is made with
node, so you must have
Then, just run
node server.js to start the server on the port
In this repository you'll find several branches. Each of the branches represents one step taken to implement the Authentication.
1 - Start Branch
This is the starting point for the application.
If you go to http://localhost:3000/#/ you'll see the main page of the demo.
In there, you'll see 2 buttons to do 2 API calls:
- The first one, does an API call that doesn't require Authentication
- The second one does an API call that does require authentication
Try clicking both to see what happens.
2 - Authentication implemented in the Backend and UI in the FrontEnd
3 - User Authentication Finished
Go to http://localhost:3000/#/login to see the Login page and login. You'll see that if you click on the
Call secure API button, it'll still throw an error. That's because we need to send the
JWT on the
Authorization header. Let's do that!
4 - Sending JWTs on requests
Now, we've implemented sending the JWT on the
Authorization header on every request. Check it out here
Now, before logging in, try going to http://localhost:3000/#/. You should still see this page even though you're not logged in. Try clicking on the
Call secure API button and check that you still get the Unauthorized error. Now, go to the Login page and log in. Try clicking again on
Call secure API. Check that it's not returning a correct response since the
Authorization header is sent in every request.
5 - Restrict access to routes
In this section, we've restricted access to routes that require authentintication for anonymous users. Go to http://localhost:3000/#/ without being logged in and you'll see that you're redirected to the Login page. You can see the implementation for that here.