Authentication Made Easy with Auth0: Part 3

John Tucker

Published in

codeburst

4 min readSep 25, 2018

We wrap up this series by securing the application.

This article is part of a series starting with Authentication Made Easy with Auth0: Part 1.

Secure Application (Code)

We secure the application (the SPA) using the Auth0.js library; in this particular case we use the CDN distribution. This simplified application behaves as follows:

The application starts by redirecting the browser to Auth0
After authorizing at Auth0, the browser is redirected back to the application with a hash appended to the URL
The application extracts the access and id tokens from the hash
If properly authenticated, the application enables the button to access the secured API using the access token

index.html

Observations:

We still need to get the clientID configuration; in next section
The domain is the domain part of the issuer we used earlier
The audience is the audience that we used earlier; indicates the API we are looking to access
The redirectUri is where the browser is redirected after the user authorizes at the Auth0 page; in this case it is the application itself
This example only uses the access token; we will explore the id token in a later section

Secure Application (Configuration)

From Auth0, we create an application configuration:

Name: In this case, named it Application
Type: Single Page Application
Allowed Callback URLS: http://localhost:3000
Application Logo: Without a logo set, we get a broken image on the Authorize App screen; In this case, used a cat image

Secure Application

Using the generated Client ID, we update the clientId in index.html.

index.html

note: As the Client ID is in the client-side code, it is not considered a secret. At the same time, the process is protected by the Allowed Callback URLS configured in the application configuration at Auth0.

With this in place, loading the application redirects the user to Auth0.

One authenticated, Auth0 requests the user to share their profile to Application.

If the user grants access to their profile, they are redirected back to the application (with hash appended to the URL). Pressing the get button accesses the secured API and displays the expected result in the console.

Identity

While we have used the access token to validate the user accessing the API, we currently have no mechanism to identify them. By updating our server we can obtain a unique identifier for the user.

index.js

with console output:

{ iss: 'https://larkintuckerllc.auth0.com/',
  sub: 'auth0|5ba99947dcd68921600279e2',
  aud: 
   [ 'http://localhost:8080',
     'https://larkintuckerllc.auth0.com/userinfo' ],
  iat: 1537867887,
  exp: 1537875087,
  azp: 'mXOqTlwyy2wrxfKZsTe64GIx4jZTfJLT',
  scope: 'openid profile' }

The sub entry matches the user_id entry for the Auth0 user.

Profile Information

The id token contains addition useful profile information, e.g., the users nickname and gravatar. However, like the access token, it needs to be validated and decoded to be useful.

As a quick check, one can use the JSON Web Token Debugger to inspect the contents of the id token.

However, there is an easier way to obtain this same profile information without using the id token. We can rather query Auth0 for the profile information using the access token (contains the user’s identifier).

index.html

With the result:

Wrap Up

While there is a lot more to learn, e.g., authorization, we will stop here just having covered the basics of authentication with Auth0.

Enjoy.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

Authentication Made Easy with Auth0: Part 3

Written by John Tucker