# NodeJS



--------------------------------------------------------------------------------
title: "Introduction"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.689Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Upload Object to Bucket (/en/cloud-scale/help/stratus/objects/upload-object/)
- Stratus SDK (/en/sdk/nodejs/v2/cloud-scale/stratus/overview/)
- Stratus API (/en/api/code-reference/cloud-scale/stratus/get-all-buckets/#GetAllBuckets)

--------------------------------------------------------------------------------



# Authenticate Catalyst Apps with Auth0

### Introduction

In this tutorial, we will be integrating **Auth0's Single Page Application** (SPA) authentication service with applications created or hosted on Catalyst. This integration employs industry standard **OpenID Connect** and **OAuth 2.0** authentication protocols making it possible to add end-users to Catalyst applications using third-party authentication services.

{{%link href="https://auth0.com/" %}}Auth0{{%/link%}}, much like Catalyst Authentication, is a cloud-based identity and access management platform that offers developers to add end-users to their application through Social Logins, multi-factor authentication, and more.

The client of your application will be rendered in the following manner:
<br />

The logic of this application is coded by employing the following Catalyst services and its respective components:

* {{%link href="/en/serverless/" %}}{{%bold%}}Catalyst Serverless{{%/bold%}}{{%/link%}}:
    - {{%link href="/en/serverless/help/functions/advanced-io/" %}}AdvancedIO Function{{%/link%}}: Will contain the logic validate Auth0 access tokens and fetch user details.

* {{%link href="/en/cloud-scale/" %}}{{%bold%}}Catalyst CloudScale{{%/bold%}}{{%/link%}}:
    - {{%link href="/en/cloud-scale/help/authentication/introduction/" %}}Authentication{{%/link%}}: We will implement {{%link href="/en/cloud-scale/help/authentication/third-party-authentication/introduction/" %}}Third-party Authentication type{{%/link%}} to allow third-party (**Auth0**) service to fulfill the authentication requirement of the Catalyst Application.
    - {{%link href="/en/cloud-scale/help/web-client-hosting/introduction/" %}}Web Client Hosting{{%/link%}}: We will host the client of the application using this component.

You will be using the {{%link href="https://console.catalyst.zoho.com/" %}}Catalyst web console{{%/link%}} and the {{%link href="/en/cli/v1/cli-command-reference/" %}}Catalyst Command Line Interface{{%/link%}} (**CLI**) to build this application.

{{%note%}}{{%bold%}}Note:{{%/bold%}} You will be given the code for the files to be included in the function and client components in this tutorial. You will just need to copy the provided code and paste it into the appropriate files as directed.{{%/note%}}

<br>

### Application Workflow

The workflow of how an end-user is authenticated using Auth0 and added as a user to your Catalyst application is detailed below:

1. The end-user will be provided the option to log in to the application.
2. After the user attempts to log in, they will be directed to the login elements generated by the Auth0 service. Here, the end-user will be provided the option to **Signup** or **Sign** using *Google social login*, or by providing their user information such as their name, email address.
3. After the end-user is authenticated by the Auth0 service, the details will be forwarded to the client with an authorization code.
4. The authentication logic in the backend function will be triggered and an API call will be made to the Auth0 service using the authorization code.
5. After this API call, the required user details will be passed to Catalyst, and a Catalyst custom token will be generated.

{{%info%}}{{%bold%}}Info:{{%/bold%}} The code to generate custom server token is also available in this {{%link href="/en/sdk/nodejs/v2/cloud-scale/authentication/third-party-server-token/" %}}help section{{%/link%}} and in the Catalyst console.{{%/info%}}

6. Now, the user details will be made available in the client and in the *User Management* section of the *Catalyst Authentication* component. The end-users' details along with the token information will also be stored in the browser cookie through the Web SDK, to ensure the session is maintained.
7. The user will now access your application through its endpoints. The Catalyst Security Engine ensures that all the components associated with the application are accessed securely by end-users.

{{%note%}}{{%bold%}}Note:{{%/bold%}} The token will only remain valid for {{%bold%}}one hour{{%/bold%}}. After that, the steps from {{%bold%}}5{{%/bold%}} to {{%bold%}}7{{%/bold%}} will be repeated in the background.{{%/note%}}

After the end-user is authenticated and the login session continues to persist, they can securely access all the end points of your application until the token's expiration time.

--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.689Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/prerequisites/"
service: "All Services"
related:
- Catalyst CLI Documentation (/en/cli/v1/cli-command-reference/)
- Catalyst VS Code Extension (/en/catalyst-extensions/vs-code-extension/introduction/)

--------------------------------------------------------------------------------


# Prerequisites

Before you begin building the application, you must have the following prerequisites installed on your system:

1. **Catalyst CLI**: Catalyst CLI contains a host of tools that enable you to initialize, develop, test, and deploy the components of your application from your local machine. We will be working with Catalyst CLI in this tutorial. You must perform the following actions:</br>
    - **Install Catalyst CLI**: Catalyst CLI is installed through NPM. You must have NPM and Node.js installed on your system before you install the CLI. Refer to the {{%link href="/en/getting-started/installing-catalyst-cli/" %}}Install Catalyst CLI help page{{%/link%}} for details on the prerequisites and the steps to install it.
    - **Log in to Catalyst CLI**: After you install Catalyst CLI, you must authenticate the CLI with your Catalyst account before using it. Refer to the {{%link href="/en/cli/v1/login/login-from-cli/" %}}CLI Login help page{{%/link%}} for the steps to log in from Catalyst CLI and the various options available for it.

2. **Any IDE tool for Node.js and client code development**: You can use any IDE to work with the *Advanced IO* function and the client code. Some popular choices include Visual Studio Code, and Sublime Text. Download and install an IDE of your choice on your system.

{{%info image="/images/tutorials/todo-list/vscode.png"%}}If you are a Visual Studio Code IDE user, you can install the {{%bold%}}Catalyst Tools{{%/bold%}} extension, and use your IDE itself in place of the CLI. You can find more details about the Catalyst VS Code extension from this {{%link href="/en/catalyst-extensions/vs-code-extension/introduction/" %}}help section{{%/link%}}.{{%/info%}}

--------------------------------------------------------------------------------
title: "Create Project"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.689Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/create-project/"
service: "All Services"
related:
- Catalyst Projects (/en/getting-started/catalyst-projects/)

--------------------------------------------------------------------------------


# Create a Project

Let’s {{%link href="/en/getting-started/catalyst-projects/#creating-a-catalyst-project" %}}create a Catalyst project{{%/link%}} in the Catalyst console.

1. Log in to the {{%link href="https://console.catalyst.zoho.com/baas/index" %}}Catalyst console{{%/link%}} and click **Create New Project**.
    <br />

2. Enter the project's name as "**Authenticate 360**" in the pop-up.
    <br />

Your project will be created and opened.<br />

--------------------------------------------------------------------------------
title: "Enable Third-party Authentication"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.693Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/enable-third-party-auth/"
service: "All Services"
related:
- Catalyst Authentication (/en/cloud-scale/help/authentication/introduction/)
- Third-party Authentication Type (/en/cloud-scale/help/authentication/third-party-authentication/introduction/)
- User Management (/en/cloud-scale/help/authentication/user-management/introduction/)
- Authentication Types (/en/cloud-scale/help/authentication/authentication-types/)
- Whitelisting (/en/cloud-scale/help/authentication/whitelisting/introduction/)
- Email Templates (/en/cloud-scale/help/authentication/email-templates/introduction/)

--------------------------------------------------------------------------------


# Enable Third-party Authentication

Next, we will enable the third-party authentication type for the Catalyst project.

{{%note%}}{{%bold%}}Note:{{%/bold%}} In this step, we are going to enable {{%link href="/en/cloud-scale/help/authentication/public-signup/" %}}Public Signup{{%/link%}}. We will be skipping the {{%italics%}}Whitelisting{{%/italics%}} and the code snippets section in the console. The code snippets will be revisited when we code our authentication logic.{{%/note%}}

To enable the third-party authentication type:

1. Navigate to the *CloudScale* service and click **Start Exploring**.
    <br />

2. Navigate to the **Authentication** component and click **Set Up** next to the **Third-party authentication** tab.
    <br />

3. You will be directed to the **Server-Side Configuration** code snippet. Enable **Public Signup** by clicking the toggle.
    <br />

4. Go through the confirmation pop up and click **Yes, Proceed**.
    <br />

5. Click **Next**. We will be revisiting the server-side configuration, when we code the authentication logic.
    <br />

6. Click **Next** again. We will be revising the client-side configuration, when the front-end of the application is being coded.
    <br />

7. For the purposes of this tutorial, we do not require the {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}} or the need to {{%link href="/en/cloud-scale/help/authentication/whitelisting/authorized-domains/introduction/" %}}authorize domains{{%/link%}}. So click **Finish**.
    <br />

