AngularJS Authentication Screencast Series - Part 2

Adding authentication to any single page app comes with a set of challenges, and this includes apps built with AngularJS. Auth0 makes the process a lot easier with some open source libraries for saving and sending JSON Web Tokens, as well as a full authentication service that removes the need to write authentication logic yourself. If you want to get all the details of how to add auth to your AngularJS 1.x app, this screencast series is for you. If you'd like, you can go straight to the code or checkout the AngularJS + Auth0 docs.

In the second part of the screencast series, we'll first go through the steps of signing up for an Auth0 account. After that we'll set up the skeleton for our front end AngularJS application. Finally, we'll set up the backend NodeJS app and have it serve data at two different endpoints.

• Signing Up for Auth0
• Setting Up the AngularJS App
• Setting Up the NodeJS App

Signing Up for Auth0

Transcript

So, ultimately, for this application we're going to need some way to get JSON Web Tokens for our users. And these tokens are going to have to come from some server. And we could spend the time going through the steps of setting up authentication on our own server, but instead what we're going to do here is actually use an authentication service called Auth0. And you can kind of think of Auth0 as an authentication broker.

And so Auth0 gives us a service where we can put all of our users into their database and then all we need to do is have our users send their credentials to Auth0. And if everything checks out with their credentials, they'll get a JWT back from Auth0. And then after that, we can use that JWT to secure our own server. So basically, Auth0 kind of offloads all of the tricky parts of authentication for us.

So there are a lot of other features around authentication that we would eventually want to put in our applications. Things like social login, so people want to be able to log in with their Google or their Twitter accounts. And then we might want some other authentication features as well, like multifactor authentication or single sign-on or passwordless login. And Auth0 allows us to do this really just at the flip of a switch.

Okay, so here's the game plan for the rest of the course. First, we're going to sign up for an Auth0 account. And then we'll register a user. And then we'll use AngularJS to set up a really simple front end for our application. And then we'll also create a very simple NodeJS app using Express for the backend. On the Angular side, we'll set up some logic to get the user's JSON Web Token and then save it in local storage. And then on the backend, we'll set up some middleware so that our API resources are protected. Then we'll see how to attach the JWT as an authorization header when the user makes a request to the backend so that they'll be able to get the resources that they should be able to get. All right, so to get started let's go over here to Auth0.com/angularjs. So as you can see here, there's some really good documentation provided by Auth0 that shows us exactly how to set up authentication for our applications.

Signing up for Auth0

But the first thing we actually need to do is sign up for an account. So let's go over here to the login button. And then we've got an option here to sign up for a new account. So I'm just going to put in one of my email addresses and we'll see exactly how to sign up here. All right, so once you have your email address and password input there, let's go over here and see the rest of the steps.

So in this welcome message, we get the option to say that we're either technical or we're not. But we're all pretty technical here so let's say that's me. And then we're going to need to provide an account name. And this will be a domain name that is used to call Auth0's API. So this can be anything, really. It could be the name of your organization or just the name of your application. One consideration here is that we can have multiple applications under the same domain.

So if you plan to have multiple applications under this same account name, just pick something that makes sense for that situation. So I'll call this AngularJS Auth. And then we want to pick a region. And the region here can either be Australia, US West, or Europe Central. So I'm in North America and therefore I'll just pick US West. And then we can provide a company name. And then we'll just say Angular JS Testing. And then the role that we'll pick here is software developer.

And then there's a clause down here that we just need to read and accept. So if that checks out for you just hit this checkbox here and we're good to go. So the first thing that we'll see her is this popup that says, "What type of authentication do you want for your apps?" Now, it's okay to leave the defaults here because we can go back and change this later on. So I'm just going to come down here and hit save.

Auth0's Plans

Now, Auth0 has a really good free plan. They give us 7,000 regular active users. And the free plan is production ready, so you can create a full production account with up to 7,000 regular users and you're good to go for no cost. So when we sign up for our Auth0 account, we actually get this default app created for us. So let's take a look inside this default app and see what we have.

