TL;DR
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)
Pre-requistes
- Ensure you have a Auth0 tenant <you can signup for a dev tenant using https://auth0.com/signup>
- Ensure you have Azure tenant available for configure App App Service and deploying your app
- Code editor <In my case, I have used Visual Studio Code>
- Install NodeJS on your laptop <https://nodejs.org/en/download/>
- 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 <https://auth0.com/docs/libraries>
<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
- Follow the pre-filled information to integrate your SPA with Auth0 (CIC)
- 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
- Allowed Callback URLs
- Allowed Web Origins
- Allowed Logout URLs
- 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 (https://portal.azure.com/) 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: XXXXX..azurewebsites.net> 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.
Summary
We were able to successfully protect our React App with Auth0 irrespective of where the React App is running or hosted.