Third-party authentication has now been enabled for your application.
<br />

{{%info%}}{{%bold%}}Learn more about:{{%/bold%}}<br />

* {{%link href="/en/cloud-scale/help/authentication/user-management/introduction/" %}}User Management{{%/link%}}

* {{%link href="/en/cloud-scale/help/authentication/authentication-types/" %}}Authentication Types{{%/link%}}

* {{%link href="/en/cloud-scale/help/authentication/whitelisting/introduction/" %}}Whitelisting{{%/link%}}

* {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}Email Templates{{%/link%}}{{%/info%}}

--------------------------------------------------------------------------------
title: "Initialize the Project"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.693Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/init-project/"
service: "All Services"
related:
- Initialize CLI Resources (/en/cli/v1/initialize-resources/introduction)
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction)

--------------------------------------------------------------------------------


# Initialize the Project

You can now begin working on your Catalyst project from the CLI. The first step is to initialize the project in an empty directory. This will be the home directory of your project, and all of the project files will be saved in it.

You can learn more about this from the {{%link href="/en/cli/v1/project-directory-structure/introduction/" %}}Project Directory Structure help page{{%/link%}}. You can learn about initializing a project in detail from the {{%link href="/en/cli/v1/cli-command-reference/" %}}CLI help documentation{{%/link%}}.

