Table of Contents

How to Add Auth0 OIDC Authentication to a Web Application

6 minutes read
Table of Contents
Auth0 OIDC authentication to a web application diagram

Traditionally, securing web applications by integrating them with cloud Identity Providers (IdP) has been a difficult task. It requires an understanding of cybersecurity best practices, OIDC/SAML protocols, and more. It also demands precious engineering time, as well as learning multiple types of SDKs distributed by the IdP. And companies can’t afford to shortcuts or they risk poor implementations that create potential security vulnerabilities.

 

An easier way to secure applications with Auth0

In our previous article, we introduced how to secure an application with Azure AD and Datawiza in 5 minutes using a configuration-based approach rather than coding. In addition, Datawiza supports many other IdPs, such as Okta, Auth0, Keycloak, and so on.

 

In this tutorial, you will learn how to implement OpenID Connect (OIDC) SSO authentication for a web application with Auth0 and Datawiza. “Application” here refers to Regular Web Applications that perform most of their application logic on the server (e.g., ASP.NET, PHP, or JAVA, Golang, Python). Mobile applications (iOS and Android) and Single Page Applications (e.g., AngularJS, Node.js, or React) are not included.

 

Introduction to the Datawiza Platform

The Datawiza platform is a cloud-delivered, SaaS-based access management solution. It includes a data plane and a control plane: Datawiza Access Proxy and Datawiza Cloud Management Console (DCMC), respectively.

 

Datawiza Access Proxy is a lightweight, container-based access proxy deployed close to your application via the sidecar (agent) or gateway mode. It talks to Auth0 on behalf of your applications, so you don’t need to worry about the integration work. DCMC is a cloud-based management console where you can configure and manage the policies of Datawiza Access Proxy.  Unlike traditional Web Access Management (WAM) solutions (CA Siteminder, Oracle Access Manager, IBM), our SaaS-based design makes the entire platform much easier to access and use.

Create an application in Auth0

First, we need to create an Auth0 application in the Auth0 console. When performing this step, make sure to log in to your account on Auth0. Visit the link here to create a developer account.

 

You can skip this step if you already have an application with the following values: Domain, Client ID, and Client Secret.

 

Create an application after you log in to Auth0.

 

Enter the application name and choose Regular Web Applications, then click CREATE.

Select the Settings tab and fill out the form. Follow the steps below:

  • Allowed Callback URLs: e.g., http://localhost:9772/authorization-code/callback
  • Allowed Logout URLs: e.g., http://localhost:9772
  • Use the default settings for the remaining fields

Then click SAVE CHANGES.

On the same page, be sure to save a copy of Domain, Client ID, and Client Secret. You will need these values later when establishing the connection.

 

Choose Users under Users & Roles Tab and create a test user.

You have now registered a web application on Auth0. Next, you will create a simple configuration in the DCMC.

 

Simple configurations using Datawiza Cloud Management Console

First, log in to the Datawiza Cloud Management Console (DCMC) cloud. If you do not have a DCMC cloud account, you can create one by email from the DCMC login page. Also, we provide social login functionality with Microsoft, GitHub, and Google to simplify logins for you.

 

The Get started function will guide you through the configuration. After logging in to the DCMC, click on the yellow “Get started” button and follow the steps.

 

Enter some basic information, such as the deployment name and provisioning key name:

 

Now Add an Application:

 

Configure your application with the following values:

  • Platform: Web
  • App Name: Demo App
  • Public Domain: http://localhost:9772
  • Listen Port: 9772
  • Upstream Servers: http://host.docker.internal:3001
  • Default Action: Allow

 

Note that Upstream Servers is the address of the application for which you want to enable SSO. In this tutorial, we will provide a header-based app running on port 3001.

  • If you use Mac or Windows, then set the Upstream Servers to http://host.docker.internal:3001 (requires Docker 18.03+).
  • If you use Linux, use ip addr show docker0 to get the docker host IP (e.g., 172.17.0.1) and then set Upstream Servers to http://172.17.0.1:3001 (see this for more details).

 

Next Configure the IdP:

Select OIDC as the Protocol and Auth0 as the Identity Provider. Input the Domain, Client ID and the Client Secret you saved when creating the app in Auth0. Then click Create.

 

In the last step, we will provide the command lines to pull the Datawiza Access Proxy image and the docker-compose file to run the Datawiza Access Proxy .

 

NOTE: In this tutorial, we use Docker and docker-compose to deploy the Datawiza Access Proxy. Please ensure that you have already installed both of them in your environment before running the Datawiza Access Proxy.

 

Execute the command lines in steps 1 & 2 and note down the docker-compose file in step 3.

 

Run Datawiza Access Proxy as a sidecar (agent) to your application

After finishing the configuration in DCMC, you can run the Datawiza Access Proxy with the YAML file noted down in the previous step. In this part of the tutorial, we need to add our header-based app to the YAML file for testing purposes. The final docker-compose YAML file should look like this:

version: ‘3’
services:
datawiza-access-broker:
image: registry.gitlab.com/datawiza/access-broker
container_name: datawiza-access-broker
restart: always
ports:
– “9772:9772”
environment:
PROVISIONING_KEY: #############################
PROVISIONING_SECRET: #############################

header-based-app:
image: registry.gitlab.com/datawiza/header-based-app
container_name: ab-demo-header-app
restart: always
ports:
– “3001:3001”

 

Now, we can use docker-compose to create and start the Datawiza Access Proxy:

docker-compose -f datawiza-access-broker up -d

 

That’s it. After executing the command above, the header-based app should have SSO enabled with Auth0.

 

Now, let’s give it a try.

 

Open a browser and type in http://localhost:9772. You should see the Auth0 login page as follows. Use the test user we created in the previous step to log in.

 

After logging in to the Auth0, the header-based app will be shown.

 

Summary

This tutorial has shown you how to secure a web application with Auth0 using Datawiza — in minutes instead of hours or days. Get a free trial by signing up/in here. Please email us at contact@datawiza.com if you need any help or have any questions.

Written by the Datawiza team — hope you enjoyed! Join us if you have any questions or need any help on our Discord server. 

Join our Discord server today! 👋Join
+