AngularJS Authentication: Secure Your App with Auth0

Visit Tutorial Page ( Report)
Authentication for traditional web applications is fairly straight-forward: we send our credentials to the server, a session is created, and a cookie is returned to be saved in the browser. This method works well for round-trip applications, but it isn't a good way to do authentication in modern single page apps, like those built with AngularJS. In this course we are going to learn about the challenges associated with traditional authentication and how to use what is arguably the best alternative: the JSON Web Token. Using that knowledge, we'll implement authentication in an AngularJS app that makes calls to an Express API. We'll cover how to address all the challenges associated with keeping a single page application in check when it comes to stateless authentication. This can be a tricky matter since the front end and backend apps are effectively separated, but we'll find out how to leverage our user's JWT to address the challenges. We'll use Auth0 as an identity and authentication server so that we don't have to roll our own. Who is the target audience? AngularJS beginners to experts NodeJS beginners Web developers of all levels
  • Introduction
    • Hey there!

      Thanks for taking the course! I'm Ryan, and I want to teach you how to secure your AngularJS application with JSON Web Tokens.

    • Final Project Walkthrough and Course Files
  • Web Application Authentication Background
    • Traditional Authentication

      Traditional session-based authentication for web applications has worked well up until now, but there are limitations to this approach when building single page applications. Let's look at how traditional authentication works and the associated problems.

    • The Tricky Parts of AngularJS Authentication
    • JSON Web Tokens
  • Setting Up the App
    • igning Up for Auth0

      To add authentication to our AngularJS app we need to be able to issue JSON Web Tokens. We could write the code to do this ourselves, but Auth0 does it for us for free. Let's register and configure our account.

    • Setting Up the AngularJS App

      We need an AngularJS application to add authentication to. Let's set up a simple app that will have a home and profile route.

    • Setting Up the NodeJS App

      To demonstrate how to protect data resources that are on a server, we'll set up a simple Express app that will expose two routes: one that is public and the other that is private.

  • Setting Up Authentication in AngularJS
    • Login and Logout

      We need some methods for allowing users to log in and log out. Let's create those methods and use them to call Auth0's Lock widget so that we can retrieve a JWT for the user.

    • Sending Authenticated HTTP Requests

      To access our protected resources from the server, we need to add the user's JWT as an Authorization header on each request we send. Let's see how to set that up using Angular's HTTP interceptors.

    • Preserving Authentication on the Front End
    • Redirecting on Invalid Requests

      What happens if the user sends a request with an invalid JWT that gets rejected by the server? Ideally we should redirect them to the spot they login from automatically. Let's set up some logic to handle that.

  • Additional Features
    • nabling Social Login

      Many people prefer to authenticate into an application using a social identity provider. Let's see how we can easily set up Twitter as a social provider.

    • Enabling Multi-Factor Authentication

      Multi-factor authentication can strengthen our application's security in a big way. Let's see how we can apply it to our authentication flow.

    • Wrapping Up

      Thanks for taking the course!

Write Your Review