AngularJS Authentication: Secure Your App with Auth0

Learn how to add JSON Web Token authentication to your AngularJS app
4.5 (662 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
11,091 students enrolled
Free
Start Learning Now
  • Lectures 15
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 English

Course Description

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.

What are the requirements?

  • Basic HTML, CSS, and JavaScript
  • Basic AngularJS
  • General knowledge of single page applications

What am I going to get from this course?

  • Secure AngularJS applications with JSON Web Tokens
  • Set up JWT middleware on a NodeJS (Express) app
  • Make authenticated HTTP requests from an AngularJS
  • Create a user profile area with their avatar
  • Redirect to a login route when the user becomes unauthenticated
  • Apply multi-factor authentication to add additional security
  • Login with social providers like Google and Twitter

What is the target audience?

  • AngularJS beginners to experts
  • NodeJS beginners
  • Web developers of all levels

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
00:59

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

00:40

Let's take a look at the application we'll build and where you can get the source code.

Section 2: Web Application Authentication Background
03:42

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.

04:53

Adding authentication to AngularJS apps can be tricky. Let's look at what the challenges are and how we can solve them.

04:36

JSON Web Token (JWT) is an open standard for transmitting claims securely. This means it can be used as an authentication mechanism, and it turns out that it's the perfect way to authenticate an AngularJS app.

Section 3: Setting Up the App
06:33

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.

16:20

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

07:05

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.

Section 4: Setting Up Authentication in AngularJS
12:33

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.

12:10

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.

06:26

Since the AngularJS app is stateless with respect to the backend, whenever we refresh the page, the user's authentication status will be lost. Let's set up some logic to fix this.

04:27

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.

Section 5: Additional Features
04:03

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.

02:39

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.

00:40

Thanks for taking the course!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ryan Chenkie, Full-Stack Developer

Ryan is a full-stack developer from Canada who focuses on writing single page applications and RESTful APIs. He mainly works with JavaScript and builds client-side apps with frameworks like AngularJS, Vue.js, and Aurelia, as well as server side apps with NodeJS.

When he's not coding, Ryan is hanging out with his wife, playing guitar, or nerding out about outer space.

Ready to start learning?
Start Learning Now