Application Settings

So we've got some quick start documentation available to us right within the dashboard. Then we've also got this settings area. And this is the area that's going to be important for when we set up our AngularJS app. So we've got our Auth0 domain, and that's going to be used to call the Auth0 API from our application. And then we've got this client ID here. And this is a public client ID that we need to use in our Angular app.

So this one will be public-facing, but here we've got our client secret. And it is this secret that's used to sign the tokens that our users get back. And this secret also needs to go on the NodeJS server so that our users' JWTs can be checked and verified when they reach the middleware. So let's take a look at just a couple more things here. I'm going to go over to the connections link. And this is where we get to see the different types of connections we can use with Auth0.

Social Connections

And one that we should take a look at right now is this social connections area. And the social connections listed here are ones that we can use in our application. So if you're building an application that has a lot of users that have, say, GitHub accounts, then you can use the GitHub social authentication. And on the free plan, we're able to use two of these identity providers. Finally here, let's go over to the users link and this is where we can manage our users.

So, what we can do here is create our first user. And we just need to give an email address, password, and then the connection type, which in our case is going to be username password authentication for now. So I'll just put in the same email that I used to log in. And we'll put in a password there. And then we can keep username password authentication there. And we'll hit save.

So here we go. Our first user is created. And this is a really nice dashboard to manage users. You can see all sorts of information about them, their login count, where they're logging in from, that sort of thing. And as you can see here, we've got this pending notice here next to the email address. And that's because we've just had an email sent to this address that requires us to click a link to verify ourselves.

And so once we click that link in the email, this will go away. All right, so take some more time to get familiar with the backend here. And once you've done that, in the next video we'll get started on the AngularJS app.

---

Setting Up the AngularJS App

Transcript

Okay, so let's get our Angular app started up here. We'll use npm to get all of the dependencies that we need. And so let's head over to the command line and let's do a new folder wherever you put your code. I've got mine in this code directory here. Let's just make a new directory. We'll call it

angularjs-auth

. And let's

cd

into there. Then, within there, let's initialize npm, so we'll do

npm init

. And you can just keep the defaults for the most part. Feel free to put whatever you want in these spots.

Installing the Dependencies

So we'll say okay to that. Once that's done, let's actually install the dependencies. So there are quite a few of them we'll need, so let's take a look at each one of them. So we'll do

npm install

. We need

angular

for the AngularJS framework, so we'll do

angular

. And then we'll also want

angular-material

and that's just going to let us have some nice styling for our application. And with

angular-material

we'll need some supporting packages like

angular-aria

and

angular-messages

, and then

angular-animate

as well.

All right, then we'll want to do some routing, so let's grab

angular-ui-router

. And then for the JWT authentication parts, let's grab some packages that help us specifically with that. So Auth0 gives us this

angular-jwt

package and that just makes it easier to do JWT authentication in Angular apps as we'll see. Then we'll also want this

angular-storage

package, and that's going to be helpful for storing the user's JWT in their local storage.

And then finally, we need this

auth0-angular

package, and that's going to allow us to use Auth0 in our app. So let's hit enter on that and we'll see if everything installs properly. All right, so it looks like we got everything together. Now, let's open that up in our code editor. So I'm using VS Code here. And why don't we start by created an

index.html

file. So let's come over here and say we want an

index.html

. And then let's grab some boilerplate HTML and we can just call this "AngularJS Auth" for the title.

And then why don't we bring in the CSS and the scripts we'll need. So we'll come over here. We'll say we want a link to our

node_modules

folder and we want to go to

angular-material

. And we want

angular-material.css

. All right, so then let's bring in the scripts. Down here, just before the closing body tag let's do a new script tag. And the source for this will be our

node_modules

folder.

We want

angular

and then

angular.js

