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. Enabling Social Login

Enabling Social Login

Why don't we go through the steps to see how to enable another social provider in our application. If we remember, when we log in, we've got this option to sign in with Google, and that came by default for us because that's the only social provider that's enabled by default when we sign up for Auth0. But let's say that we want users to also be able to sign in with their Twitter account. To do this, let's go over to our Auth0 dashboard, and that's at And then, over here in the connections area, we can go to "Social" and we can see a list of all of the social providers that we can use for our Auth0 account.

And, once again, we're able to use two of these social providers at no cost at all, with the free plan. So let's say we want to use Twitter, well, we can just come over here and enable it like this. And what we'll see right away is that we've got to enable some settings here for our Twitter connection, and we need a consumer key and a consumer secret. So why don't we go through the steps to get a consumer key. And right at the start here, what we get is a link to go the Twitter application management area where we can register a new application.

So let's create a new app, and this is where we'll put in some of the details for our application. The name, for this case, can be "AngularJS Auth", and the description will be "AngularJS authentication sample". And the website, I'll just use my own in this case. And the callback URL is going to come from Auth0. So this is going to be specific to our Auth0 account, and we can actually just grab it from the documentation right down here in step number three. So let's grab that here, and we'll copy it over to our callback URL input right there.

And then we'll come down below, and let's just agree to the terms and we'll go create our application. So here we can see the application has been created, and we're able to get our keys and access tokens from this tab right here. And just like always, I'm going to be regenerating my keys right after I'm finished recording, so no sense in trying to use them. But anyhow, this is where we get our consumer API key and our consumer secret. So let's head back over here to the documentation and just check for any additional steps that we need to take.

So what we can do next is copy over our consumer key, so let's grab this. We'll just copy it as such and come back over to our social connections, and let's paste that in here. And, likewise, let's grab our consumer secret. And now let's hit "save". And it says, "Connection settings saved." What we can do is test it out. So we've saved that, let's get out of here, and let's give it a try. We'll flip this to the on position and we can try it if we hit "continue". Let's give it a try down here. So we get, "Authorize AngularJS Auth to use your account," we'll say, "Sign in." And this where we can sign in with our Twitter credentials. And we get the message, it works. All right, perfect.

We can close down all of these tabs now, and let's head back over to our application and let's try signing in with our Twitter ID. So let's try logging in again. Here we can see that my Twitter account is still remembered because I've just tested it out in the Auth0 dashboard. So if I click there, what we'll get is a redirection back to the application after the authentication goes through. And just like we were authenticated with username and password before, we see that we've got a JSON Web Token in local storage. We've got our ID token and our profile, so we're good to go to access our application. So there's an example of how we can enable a social connection in Auth0, and then make use of it in our application. In the next lecture, we'll see how to use multi-factor authentication so that we can make our app even more secure.