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. Signing Up for Auth0

Signing Up for Auth0

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.