Auth0 badgeAuth0 University

Angular JS Authentication: Securing your app with Auth0

Angular JS Authentication: Securing your app with Auth0

  1. Course Catalog
  2. Angular JS Authentication: Securing your app with Auth0
  3. Setting Up the Angular Js App

Setting Up the Angular Js App

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.