Token-Based Authentication With Angular

  • Origin ‘http://localhost:8888’ is not allowed access.
  • As long as that token is present, the user can be considered logged in.
  • When a user needs to make an AJAX request, that token can be used.
  • Right now, all routes are open; so, regardless of whether a user is logged in or not they, they can access each route.
  • log ( err ); }); }; } function authRegisterController ( $location , authService ) { /*jshint validthis: true */ const vm = this ; vm .

Here we look at how to add user authentication to Angular using JSON Web Tokens (JWTs).

@MikeHerman: Token-Based Authentication With Angular >> #angularjs #javascript #authentication #nodejs

In the Token-Based Authentication With Node tutorial, we looked at how to add token-based authentication to a Node app using JSON Web Tokens (JWTs). This time, we’ll build out the client-side by showing how to add auth to Angular using JWTs.

By the end of this tutorial, you will be able to…

Before beginning, review the Introduction from Token-Based Authentication With Node so you have a solid understanding of what JWTs are and why you would want to use tokens over sessions for auth.

Make sure you can describe what’s happening on the server-side as well. Review the code from the node-token-auth repo, if necessary.

With that, here’s the full user auth process:

Start by cloning the project structure:

to make sure all is well. Navigate to http://localhost:8888 in your browser and you should see:

Kill the server when done, and then glance over the code within the project folder:

All of the client-side code lives in the “src” folder and the Angular app can be found in the “js” folder. Make sure you understand the app structure before moving on.

This is optional, but it’s a good idea to create a new Github repository and update the remote:

Now, let’s wire up a new component…

First, add the dependency to the setter array within app.js:

Create a new folder within “components” called “auth”, and then add the following two files to that folder…

auth.controller.js:

auth.login.view.html:

Next, add the script tag to index.html, just before the closing body tag:

Add a new route handler to the config.js file:

text.

Next, let’s create a global service to handle a user logging in, logging out, and signing up. Add a new file called services.js to the “js” directory:

Make sure to add it to the dependencies in app.js:

Add the script to the index.html file, below the config script:

method:

logged to the JS console.

like so:

endpoint. This returns a promise object.

from the controller.

Registering a user is similar to logging a user in:

To test this we need to set up a back end…

For the server-side, we’ll use the finished project from the previous blog post, Token-Based Authentication With Node. You can view the code from the node-token-auth repository.

Clone the project structure in a new terimal window:

, which will listen on port 3000.

like so:

In the browser, you should see the following errors in the console at http://localhost:8888/#!/login:

Refresh http://localhost:8888/#!/login in the browser and you should see a success in the console with the token:

Update auth.login.view.html:

function.

Now, let’s update the controller:

method on the service.

Test this out.

Just like the login, we need to add a view and controller for registering a user. Start by adding the view, auth.register.view.html, to the “auth” folder:

Add a new controller to auth.controller.js:

Don’t forget:

Add a new route handler to the config.js file:

Test it out by registering a new user!

As long as that token is present, the user can be considered logged in. And, when a user needs to make an AJAX request, that token can be used.

Test this out. Ensure that the token is present in localStorage.

To test out login persistence, we can add a new view that verifies that the user is logged in and that the token is valid.

header, and then whether the token is valid. Can you find this code on the server-side?

Then add a new file called auth.status.view.html to the “auth” folder:

Add a new controller:

And:

Finally, update config.js:

Test this out at http://localhost:8888/#!/status:

Finally, let’s redirect to the status page after a user successfully registers or logs in. Update the controllers like so:

Test it out!

Right now, all routes are open; so, regardless of whether a user is logged in or not they, they can access each route. Certain routes should be restricted if a user is not logged in, while other routes should be restricted if a user is logged in:

for routes that you want to restrict:

For example:

Next, add the following function below the route handlers in config.js:

property:

Simple, right?

Update:

Then test one last time.

What’s Next?

You’ve reached the end. Now what?

Grab the final code from the angular-token-auth repo. Comment below. Cheers!

Token-Based Authentication With Angular