Auth0 end-to-end application in 10 minutes

The adage says: “don’t reinvent the wheel.” Not everyone is a security expert to takes care of encryption algorithms. Auth0 plays an essential role in authentication and authorization. Some developers might handle the user’s identification independently; however, it’s error-prone, and there is a massive risk of screwing it up. Auth0 has several benefits because its enormous community of users already validates it.

Auth0 it’s easy to implement, has an adaptable authentication and authorization platform, and many other  benefits with it:

1. Decentralizing Identity from Applications:
The identity data is no longer stored in the application database.

2. Streamlined External Authentication:
Auth0 supports external identity providers like Google and Facebook

3. Ready to Go Authentication UI:
Auth0 hosts a login page that can be customized accordingly to the target application.

In this post, I will make a short tutorial on setting up a front-end and back-end app quickly with Auth0. The back-end will be written in .net, and the front-end in react. The idea is that we receive both ID Token and Access Token if the user identity is provided correctly to Auth0. The ID Token will be used to display information in the single-page application (spa), and the Access Token will be used to communicate with our API. The login process diagram is shown below. In short, let’s summarize the steps:

• 1-8: run against Auth0 servers having as the input the user credentials and output the Access Token and ID Token:
• 9-10: is the communication with our API, providing the access token received in step 8.

Setting the front-end

To create a single page application, let’s take the following steps:

1. Login to your Auth0 account.
2. Select “applications” on the left bar menu.
3. Click “create application” on the right top button.

If everything worked fine, now you will see the applications among the others. Let’s click on it to see the details. Let’s go into some of its configuration blocks quickly:

• Basic Information:

As the name says, we have the basic information and everything that must go to the spa configuration to set up Auth0 properly.

• Application Properties:

Here we can set the image which will appear when we log in. We can arrange a more refined login style in the Branding section; however, this short tutorial will not cover that.

• Application URIs:

 After the user has authenticated to Auth0, it must call our application back (step 8) and repeat the process when hitting the logout button. In this block, let’s set both URIs and allowed origins to http://localhost:3000.

If we go to the “Quick Start” tab, we will download a sample of the spa with all the configurations already set. You will be asked to choose an application technology; let’s select “React” for this tutorial. Once you’ve downloaded the project, you can open it and check the configuration. It must match your application’s basic information block. There will be another field called “audience,” which is the Auth0 API set in this tutorial. It is possible if you want to run the sample without the audience. Just run these commands in your terminal:

 npm install
 npm run

In the package.json file, it is configured which port it will run. By default, it is set to 3000. Note that it must be following the URIs that we’ve already set in the “Application URIs.”

If you started the app, you should be able to see this application:

If you hit the login button on the right top corner, you will be redirected to auth0 to provide your credentials. All the users here must be in the Auth0 users’ section of the dashboard. Let’s login with Google:

After the authentication, we will click on the profile and see some basic information about the logged user.

If we go to the “External API” tab, the “Ping API” button is disabled. It happens because we haven’t set our audience yet, which is the external API identifier. So it is going to be the tutorial’s next step.

Setting the back-end

Now that we have set the single-page “application,” let’s provide a back-end to authenticate. To do that, let’s take the following steps inside the Auth0 dashboard:

1. Login to your Auth0 account.
2. Select “APIs” on the left bar menu.

Click “Create API” on the right top button.

After you’ve created the API, it will show in the list. If you click on it, you can go to the “Settings” tab. In there is the identifier (POC-API), which is the audience we need to provide to our spa.

Now, if we go to the “Quick Start,” all the configuration we must provide to our back-end is integrated with Auth0.

Note that it is just a few settings; the variables here will be the “Authority” and the “Audience.” 

Now let’s create our POC back-end. First, let’s create a .Net Core Web Api Project and install Microsoft.AspNetCore.Authentication.JwtBearer package to it. 

Being that set, let’s create a policy for “Authorization” that requires only authentication. It could be expanded accordingly with the app’s needs. It is essential to distinguish between authentication and authorization:

• Authentication: Determines whether the users are who they claim to be. It is granted during identity verification.
• Authorization: Determines if users can and cannot access a given resource. 

In addition to that, let’s create a TestController for our front-end integration. It just returns “Auth0 works” in case of success.

 Going to the Startup class of the project, let’s configure it similarly to the Auth0 Quick Start tab:

It is everything we must do in the back-end part. Let’s go back to the front-end and make adjustments to call our brand new API. First, let’s place the right audience. As said before, it is our API identifier and then let’s go to the ExternalApi.js and change the API route to match ours.

If we go back to our “External API” menu, the “Ping API” button will be enabled and working.

Now if we go back to our External API menu, the Ping API button will be enabled and working.

This tutorial might be the beginning of an end-to-end application. If your login requires more integrations or verifications, Auth0 provides more advanced techniques for custom logins like actions and Hooks, which can be found here.