For this application, we will only be initializing the project. We will not be initializing any function or client components.

1. Create a folder for the project on your local machine and navigate to it from the terminal.
2. Initialize a project by executing the following command from that directory:
{{%cli%}}catalyst init{{%/cli%}}

Navigate using the **arrow keys** and select your preferred portal and click **Enter**. If you have no other organizations associated with the account, then the default will be selected automatically.

{{%info%}}{{%bold%}}Info:{{%/bold%}} {{%link href="/en/getting-started/catalyst-projects/#access-the-multi-org-portal" %}}Learn more about Catalyst's multi-org portal feature{{%/link%}}.{{%/info%}}

3. The CLI will now ask you to associate a Catalyst project with the directory. Associate it with the project that we created earlier from the console. Select **Authentication360** from the list and click **Enter**.
    <br />

4. Select **Functions** and **Client** using the space-bar and press **Enter** to initialize the function and client components of your application.
    <br />

5. The CLI will initiate the function setup. Select **AdvancedIO** function as the function type to code your authentication logic.
    <br />

6. Select the latest runtime of *Node.js* as the function stack.
    <br />

7. Enter "{{%badge%}}custom_token_generation{{%/badge%}}" as the package name, "{{%badge%}}index.js{{%/badge%}}" as the entry point, and your email address as the author, then press **Enter**. Alternatively, you can press **Enter** without entering inputs to fill in the default values. The CLI will prompt the initialization of the Node dependencies. Press **Y** to confirm the installation, and press **Enter** to confirm your choice. The Node modules will be installed.
    <br />

The CLI will now initiate the client setup.

8. Select **Basic web app** and press **Enter** to initialize your client as a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications" %}}basic web app{{%/link%}}.
    <br />

9. Enter a name for your client package and press **Enter**. For the purposes of this tutorial, we are naming our client package “{{%badge%}}Authentication360{{%/badge%}}”. You can use the same of provide a name of your choice.
    <br />

The Catalyst initialization is now complete.

The project directory is now set up with the client directory and the functions directory along with configuration files and dependencies. The project directory also contains the {{%link href="/en/cli/v1/project-directory-structure/catalyst-json/" %}}{{%badge%}}catalyst.json{{%/badge%}}{{%/link%}} configuration file and a hidden {{%badge%}}.catalystrc{{%/badge%}} file.

The structure of your project directory should now appear as shown below:
<br />

<br>


### Deploy Your Application

You will need to deploy the application to the Catalyst console to fetch the application URL. This URL is required to enable and Auth0 authentication service.

To {{%link href="/en/cli/v1/deploy-resources/introduction/" %}}deploy the application{{%/link%}} from the CLI:

Run the following command in your terminal from your project directory:

{{%cli%}}catalyst deploy{{%/cli%}}

The function is deployed first, followed by the client component. The URL endpoints of the components will be displayed in the CLI:

<br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can also use the {{%badge%}}catalyst deploy –only client{{%/badge%}} CLI command to deploy the client component alone, as the function component is not required to enable Auth0 service.{{%/note%}}

