Configure the Client

Let’s configure the client component.

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 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
copy
<!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>
View more

home.html
copy
<!-- 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>View more

main.css
copy

.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
copy
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);
};View more

auth_config.json
copy
{
  "domain": "your_auth0_domain_here",
  "clientId": "your_auth0_client_id_here",
  "redirect_url": "Your_catalyst_app_URL_here"
}View more

Note: You 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.

Last Updated 2026-02-23 22:17:04 +0530 IST

Third-party Authentication type Third-party Authentication SDK Auth0 Help Documentation