---
title: "Configure the Client"
url: https://docs.catalyst.zoho.com/en/tutorials/third-party-auth/nodejs/config-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-08-28T07:59:38Z
service: All Services
type: tutorial
related_links:
  - name: "Third-party Authentication type"
    url: /en/cli/v1/initialize-resources/introduction
  - name: "Third-party Authentication SDK"
    url: /en/sdk/web/v4/cloud-scale/authentication/third-party-custom-token/
  - name: "Auth0 Help Documentation"
    url: https://auth0.com/docs
---

# Configure the Client

Let's configure the client component.

The [client directory](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory/) contains:
- `index.html`: Will act as the entry point of your application
- `main.css`: Will contain the CSS code for the application
- `main.js`: Will contain the JavaScript code for the application
- `client-package.json`: Will contain the configuration file
- You will need to create the following files:
    - `home.html`: Will contain two UI elements for Auth0 and Catalyst user details section.
    - `auth_config.json`: Will contain the values of the `domain`, `clientID` and the `redirectURL` 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:** Make sure to go through the code provided in this section to be sure you fully understand it.

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

**index.html**

```xml
<!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.6.2/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>

```

**home.html**

```xml
<!-- 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.6.2/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>
```

**main.css**

```css
.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;
  }
}
```

**main.js**

```javascript
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);
};
```

**auth_config.json**

```json
{
  "domain": "your_auth0_domain_here",
  "clientId": "your_auth0_client_id_here",
  "redirect_url": "Your_catalyst_app_URL_here"
}
```

> **Note:** You will need to provide the **domain** and **ClientID** generated in Auth0 dashboard, as well as provide the **application's URL** as the redirect URL.

The client directory is now configured.

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 `/getauth` the backend function containing the authentication logic.

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

* The `custom_token_generation` 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 `/catalystUser` endpoint.

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

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