You can get the application URL at any point by navigating to the {{%link href="" %}}Web Client Hosting{{%/link%}} component.
<br />

We can now enable *Auth0* authentication service for your Catalyst application.

--------------------------------------------------------------------------------
title: "Enable Auth0 Authentication Service"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.693Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/enable-auth0/"
service: "All Services"
related:
- Third-party Authentication type (/en/cli/v1/initialize-resources/introduction)
- Auth0 Help Documentation (https://auth0.com/docs)

--------------------------------------------------------------------------------


# Enable Auth0 Authentication Service

Next, lets's enable Auth0 authentication for your Catalyst application.

To enable Auth0:

1. Navigate to the {{%link href="https://auth0.com/" %}}**Auth0**{{%/link%}}, and signup for the service.

2. After you get directed to the dashboard, click **Create Application**.
    <br />

3. Provide a name for your application, select **JavaScript** as the **Technology**, and select **Single-Page App** as your **Application Type**. Click **Create Application**.
    <br />

4. Click the **Settings** tab.
    <br />

You will be able to view and copy the {{%badge%}}Domain{{%/badge%}}, {{%badge%}}Client ID{{%/badge%}}, and {{%badge%}}Client Secret{{%/badge%}}.
<br />

5. Add the required Application URIs in the following format:
    * {{%bold%}}Application Login URI{{%/bold%}}: {{%badge%}}application domain/app/index.html{{%/badge%}}
    * {{%bold%}}Allowed Callback URLs{{%/bold%}}: {{%badge%}}application domain/app/home.html{{%/badge%}}
    * {{%bold%}}Allowed Logout URLs{{%/bold%}}: {{%badge%}}application domain/app/home.html{{%/badge%}}

You can fetch these URLs as directed in the {{%link href="/en/tutorials/third-party-auth/nodejs/init-project/#deploy-your-application" %}}previous step{{%/link%}}.

<br />

{{%info%}}{{%bold%}}Info:{{%/bold%}} We will be diving into and configuring the {{%badge%}}index.html{{%/badge%}} and {{%badge%}}home.html{{%/badge%}} pages, when we configure the client.{{%/info%}}

6. Enable **Cross-Origin Authentication** and provide the application URL as the **Allowed Origins (CORS)**, then click **Save**.
    <br />

The *Auth0* service is configured and enabled for your application.

--------------------------------------------------------------------------------
title: "Configure the Advanced IO Function"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.694Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/config-advancedio/"
service: "All Services"
related:
- Third-party Authentication type (/en/cli/v1/initialize-resources/introduction)
- Advanced IO Function (/en/serverless/help/functions/advanced-io/)
- Third-party Authentication SDK (/en/sdk/nodejs/v2/cloud-scale/authentication/third-party-server-token/)
- Auth0 Help Documentation (https://auth0.com/docs)

--------------------------------------------------------------------------------


# Configure the Advanced IO Function

Now, we will begin coding the authorization portal application by configuring the function component.

The {{%link href="/en/cli/v1/project-directory-structure/functions-directory" %}}function’s directory{{%/link%}}, ({{%badge%}}functions/custom_token_generation{{%/badge%}}), contains:
* The {{%badge%}}ndex.js{{%/badge%}} main function file
* The {{%badge%}}catalyst-config.json{{%/badge%}} configuration file
* Node modules
* {{%link href="https://docs.npmjs.com/files/package.json" %}}{{%badge%}}package.json{{%/badge%}}{{%/link%}} and {{%link href="https://docs.npmjs.com/configuring-npm/package-lock-json.html" %}}{{%badge%}}package-lock.json{{%/badge%}}{{%/link%}} dependency files

Before you start adding code, you need to install the following packages to ensure all required dependencies are satisfied.
* **Express**: The {{%link href="https://www.npmjs.com/package/express" %}}{{%badge%}}express{{%/badge%}}{{%/link%}} package is required to handle HTTP routes
* **Axios**: The {{%link href="https://www.npmjs.com/package/axios" %}}{{%badge%}}axios{{%/badge%}}{{%/link%}} package is required to handle outgoing HTTP requests

Navigate to the function folder present in the {{%badge%}}functions/custom_token_generation{{%/badge%}} directory and install the following packages using the command shown below:
{{%cli%}}npm install express axios --save{{%/cli%}}

<br />

You will be adding code in the {{%badge%}}index.js{{%/badge%}} file.

The Advanced IO function contains the following functionalities:

<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>Endpoint</th>
      <th>Request Method</th>
      <th>Purpose</th>
      <th>Possible Expected Responses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{%badge%}}/getauth{{%/badge%}}</td>
      <td>{{%badge%}}GET{{%/badge%}}</td>
      <td>
        <ul>
            <li>Will read the Auth0 access token from the {{%badge%}}zc-customauth{{%/badge%}} header.</li>
            <li>Will call the Auth0 {{%badge%}}/userinfo{{%/badge%}} and will generate a custom web token using the returned user details.</li>
        </ul>
      </td>
      <td>Returns the required {{%bold%}}Catalyst Custom Token{{%/bold%}} (JSON) or a {{%bold%}}401{{%/bold%}} if no token is obtained.</td>
    </tr>
    <tr>
        <td>{{%badge%}}/catalystUser{{%/badge%}}</td>
        <td>{{%badge%}}GET{{%/badge%}}</td>
        <td>Initializes Catalyst using request context and retrieves the details of the authenticated user.</td>
        <td>Returns a JSON containing the end-user details.</td>
    </tr>
  </tbody>
</table>

<br />

Copy the code below and paste it into the {{%badge%}}index.js{{%/badge%}} files of your project using an IDE and save the files.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Go through the code in this section to make sure you fully understand it.{{%/note%}}

{{%panel_with_adjustment class="language-javascript line-numbers" header="index.js" footer="button" scroll="set-scroll" %}}'use strict'
// Import Catalyst Node SDK
const catalyst = require('zcatalyst-sdk-node')
// Import Express framework
const express = require('express')
const app = express()
// Initialize express middleware
app.use(express())
// Import axios to make HTTP requests to Auth0
const axios = require('axios')
// Header name where Auth0 access token is expected
const auth0TokenHeader = 'zc-customauth'
// Replace with your Auth0 domain (example: https://your-domain.auth0.com)
const auth0Domain = '{replace your Auth0 domain}'
// Endpoint to validate Auth0 token and generate Catalyst custom token
app.get('/getauth', async (req, res) => {
  try {
    // Read Auth0 access token from request header
    const auth0AccessToken = req.headers[auth0TokenHeader]
    // Auth0 user info endpoint
    const auth0Url = auth0Domain + '/userinfo'
    // Proceed only if token is provided
    if (auth0AccessToken !== undefined) {
      const url = auth0Url
      // Attach Authorization header with Bearer token
      const config = {
        headers: {
          Authorization: 'Bearer ' + auth0AccessToken
        }
      }
      // Call Auth0 to fetch user details
      const auth0response = await axios.get(url, config)
      // Initialize Catalyst app using request context
      const catalystApp = catalyst.initialize(req)
      // Generate Catalyst custom web token using Auth0 user details
      const tokenObj = await catalystApp.userManagement().generateCustomToken({
        type: 'web',
        user_details: {
          email_id: auth0response.data.email,
          first_name: auth0response.data.given_name,
          last_name: auth0response.data.family_name
        }
      })
      // Send generated Catalyst token back to client
      res.status(200).send(JSON.stringify(tokenObj))
    } else {
      // If Auth0 token is missing in header
      res.status(401).send({ status: 'failure', message: 'Token not provided in the header' })
    }
  } catch (error) {
    // Log error and return failure response
    console.log(error)
    res.status(error.response.status).send({ status: 'failure', message: 'An unexpected error has occured. Please try again after sometime.' })
  }
})
// Endpoint to fetch the currently authenticated Catalyst user
app.get('/catalystUser', async (req, res) => {
  try {
    // Initialize Catalyst using request context
    const catalystApp = catalyst.initialize(req)
    // Retrieve current logged-in Catalyst user
    const currentUser = await catalystApp.userManagement().getCurrentUser()
    // Send user details as response
    res.status(200).send(JSON.stringify(currentUser))
  } catch (error) {
    // Handle and log any unexpected errors
    console.log(error)
    res.status(500).send({ status: 'failure', message: error })
  }
})
// Export the Express app
module.exports = app{{%/panel_with_adjustment%}}

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure you provide domain generated by Auth0 in line {{%bold%}}14{{%/bold%}}.{{%/note%}}

--------------------------------------------------------------------------------
title: "Configure the Client"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.694Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/config-client/"
service: "All Services"
related:
- Third-party Authentication type (/en/cli/v1/initialize-resources/introduction)
- Third-party Authentication SDK (/en/sdk/web/v4/cloud-scale/authentication/third-party-custom-token/)
- Auth0 Help Documentation (https://auth0.com/docs)

--------------------------------------------------------------------------------


# Configure the Client

Let's configure the client component.

The {{%link href="/en/cli/v1/project-directory-structure/client-directory/" %}}client directory{{%/link%}} contains:
- {{%badge%}}{{%bold%}}index.html{{%/bold%}}{{%/badge%}}: Will act as the entry point of your application
- {{%badge%}}{{%bold%}}main.css{{%/bold%}}{{%/badge%}}: Will contain the CSS code for the application
- {{%badge%}}{{%bold%}}main.js{{%/bold%}}{{%/badge%}}: Will contain the JavaScript code for the application
- {{%badge%}}{{%bold%}}client-package.json{{%/bold%}}{{%/badge%}}: Will contain the configuration file
- You will need to create the following files:
    - {{%badge%}}{{%bold%}}home.html{{%/bold%}}{{%/badge%}}: Will contain two UI elements for Auth0 and Catalyst user details section.
    - {{%badge%}}{{%bold%}}auth_config.json{{%/bold%}}{{%/badge%}}: Will contain the values of the {{%badge%}}domain{{%/badge%}}, {{%badge%}}clientID{{%/badge%}} and the {{%badge%}}redirectURL{{%/badge%}} values required to configure the authentication elements for your application.

We will discuss the code of the entire application at the end of this section.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Make sure to go through the code provided in this section to be sure you fully understand it.{{%/note%}}

Copy the code below and paste it into the respective files located in the {{%badge%}}authentication360/client/{{%/badge%}} of your project using an IDE and save the files.

{{%panel_with_adjustment class="language-xml line-numbers" header="index.html" footer="button" scroll="set-scroll" %}}<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Auth0 App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
  <script src="https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js"></script>
  <script src="/__catalyst/sdk/init.js"></script>
  <script src="main.js"></script>
</head>
<body style="background:#c0c0c0; font-family: 'Calibri';">
  <center>
    <br>
    <br>
    <br>
    <img width="80px" height="80px" src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png">
    <h1>Implementation of Third Party Authentication in Catalyst</h1>
    <h1>Login using Auth0</h1>
    <p>Welcome to our page!</p>
    <button onclick="login()" style="width:20%" id="btn-login">Log in</button>
  </center>
</body>
</html>
{{%/panel_with_adjustment%}}


{{%panel_with_adjustment class="language-xml line-numbers" header="home.html" footer="button" scroll="set-scroll" %}}<!-- Redirects here after login-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Auth0 App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
  <script src="https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js"></script>
  <script src="/__catalyst/sdk/init.js"></script>
  <script src="home.js"></script>
  <script>
    window.addEventListener("hashchange", function() {
      const hash = window.location.hash.toLowerCase();
      if (hash === "#auth0profile") {
        document.getElementById("loader").style.display = "block";
        document.getElementById("auth0Userdetails").style.display = "none";
        document.getElementById("catalystUserdetails").style.display = "none";
        getAuth0UserDetails(true);
      } else if (hash === "#catalystprofile") {
        document.getElementById("loader").style.display = "block";
        document.getElementById("auth0Userdetails").style.display = "none";
        document.getElementById("catalystUserdetails").style.display = "none";
        getCatalystUserDetails();
      }
    });
  </script>
  <style>
    .card {
      max-width: 500px;
      margin: auto;
      text-align: center;
      font-family: arial;
      background-color: #a5a4a4;
    }
    .title {
      font-size: 23px;
      color: black;
    }
    button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 8px;
      color: white;
      background-color: #000;
      text-align: center;
      cursor: pointer;
      width: 50%;
      font-size: 18px;
      border-radius: 8px;
    }
    a {
      text-decoration: none;
      font-size: 22px;
      color: black;
    }
    button:hover,
    a:hover {
      opacity: 0.7;
    }
    body {
      background-color: #a5a4a4;
      font-size: 23px;
    }
    p,
    label {
      font-family: 'Calibri';
      font-weight: normal;
    }
  </style>
</head>
<body style="font-family: 'Calibri';">
  <center>
    <br>
    <br>
    <div id="loader" class="loader" style="display: block; margin-left: 46%; position: fixed;">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="auth0Userdetails" style="display: none;">
      <p>Welcome to our home page!</p>
      <p>You're seeing this content because you're currently <strong>logged in</strong>.</p>
      <label>User profile Information from Auth0:</label>
      <label>Profile picture:</label>
      <img id="myImg" src="" width="60" height="60" />
      <p id="auth0Firstname"></p>
      <p id="auth0Lastname"></p>
      <p id="auth0email"></p>
      <button style="background-color: grey; width: 24%;">
        <a id="getUserProfile" href="#CatalystProfile" style="font-family: Calibri">Get Catalyst Logged in User Details</a>
      </button>
      <p><button onclick="logout()" style="width:20%">Logout</button></p>
    </div>
    <div id="catalystUserdetails" style="display: none;">
      <div>
        <a href="#Auth0Profile" style="margin-left: 70%;"><u>Back</u></a>
      </div>
      <div class="card">
        <img width="80px" height="80px" src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png" alt="Profile" />
        <h1 style="font-size:33px; font-family: 'Calibri';">User Profile Management</h1>
        <p class="title" id="fname"></p>
        <p class="title" id="lname"></p>
        <p class="title" id="mailid"></p>
        <p class="title" id="tzone"></p>
        <p class="title" id="ctime"></p>
      </div>
      <p><button onclick="logout()" style="width:20%">Logout</button></p>
    </div>
  </center>
</body>
</html>{{%/panel_with_adjustment%}}


{{%panel_with_adjustment class="language-css line-numbers" header="main.css" footer="button" scroll="set-scroll" %}}.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

div.login {
  padding-top: 10px;
  height: 260px;
  width: 500px;
  margin: 0 auto;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 200%;
  opacity: 0.9;
}

button:hover {
  opacity: 1;
}

/* Float cancel and signup buttons and add an equal width */
.seperatebtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 100px) {
  .signupbtn {
    width: 100%;
  }
}