. We'll use the unminified version. So now if we copy this over, let's come down below and we can grab the

angular-material

stuff. But first let's grab

angular-animate

. Let's copy this one, make it a bit quicker for the next one. So we also want

angular-aria

. And then finally, below it, it's going to be

angular-material

.

All right, so then let's grab our

angular-jwt

package, so we can just paste that below again. So

node_modules

in this case is going to be

angular-jwt

and it's within the

dist

folder. And we want

angularjwt.js

. Let's copy this one. We want

angular-storage

. And then let's grab

auth0-angular

. So let's copy this. This one's going to look a little bit different, so let's take this out. It's going to be

auth0-angular

and it's in the

build

directory within there.

And then we want

auth0-angular

here. And then finally, let's grab UI Router. So let's come down here. We'll paste this. And just say that we want

angular-ui-router

. It's in the

release

directory, and we'll say

angular-ui-router

here. So then we know we're going to need an

app.js

. Why don't we put that down below. This will be the first of our actual application scripts. And so let's just say we want

app.js

.

Bringing in the Lock Widget

So when we do authentication with Auth0, we can either us the login widget that they provide, which is called Lock, or we can create our own login box that calls their API. For this course, we're just going to use the Lock widget because it's really easy to integrate and really easy to get going with. So let's come over here to our browser and let's head over once again to

auth0.com/angularjs

.

So that takes us here to the Angular quick start page. And what we can actually do is come down here and grab the Auth0Lock script. And this is going to grab the Lock widget script from Auth0's CDN. So let's copy this over and we'll paste this just below the title here. And then we should also set the

viewport

to the recommendation given by Auth0. And this is going to help on mobile devices. So let's set that as such.

Bootstrapping the Angular App

All right, cool. So let's do some Angular specific stuff now. So on our

html

tag, why don't we use this as the point that we bootstrap the application. So to bootstrap we use

ng-app

. And let's call this

authApp

. And so now let's save that and let's come over here and create a new file. This one's going to be for our

app.js

. And let's get things going here. So we'll do

'use strict'

and then let's say we want

angular

. We want a module called

authApp

.

And here, of course, we need to put our dependencies. So we can say that we want

auth0

. That's the

auth0-angular

package. We also want

angular-storage

. We need

angular-jwt

.

ngMaterial

is our Angular Material package. And then finally, we want

ui.router

. All right, cool. So now let's test things out, just to make sure everything is working. And maybe we'll just come over here to the body tag and we can say, maybe,

ng-init

has this

hello

property that is equal to the message of

hello, world

.

All right, so let's see if we can successfully template this out. We come back over to the command line and we do an

http-server

to get going. That's going to serve the app at

localhost:8080

. So let's come over here and we'll do

localhost:8080

. And there we go. We've got

hello, world

. Cool. So now what we're going to want to do is set up our components for this app.

Setting up the Components

So for this simple app, we'll need three components. We'll need a home component, a profile component, and then a toolbar component, which will just be a directive for our toolbar up at the top. So let's head back over to VS Code and we'll set up those components. So we'll want a new directory here. We'll call it

components

. And then within

components

, let's set up our three subdirectories. So we'll want

home

and then we are also going to want

profile

. And then finally, what we'll want is our

toolbar

. So for the

home

component, really all we need is a simple HTML file that's going to give us a little bit of a message that we can display when the user first arrives at the application. So here within

home

, let's create our new file, and it's going to be

home.tpl.html

. And then how about we just do a simple

md-content

tag. So within that content, we can actually put our message.

So we'll do an

h1

and let's just say, "Welcome to the Angular auth app." Cool. So then after that, maybe we'll have an

h3

. And within there we can say, "Login from the toolbar above to access your profile." And that'll give us some simple messaging for the home page. And then over here in our profile, we're actually going to need a controller as well. So let's say we want

profile.ctr.js

.

And then we'll also want our

profile.tpl.html

