Secure React App using Auth0(CIC) and deploy to Azure App Service


I had a customer recently ask me, if their React app which is being integrated with Auth0 (CIC) would continue to work if the React app is hosted out of Azure App Service ?

Hence this article, as this more of proves the fact that irrespective of where the SPA is being hosted, Auth0(CIC) would be able to handle the Authentication if the application is protected by Auth0(CIC)


  1. Ensure you have a Auth0 tenant <you can signup for a dev tenant using>
  2. Ensure you have Azure tenant available for configure App App Service and deploying your app
  3. Code editor <In my case, I have used Visual Studio Code>
  4. Install NodeJS on your laptop <>
  5. From the Visual Studio Code Extensions, download and install the Azure Account and Azure App Service extensions to deploy the app on Azure.

Create a SPA App in Auth0(CIC)

Auth0 has over 60+ SDKs libraries support <>

<In my case, I am going to use the Auth0/CIC’s Sample React App>

In your Auth0 (CIC) tenant –> Applications –> Applications –> Create Application –> choose ‘SPA” and give a name and hit ‘Create’

<Auth0 provides you with 4 applications types to choose from depending on your Application type.>

Under ‘Quickstart’ tab –> CIC provides you with 2 options

  1. Follow the pre-filled information to integrate your SPA with Auth0 (CIC)
  2. Sample configured app by Auth0 for quick testing or validation

In my case, I am going to use the sample app provided by Auth0(CIC) –> Download the sample app

On the next screen, Auth0 would provide you with steps to set values for

  1. Allowed Callback URLs
  2. Allowed Web Origins
  3. Allowed Logout URLs
  4. Installing and running of the app onto your local environment

<Screenshot of the configuration being made on your application in Auth0(CIC)>

Run the App locally

<In my case, I am using Visual Studio Code to run my React JS App locally>

Since we have downloaded the Sample app from Auth0, you would be able to view this file (auth_config.json) which is already pre-populated with Auth0 tenant settings for my React App

domain: would be your Auth0 tenant detail

clientID: Auth0 application’s credential

audience: custom API that you can consume from your application

when you run the command ”npm install & npm start”

Your app would start running locally successful, you can now access the url (http://localhost:3000)

Now you can click ‘Log in’

Click Accept

You will now be logged into your React JS app using Auth0

Create Azure App Service (Azure WebApp) on Azure

Azure App Service is an HTTP-based service hosting web applications.

  • Login into Azure Portal ( using your Azure Admin credentials
  • Search for ‘App Services’
  • Click ‘Create’ –> ‘Web App’

Using a free tier plan

Click Next until you until ‘Review + Create’ tab

Now click ‘Create’ button, and it would start creating the Web App in Azure App Service

Azure App is complete now, If you wish to explore the app you can click on ‘Go to resources’ button.

Deploy Auth0 React App on Azure App Service

<In my case, I am using Visual Studio Code to run my React JS App locally>

Open Visual Studio Code –> Access your folder where you are running the React App from –> Open terminal –> Enter command “npm init

Next, Run command “npm run build

A ‘build’ folder would be created in your React App project folder

Deploy React App to Azure App Service

Go to you Auth0 tenant –> Applications –> Applications –> “KJ React App” <In my case>

Add your Azure App Service app url <ex:> in

  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Orgins

Click ‘Save Changes’ in Auth0 tenant for your application.

In Visual Studio Code –> React App Folder –> Build –> right click –> “Deploy to Web App”

Once successfully deployed, you should be able to access your React App using Azure App service

Click login –> you would be successfully redirected to “Auth0 login” where you can signup/enter user credentials to access your React App successfully.


We were able to successfully protect our React App with Auth0 irrespective of where the React App is running or hosted.

Leave a Reply