Authentication + Single Sign-On with Auth0
User management is an essential part of any application. Whether it’s an e-commerce business or a social media platform, it’s important to have proper authentication protocols and access-control measures in place. Data security is very crucial in this day and age and if you’re starting an online business, it certainly needs to be on the very top of your priority list. There are multiple service providers who will handle these security measures for you. We’ll be focusing on one such player, Auth0. This article mainly focuses on authentication for your Single Page Application(SPA) but I’ll also explain how you can implement Single Sign On, yet another handy feature, with Auth0 in the second part of this article. Let’s get started.
Part 1 : Authentication
Authenticating your SPA with Auth0 will literally take you less than 5 minutes. Follow the steps below and you’ll get there in no time
Step 1: Create an Auth0 account.
Create an account, here, with your details or you can simply use any of their social logins and move on to the next step.
Step 2 : Create an SPA application.
Once you’re done with the registration, you’ll be redirected to your dashboard. It should look something likes this
Select the Applications option from the sidebar. It’ll open up your list of applications, if there’s any. Click on “Create an application”.
A dialog opens up which prompts you to enter your application name and also select it’s type. You’ll find 4 application types from which you can select any, based on you choice of technology. This article will focus on Single page web applications, specifically Angular, but again you can go with any of them.
Once you’ve selected the type of your application, click on Create. Select the framework/language of your choice for the application. After that you’ll be provided with 2 options, either to integrate auth0 configurations with an existing application or to download a sample application. Since we’re starting from scratch, we’ll go for the second option. This option will also auto populate your auth0 configurations so you don’t have to manually add anything to your code, which is great. Once you select the second option, a dialog opens up with installation steps, which are pretty straightforward.
After downloading the project, go to your settings tab for your application. If you scroll down a bit, you’ll find 3 input fields for Allowed Callback URLs, Allowed Web Origins and Allowed Logout URLs respectively.
Allowed Callback URLs is the list of endpoints to which your application can redirect to once a user has logged in.
Allowed Web Origins is the list of endpoints which are allowed to send requests to your application.
Allowed Logout URLs is the list of endpoints to which your application can redirect to once a user has logged out.
As mentioned in the instructions screenshot, paste http://localhost:4200 in all the three fields and click on“Save changes ”at the bottom. These localhost endpoints are only for testing purposes. Obviously, the endpoints will change once you deploy your application to a server. We’ll just focus on local implementation in this article to keep it simple.
The 4th step will require nodeJs, so install it before you proceed. After that simply open the project in a code-editor of your choice, and run the following command
npm install && npm startThere’s one additional step that’s not mentioned in the instruction list, at least in case of the Angular application type. It may not be the case for other project types. This is something that I observed while working with the Angular example. In your project directory, there will be a file called auth_config.json. All your important auth0 configurations are present in this file in JSON format. In this object there’ll be a key called audience. You have to change the value of this key to your audience value. You can find this value in your dashboard. Select API option from the sidebar. The string against API audience is the value you’re looking for. Copy the value and replace it with the current value in your auth_config.json.
That’s it. Open http://localhost:4200 on your browser and you’ll see your demo application. Your application might look different based on the application type you selected in the beginning, so in case of a node express application or a react application it might not look exactly like this but the main components will remain the same.
Click on the Log in button on the top right. You’ll be redirected to auth0’s authentication window. If it’s your first time logging in, sign up first and then login with the same credentials. If the entered credentials are correct, it’ll authorize your app once and you’ll be logged in into the application and with that you’ve officially implemented authentication with auth0.
You can further add social integrations to your current system authentication. Just select the Connections option from the sidebar and further select the “Social” option. Create a connection by selecting an option from the list of provided social integrations and link it to your account. That’s all.
Part 2 : Implementing Single Sign On for your applications.
Before actually implementing Single Sign On(SSO), let’s first quickly understand what it actually means. SSO basically lets you authenticate into multiple applications with a single set of credentials. For instance, if you log in into your gmail account, you are automatically authenticated into Google’s other applications like Youtube or Google Drive. This is a very handy feature because you don’t have to memorize different credentials for different applications, and also from an organizational level, the task of managing identities across the board becomes lot easier.
For us to see SSO in action, we need at least 2 applications. Since you already have an application from the first part of this article, you can follow the same steps to create a second application. The only thing that’s going to change this time around would be the 3 URLs (Allowed Callback Urls, Allowed Web Origins, Allowed Logout Urls). Assuming that you’ll be serving 2 applications locally instead of one, you’ll have http://localhost:4200 and http://localhost:4201. So make sure you change the values of the 3 URLs in your settings panel to http://localhost:4201. Rest of the steps will exactly be the same.
And that’s literally it! Any number of applications that you add to a tenant, all those applications will by default have SSO implemented in them. That’s how easy it is to implement SSO with Auth0. You can now run both your applications on localhost:4200 and localhost:4201 respectively. Try to login into your first application and then go ahead and refresh your second application. You’ll see that you are logged in with the same set of credentials in your second application. Now logout from your second application and reload your first application. You’ll be logged out from both of your applications even though you manually logged out from just one of them.
Again, this is just a local implementation of authentication and single-sign-on using auth0. A live implementation of the same will have some additional changes and build configurations. You can read about all these services and more, in their official documentation.
Drop a comment if you need help with any particular step or if you have any questions. I’ll be happy to help. Cheers!