. So first, let's go through the steps of setting up our controller. So we're going to want our IIFE here, our Immediately Invoked Function expression. So let's do

'use strict'

, to use strict mode. And then we want our module, which we've called

authApp

. And we want to create a controller. This one will be called

profileController

. And let's say that the callback here is going to be pointed to a function called

profileController

.

So we want a function called

profileController

and it's going to need

$http

. We're going to need

$http

to make some requests afterward. And let's bind our local capture variable, so we'll say we want var

vm

for view model. And it's going to be pointing to

this

. And why don't we just test things out for now. So we'll say

vm.message = 'hello'

. We can use that just to make sure everything is coming through properly.

Then over here in our template, for the time being, why don't we just say that we want, maybe, and

h1

and we want to say we want to get our message. All right, so then let's set up our

toolbar

directive. So our directive is going to need two files as well. The first one is going to be for the actual directive code, so we'll say

toolbar.dir.js

. But we also need a template for it, so let's do

toolbar.tpl.html

.

And then within the directive, let's just set it up in a simple way for now, just again to test things out. So we can come down here. We'll do

'use strict'

again. And then let's do

angular

and we'll do our module

authApp

. This time we want our directive, so it's going to be called

toolbar

. That's how we'll get ahold of it in our templates. And let's pass as a callback a function that we'll define below called

toolbar

.

Setting up the Toolbar

So we want a function called

toolbar

, which is going to return an object, our directive definition object. So we will return a template URL. Let's go to

components

,

toolbar

, and

toolbar.tpl.html

. That's the file we just created over here. And then let's give it a controller. And we'll say controller is going to be

toolbarController

, which we'll define below in just a second. And then, of course, we want to use

controller as

, and we'll say we want to use it as

toolbar

.

All right, so that's the directive definition object, the DDO that we need to return for the directive. And so let's put in our controller function now. So function

toolbarController

. And for now, we don't really need too much in here. Let's just leave it as is for the time being. We'll come back to it and put in what we need in just a little while. All right, so then to test things out here in our template, let's get our

md-toolbar

going.

So we can do md toolbar. And within the toolbar, let's do a

div

. We want to give this a class of

md-toolbar-tools

. And then let's give it an

h2

right within there and we'll say that we want to call this "Angular Auth". And then if we come over here and we give it a

span

with some

flex

, then that's going to put some space between this spot within the toolbar, which is going to show up on the left, and whatever we want to have show up on the right side of the toolbar.

So on the right side of the toolbar, let's have some buttons that are going to allow us to control our login and logout. So we want an

md-button

. And let's just put "Login" within that for now. We're going to come back to these and put some conditions on these buttons once we have everything set up. But for now, let's just put "Login" there. And then this one's going to say "Profile". And then let's have our "Logout" button.

And as I'm sure you're probably thinking, we need to conditionally hide and show these buttons, which we'll get back to you in just a little while. All right, so now of course, we need to come over to our

index.html

and get some references to those files we just created. So let's do a script tag and we'll point first to our directive, maybe. So we'll say we want to get our components folder and we need our toolbar folder within there. And let's grab

toolbar.dir.js

.

Setting Up Routing

So there's our directive. And then we also want our

profileController

. So over here, let's call this

profile

. And then we want

profile.ctr

. So what we can do up here now is we can take out our "hello" message. And since we've got our directive coming through, we can just do a toolbar like this. So that will be the top toolbar, but we also need an area where we can have our different views show up that we set up with routing.

So let's have a

div

and let's give it a

layout-padding

attribute, so that's going to give it some padding around it from ng material. And within here, we'll want our

ui-view

. This is going to be where we place all of the different views that come through via our routing. And they will show up right here within this

div

. So to set up routing, we can come over here to our app.js and let's do some configuration now.

We'll want to configure our module, so let's do

config

. And we need to pass it a function. We need some providers now so that we can actually use these different packages that we've pulled in. So firstly, we'll need