.loader- {
  display: inline-block;
  vertical-align: middle;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align: center;
}

.loader div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  animation: loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.loader div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}

.loader div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}

.loader div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}

@keyframes loader {
  0% {
    top: 8px;
    height: 64px;
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
  }
}{{%/panel_with_adjustment%}}


{{%panel_with_adjustment class="language-javascript line-numbers" header="main.js" footer="button" scroll="set-scroll" %}}const login = async () => {
  const fetchAuthConfig = () => fetch("./auth_config.json");
  const config = await fetchAuthConfig();
  const authConfig = await config.json();
  await auth0Client.loginWithRedirect({
    authorizationParams: {
      redirect_uri: authConfig.redirect_url + "/app/home.html"
    }
  });
};
window.onload = async () => {
  await configureClient();
  debugger;
  let isAuthenticated = await auth0Client.isAuthenticated();
  if (isAuthenticated) {
    document.body.innerHTML = "You are currently logged in. Redirecting you to the home page..";
    setTimeout(function() {
      window.location.href = "home.html";
    }, 2000);
  } else {
    window.history.replaceState({}, document.title, "/app/index.html");
  }
};
const configureClient = async () => {
  debugger;
  const fetchAuthConfig = () => fetch("./auth_config.json");
  const config = await fetchAuthConfig();
  const authConfig = await config.json();
  auth0Client = await auth0.createAuth0Client({
    domain: authConfig.domain,
    clientId: authConfig.clientId,
    useRefreshTokens: true,
    cacheLocation: "localstorage"
  });
};
const logout = async () => {
  debugger;
  const fetchAuthConfig = () => fetch("./auth_config.json");
  const config = await fetchAuthConfig();
  const authConfig = await config.json();
  auth0Client.logout({});
  catalyst.auth.signOut(authConfig.redirect_url);
};{{%/panel_with_adjustment%}}