provide

. And then we'll also need

authProvider

, so that's going to be the provider that's given by Auth0. For our routing, we'll need

urlRouterProvider

. We'll need

stateProvider

so that we can set up our different states.

We'll also want

httpProvider

, because we need to actually do some HTTP interceptors, which we'll see in a little while. And then finally, we want this provider called the

jwtInterceptorProvider

. All right, so now within the

config

body, what we can do first is just set up our routing. Before we set up any of the authentication pieces, let's just make sure that our routing works. So let's do

urlRouterProvider

. And we want to say effectively anything other than the routing we've set up, we want to send the user to the home route. Then

stateProvider

, let's set up our routing so we can do

stateProvider

. And let's say the first state that we want is going to be the

home

state. And then object that we pass in, we can give it a URL of

/home

. And the template is going to be coming from our

components

directory, and

home

and then

home.tpl.html

.

So then below, we can set up another state and let's call this one

profile

. And the URL for this can just be

/profile

. And then we want a

templateUrl

of

components

. And we want the

profile

directory in this case. We want our

profile.tpl.html

. And I'm just realizing, I forgot to put

templateUrl

here. I just put template, so let's fix that up. And so now the controller for this state, for our

profile

state, let's do

controller as

.

So we'll say controller is going to be

profileController as user

. We'll do an alias of user for this case. Okay, so now we can actually test this out to see if it works. And there's probably a good chance that I've made some mistake somewhere, but let's check things out. So we get our message, we get our welcome message, but we're not getting our toolbar up there. So let's see if we get any error in the console.

We don't have any errors. Let's see what's going on here. So here, in the directive, I see what it is. I've forgotten to actually execute this immediately invoked function expression. And I bet that I also forgot it over here in the profile controller. Yes, I did. So that's a silly mistake on my part, but just make sure you are actually executing these functions here. All right, so back over here. Let's test it out again.

So if we refresh. There we go. We've got our toolbar coming through and we've got our login, profile, and logout buttons up top. And if we want to, we can try navigating to, say, the profile route. And if we go to the profile route, we don't have anything coming through. And I think what we forgot to do is, over in the template, we forgot to use our alias. So

user.message

is what we need there.

Let's check this out again. There we go. We've got our

hello

message coming through. Okay, so we've got the base of the application set up. In the next lecture, we're actually going to flip over to the backend and set up a really simple server with NodeJS. And then once that's in place, we'll be able to actually flip over and finish up the rest of our Angular app.

---

The Tricky Parts of AngularJS Auth

Transcript

Setting Up Middleware

Okay, the next thing we're going to want to do is set up our server. So let's head over to the command line, and what we need to do is actually set up a brand new project. We need to set up a separate project for the backend, because remember, our front end and our backends are effectively separated. So we need to go through the

npm init

stages again for a separate project.

But why don't we keep the same route directory. Let's go into our

angularjs-auth

directory that we've already set up, and let's create a new directory called

server

. So we'll

mkdir server

, and then let's go into

server

. Within

server

, why don't we actually do

npm init

again. So

npm init

. And the name for this one can be kept as

server

, or we can do something like

angularjs-auth-server

. We can keep the defaults here. We'll say okay to that.

And then we need to install the dependencies here. What we'll need are just a few dependencies, so let's install Express. We'll also want express-jwt, which is going to be a package that provides us some middleware that allows us to check for a JSON Web Token when it comes in, and then pass the user through to access the resource they're looking for if they have a valid JWT. And then, because we're doing cross-origin requests, we'll need cors.

Once that gets installed, let's head back over to our editor, and we can actually set things up in our server directory here. So you see, we've got our

node_modules

and our

package.json

file. Let's set up just one more file that we'll need, and let's call this one

index.js

.

And then here, within our

index

file, let's

require

the things we'll need. So we're going to need express. So our

var express = require('express')