{{%panel_with_adjustment class="language-json line-numbers" header="auth_config.json" footer="button" scroll="set-scroll" %}}{
  "domain": "your_auth0_domain_here",
  "clientId": "your_auth0_client_id_here",
  "redirect_url": "Your_catalyst_app_URL_here"
}{{%/panel_with_adjustment%}}


{{%note%}}{{%bold%}}Note:{{%/bold%}} You will need to provide the {{%bold%}}domain{{%/bold%}} and {{%bold%}}ClientID{{%/bold%}} generated in Auth0 dashboard, as well as provide the {{%bold%}}application's URL{{%/bold%}} as the redirect URL.{{%/note%}}

The client directory is now configured.

<br>

Let's go over the application code:

* The application is intended to achieve the following functionalities:
Use Auth0 to authenticate end-user access for your Catalyst application.
Using secure token-based authorization we can integrate **Auth0 SPA** login elements onto the Catalyst application, and also store essential details of the user in Catalyst's backend.

* When the end-user accesses the application, they will encounter the **Auth0** login section to authenticate their access. Here the user will provide their details or sign in to your application using **Google social login**.

* The above action will generate an access token, and redirect the end-user to the application's redirect URL. The access token will be sent as header to {{%badge%}}/getauth{{%/badge%}} the backend function containing the authentication logic.