, and then we can initialize our app. So we can say our

var app = express()

. Then we'll need our JWT middleware, so let's say our

var jwt = require('express-jwt')

. And then, finally, we'll need cors. So our

var cors = require('cors')

. Then after this, the first thing we should actually do is tell our app that it should be using cors. So we can do

app.use(cors())

.

Then why don't we set up our middleware next? If you're not too familiar with middleware, essentially what it does is it allows us to provide this layer of protection that requests to our endpoints have to pass through in order to get at what they're looking for. This is useful for us, because it allows us to set up some checks before the request is able to pass through to the resource.

So instead of checking within each of our endpoints explicitly, whether the user has a valid JSON Web Token, what we can do is instead set up a middleware once, and then just apply that middleware to our different endpoints. So let's see what that looks like. We can say

var authCheck

. That will be the name of our middleware. We'll say that's equal to

jwt

, which is our middleware package. What we want to do is provide it a configuration object. On this object, what we need is our secret. This is going to come from Auth0.

The secret keys that come from Auth0 are Base64URL encoded, so we need to actually decode these. So let's do a

new Buffer

, and the first argument to this is going to be our secret. To get the secret, we can go over here to our Auth0 dashboard, and then within our applications that we have listed here, we can go to our default app. And we can just copy over our secret.

I'll be changing this secret key of mine right after this video is done, so there's no sense in trying to use it, just as a heads up. Then after this argument, we need to say

base64

. So that's going to decode it as Base64. And then the next key is going to be our

audience

. The

audience

is going to be our Auth0 Client ID. So we come over here, we can grab our public client ID. We'll copy that over, and we can just put that in as a string.

Setting Up the Endpoints

All right, so that's our JWT middleware. And this middleware can now be applied anywhere we want. And we can get a sense of that if we set up some endpoints. This is going to be a really simple app. All we really need are two endpoints, one being public and the other being private, just so we can see how it works when we actually protect our data api.

The first one we'll do is our public endpoint. So we'll do

app.get

, and we want to point this to

api/public

. So a really simple endpoint called

public

, and then let's give a callback that takes a

request

and a

response

. For the

response

, let's respond with some JSON. So we'll do

response.json

, and it's going to be an object that we return with a message. And we'll say, maybe, "Hello, from a public endpoint. You don't need to be authenticated." All right, cool. So that's our public endpoint.

Now, let's just do what is, essentially, almost the same thing, except protected by our middleware for a private endpoint. So up here, let's change this over to private. And within the message now, we can say, "This is going to be a private endpoint." And we do need to be authenticated to see this endpoint.

Now, all we really need to do to protect this endpoint is pass in our middleware. And the middleware goes as the second argument. So we can pass in

authCheck

, just like that. So now, this endpoint will be protected by our

authCheck

middleware, and it will require that there's an

Authorization

header present before it allows the user to get through to this endpoint.

Then, as the final step, let's just do

app.listen

. We'll listen, maybe, on port 3001. And then, maybe let's just log to the console that everything is working. So we'll say, "Listening on localhost 3001."

Okay, so now we can test this out to see if it's working properly. So let's go over here to the console, and let's do

node index.js

to fire up the server. We get "Listening on port 3001." And then we can just go over to a new tab, and let's go to localhost 3001. We'll go to

api

, and let's try the

public

endpoint. So there we go. We've got our JSON response. We've got our message coming through just fine.

And if we go to

private

now, what we see is we've got "No authorization token found." So this private endpoint is now protected and not accessible unless the user sends a valid json web token.

So this is really powerful, because now you can set up any kind of private endpoints that you want. You can set up endpoints where you maybe retrieve some data from a database, and only if the user has a valid JWT will they be able to get that data. So the routes are protected. But, of course, now we need to actually get a json web token for our users, and we need to be able to send it from Angular to our back end when we make an HTTP request for these resources.

We'll take a look at how to do that in the next lecture.

---