* {{%badge%}}/getauth{{%/badge%}} will use this token to then fetch the end-user's required details from Auth0's {{%badge%}}/userinfo{{%/badge%}} endpoint.

* The {{%badge%}}custom_token_generation{{%/badge%}} will then generate a Catalyst Custom Token using the user's details. This token is then returned to the client and the end-user can use this token to access your Catalyst application.

* With the end-user authenticated their details are added to the Catalyst's interface using the {{%badge%}}/catalystUser{{%/badge%}} endpoint.

* If required, the authenticated user can log off from the application.

The client and function components are now configured for your application.

--------------------------------------------------------------------------------
title: "Test the Application"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.694Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/test-app/"
service: "All Services"
related:
- Third-party Authentication type (/en/cli/v1/initialize-resources/introduction)
- CLI Serve Resources (/en/cli/v1/serve-resources/introduction/)
- Third-party Authentication SDK (/en/sdk/web/v4/cloud-scale/authentication/third-party-custom-token/)
- Auth0 Help Documentation (https://auth0.com/docs)

--------------------------------------------------------------------------------


# Test the Application

You can test the functionality of your application on a local server using the Catalyst CLI.

{{%info%}}{{%bold%}}Info:{{%/bold%}} {{%link href="/en/cli/v1/serve-resources/introduction" %}}Learn more about server resources{{%/link%}}.{{%/info%}}

To server the Catalyst project locally, execute the following command in your Catalyst CLI:

{{%cli%}}catalyst serve{{%/cli%}}

The application will typically be served in the default {{%badge%}}port 3000{{%/badge%}}. The local endpoint URLs of the components will be displayed in the CLI.

<br />

{{%note%}}{{%bold%}}Note:{{%/bold%}}

- To ensure you are able to locally test your application, you need to add your local endpoint URIs in the Auth0 configuration section, for example:
    - {{%badge%}}http:<span>//localhost:3000/app/index.html{{%/badge%}}
    - {{%badge%}}http:<span>//localhost:3000/app/home.html{{%/badge%}}

- Every time you access the homepage or any of the sub-pages of your client, or the function, the CLI will display a live log of the accessed URL, along with the HTTP method that is used to access it.{{%/note%}}

You can now open the client component’s local URL in a browser to access the application. Click **Log in**.
<br />

You will be directed to the Auth0 login elements. You can either input the required user details or attempt to sign in to the application using the **Google Social Login** button.
<br />

Click the **Get Catalyst Logged in User Details** button to add the user details to the Catalyst backend.
<br />

The user has now been authenticated using Auth0 and added their details have been added to the Catalyst backend.
<br />

You can verify that the user has been added to your Catalyst application by navigating to the {{%link href="/en/cloud-scale/help/authentication/user-management/introduction/" %}}User Management{{%/link%}} section in the **Authentication** component.
<br />

The application is working as intended.


--------------------------------------------------------------------------------
title: "Deploy the Application"
description: "Integrate Auth0 SPA authentication service with basic web applications hosted on Catalyst using OpenID Connect and 0Auth2.0 authentication protocols."
last_updated: "2026-03-18T07:41:08.695Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/deploy-app/"
service: "All Services"
related:
- Third-party Authentication type (/en/cli/v1/initialize-resources/introduction)
- CLI Deploy Resources (/en/cli/v1/serve-resources/introduction/)
- Third-party Authentication SDK (/en/sdk/web/v4/cloud-scale/authentication/third-party-custom-token/)

--------------------------------------------------------------------------------


# Deploy the Application

To {{%link href="/en/cli/v1/deploy-resources/introduction/" %}}deploy your Catalyst project{{%/link%}} from the CLI, run the following command in your terminal from your project directory:

{{%cli%}}catalyst deploy{{%/cli%}}

<br />

You can now open the client component’s URL in a browser to access the deployed application. The authorization portal application can now be accessed from its web app URL.

<br />