# Java



--------------------------------------------------------------------------------
title: "Introduction"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.310Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Hosted Authentication Type (/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/)
- User Management (/en/cloud-scale/help/authentication/user-management/introduction/)
- Custom User Validation (/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)
- Social Logins (/en/cloud-scale/help/authentication/social-logins/introduction/)
- Java SDK (/en/sdk/java/v1/overview/)
- Node.js SDK (/en/sdk/nodejs/v2/overview/)
- Python SDK (/en/sdk/python/v1/overview/)

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


# Authorization Portal

## Introduction

This tutorial will help you build a simple client application that allows your end-users to log in to your application after they have been authenticated using Catalyst Hosted Authentication with a Custom User Validation function.

The **Authorization Portal** application uses the following Catalyst services and their respective components:

- **Catalyst Cloud Scale**
    - **Authentication**: The end-user will be authenticated to your application using the Hosted Authentication, a Native Catalyst Authentication Type.
    - **Web Client Hosting**: The front end of the application will be hosted on Catalyst using the Web Client Hosting component. You can initialize and configure the client as a Basic web app, a React app, or an Angular app.
- **Catalyst Serverless**
    - **Functions**: We will be coding the Basic I/O function in Java to implement *Custom User Validation*.

This tutorial will help you understand using the various features of *Hosted Authentication Type*. We will be incorporating the following functionalities in this tutorial:

- Sign up end users to the web app using their email address
- Log in end users to the app using the sign-up account information
- Log in end users to the app using any or all of the following Federated Identity Providers:
    - Zoho
    - Google
    - Microsoft 365
    - LinkedIn
    - Facebook
- Reset the password in case an end-user forgets their password
- Customize and style the login elements of the following pages- **Sign Up**, **Confirm Password**, **Log In**, and **Password Reset**.
- Customize and configure the **Email Verification** and **Password Reset** email templates.
- Configure and add a Custom User Validation function
- Logging in and out to the application

The following image is an example of how the client application's login screen will appear:
<br />


You will be using the following features of the Authentication component to build this application:

* **User Management**: The user details are automatically saved in this section, after they sign up for the application. Using this feature, you can manage the end-users’ access to your application and configure their roles.

* **Authentication Type**: You will be able to view the authentication type you have configured for your application and edit your configurations if required.

* **Whitelisting**: You will use this section to enable Custom User Validation. You can also use this section to enable CORS and iFrame access to your application.

* **Email Templates**: You will be able to configure and customize *Email Verification* and *Password Reset* emails from this section.

We will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application.

You will be given the code for the files to be included in the function and client directory of your project in this tutorial. You can either copy the provided code or customize it, should you feel it necessary and paste it into the appropriate files as directed.

<br>

### Application Architecture

The authorization portal's application logic is described below:

* **Login process**: The end-user will be directed to the login page. They can either opt in to log in to the application using the **Zoho**, **Google**, **LinkedIn**, **Microsoft 365**, or **Facebook** social logins, or click the **Sign Up** option provided to sign up using their email ID.

* **Custom user validation**: The details inputted by the end-user during the login process will sent be as a JSON input to the *Custom User Validation* function. if the details are successfully validated per the custom logic present in the *Basic I/O function*, the verification email will be triggered.

* **Email verification email triggered**: After a user signs up for the application, an email verification email will be sent to their email address used to register the account. The email verification content and style can be customized per your preference using the *Email Templates* feature of *Authentication*.

* **Password setup**: When end-users click the link present in the email verification email, they will be directed to the password setup page. Here, the end-user can secure their account by setting a password of their preference.

* **End-user account created**: After the password is set, the user account will be created, and the end-user will now be able to log in to the application using the credentials they created. You can confirm the account has been created by viewing the account details in the *User Management* section of the *Authentication* component.

* **Password reset option**: End-users will have the option to reset the password by opting for the **Forgot Password** option present in the login page. They will then be prompted to provide any of their previous passwords to recover their account or go ahead with the reset option. After the users go ahead with the reset option, a one-time password (OTP) email will be sent to the user. After the OTP is verified, they can set a new password for their account.

Note: 

As we are using the Hosted Login method:<br />
  - You do not have to code the additional logic to trigger the emails; they will be automatically handled by Catalyst in the backend.
  - You can style the login, sign up, and password reset pages in the console directly, so you do not have to code any additional style elements.


--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.310Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/prerequisites/"
service: "All Services"
related:
- CLI Command Reference (/en/cli/v1/cli-command-reference/)
- Install CLI (/en/getting-started/installing-catalyst-cli/)
- Login CLI (/en/cli/v1/login/login-from-cli/)

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


# Prerequisites

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

1. **Catalyst CLI**<br /><br />
    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.<br /><br />You must perform the following actions:
    * **Install Catalyst CLI**: Catalyst CLI is installed through NPM. You must therefore have NPM and Node.js installed on your system before you install the CLI. Refer to the Install Catalyst CLI help page for details on the pre-requisites 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 CLI Login help page for the steps to login from Catalyst CLI and the various options available for it.

2. **Any IDE tool for Java and client code development**<br /><br />
    You can use any IDE to work with the *Basic I/O function* and the client code. Some popular choices include Visual Studio Code, IntelliJ IDEA, Eclipse, and Sublime Text. Download and install an IDE of your choice on your system.

If you are a Visual Studio Code IDE user, you can install the Catalyst Tools extension, and use your IDE itself in place of the CLI. You can find more details about the Catalyst VS Code extension from this help section.

--------------------------------------------------------------------------------
title: "Create a Project"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.310Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/create-project/"
service: "All Services"
related:
- Project Directory (/en/cli/v1/project-directory-structure/introduction)
- Set up Catalyst Projects (/en/getting-started/catalyst-projects)

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


# Create a Project

Let’s create a Catalyst project from the Catalyst console.

1. Log in to the Catalyst console and click **Create New Project**.
    <br />

2. Enter the project’s name as "**AuthorizationPortal**" in the pop-up window, and click **Create**.
    <br />

Your project will be created and it will be opened.

You can access the project later, by clicking **Access Project**.
<br />

--------------------------------------------------------------------------------
title: "Configure the Hosted Authentication"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.311Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/configure-hosted-login/"
service: "All Services"
related:
- Setup Hosted Authentication type (/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/configure-hosted-authentication/)
- Configure Social Logins (/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/)

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


# Configure Hosted Authentication for the Application

Let's configure the *Native Catalyst Authentication* type, *Hosted Login* in this section.

1. Authentication is a Catalyst Cloud Scale component. Click the **Cloud Scale** icon on the console's side navigation menu to access the Cloud Scale service console, then click **Start Exploring**.
    <br />

2. Click **Authentication** under *Security & Identity* to access the Authentication component.
    <br />

3. You can set up your application's authentication element using *Native Catalyst Authentication* or a *Third-party Authentication* service. For this tutorial, we are going to set up the application's authentication using *Hosted Login*, a *Native Catalyst Authentication* type. Click the **Set Up** button in the *Native Catalyst Authentication* section to start configuring your login element.
    <br />

Note:<br />

* Embedded Login
* Third-party Authentication

4. Select *Hosted Authentication* and click **Next**.
    <br />

5. Enter your business name or other name of your choice in the *Company Name* field and upload an image file of your choice for the *Company Logo*.
    <br />
Note: For the purpose of this tutorial, we are using "Zylker Technologies Pvt. Ltd." as the company name.

6. Use the color palettes in the console to style your login element. Use the *Preview* section on the right and design the login element to match your preference.
    <br />

Note: You can use the Preview section to simultaneously view the style of your Sign In, Sign Up, and Password Reset elements. However, to view the Sign U page, you need to enable Public Signup. The steps involved in enabling Public Signup are given below.

7. Click the **toggle button** to enable *Public Signup*.
    <br />
    * Read the information pop-up and click **Yes, Proceed**.
        <br />
Note: To learn more about Public Signup, visit this help document.

8. You can add any or all of the Social Logins that are present in the console.
    <br />

    To enable the **Zoho** social login:

    - Click the **Zoho** button, and enter "**AuthorizationPortal**" as the *Client Name*.
        <br />
    - Click **Enable**.
        <br />
        Your end-users can now log in to your application using their Zoho credentials. 
    Note: As your application is being built on Catalyst by Zoho, you do not have to create OAuth Client ID and Client Secret credentials.

    To enable the **Google** social login:

    - Click the **Google** button, and enter the OAuth Client ID and Client Secret that you obtained in the Google console in their respective fields.
        <br />
        Note:  Steps to obtain the OAuth Client ID and Client Secret for each of the social logins can be accessed in the following help documents: Google, Microsoft 365, LinkedIn, and Facebook.
    - Click **Enable**.
        <br />
        Your end-users can now log in to your application using their **Google** credentials.
    
    You can repeat the same steps to enable the other social logins.
    <br />

9. Click **Next**.

Note: You always have the option to edit your design and social login configurations at a later point using the Authentication Type section.

10. We will configure the *Additional Settings* section at a later point using the *Whitelisting* feature. Click **Finish**.
    <br />

You will now able to view and verify that *Hosted Authentication* type has been enabled for your application.
<br />

You will also be able to view that Catalyst has generated secure **Access URLs** for your *Login*, *Sign Up*, and *Password Reset* pages, and has automatically rendered your styling preferences in all the concerned pages.
<br />

--------------------------------------------------------------------------------
title: "Configure Email Templates"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.311Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/configure-email-templates/"
service: "All Services"
related:
- Email Templates (/en/cloud-scale/help/authentication/email-templates/introduction/)

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


# Configure Email Templates

Catalyst provides you with Email Templates that you can use to send custom emails to your end-users when they sign up to your application, or on instances when they wish to change their password.

To configure the email templates:

1. Click the **Email Templates** tab in the *Authentication* component to navigate to the relevant section.
    <br />

2. Click the **Email Verification** tab, then click **Edit** to begin customizing and editing the email content. You can include placeholders for values to be inserted dynamically.
    <br />

Note:

* You can customize the email content to match your preference.

* The placeholder content (the content that is present between **%%**) will be dynamically populated based on the user details.

* The %LINK% placeholder will contain the application's redirection link. The URL is automatically generated by Catalyst when you host your application, and the redirection page can be specified in a Catalyst configuration file of your project. You can also provide a custom link.

3. Make the necessary changes and click **Save**.
    <br />

4. To customize the *Reset Password* emails, click the **Password Reset** tab and customize the email content in the same manner as above.
    <br />

The email templates will now be configured. 

Note:

* You can learn more about Email Templates from this help document.

* Because we are using Hosted Login to authenticate this application, the handling of sending these emails at the required instances will be automatically configured by Catalyst, so you do not have to code the logic to trigger these emails.

<br />

--------------------------------------------------------------------------------
title: "Initialize the Project"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.311Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/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 from the CLI

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 Project Directory Structure help page. You can learn about initializing a project in detail from the CLI help documentation.

For this application, we will initialize a Basic I/O function, which will contain the logic for Custom User Validation and a Basic web app as the client component.

Note: Ensure that you enter the function's package name or class name exactly as instructed, because the application's code contains the same name.

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:
catalyst init

3. Navigate using the **arrow keys**, select your preferred portal, and press the **Enter** key. If you have no other organizations associated with the account, then the default one will be selected automatically.
    <br />
Note: You can find out more about Catalyst’s multi-org portal feature from this help document.

4. 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 **Authorization Portal** from the list and press **Enter**.
    <br />

5. Navigate using the arrow keys and select **Functions**, **Client** using the space bar. Press **Enter** to initialize.
    <br />

6. The CLI will initiate the function setup. Select **Basic IO** as the function type for your *Custom User Validation* function.
    <br />

7. Select the latest runtime of *Java* as the function stack.
    <br />

8. Enter "authorized_portal_app" as the package name, "Custom_User_Validation_Java" as the function name, 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 Java dependencies.
    <br />

The CLI will now initiate the client setup.




9. Select **Basic web app** and press **Enter** to initialize your client as a basic web app.
    <br />

10. Enter a name for your client package and press **Enter**. For the purposes of this tutorial, we are naming our client package "ZylkerTechnologies". 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 catalyst.json configuration file and a hidden .catalystrc file.

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




9. Select **React web app** and press **Enter** to initialize your client as a React web app.
    <br />

10. Select **JavaScript** as the React app type and press **Enter**
    <br />

11. Enter "zylkertechnologies" as the name of your client package and click **Enter**. You can also provide any name of your choice. All of the required React packages, such as “react,” “react-dom,” and “react-scripts” will be installed through the Catalyst React plugin (zcatalyst-cli-plugin-react).
    <br />
    The client is now successfully initialized as a React web application.
    <br />

The client directory will be created in the standard structure in the project directory.

This is the structure of the *Authorization Portal* project’s directory if the client is initialized as a React app.
<br />

Catalyst initialization is now complete.




9. Select **Angular web app** and press **Enter** to initialize your client as a Angular web app.
    <br />

10. Name your Angular app "ZylkerTechnologies", and press the **Enter** key. Since this application does not require Angular Routing, enter "N" at the prompt. Finally, choose CSS as your stylesheet format and press the **Enter** key.
    <br />

Catalyst will initialize the client using the **Catalyst Angular plugin** (zcatalyst-cli-plugin-angular).

<br />

The client is now successfully initialized as an Angular web application.

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 catalyst.json configuration file and a hidden .catalystrc file.

The structure of your project directory should now appear as shown below:

<br />



<br />

--------------------------------------------------------------------------------
title: "Configure the Basic I/O function"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.312Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/configure-function/"
service: "All Services"
related:
- Basic I/O Functions (/en/serverless/help/functions/basic-io/)
- Functions Directory Structure (/en/cli/v1/project-directory-structure/functions-directory)

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


# Configure the Function

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

The function’s directory, (functions/authorized_portal_app), contains:

* The Custom_User_Validation_Java.java main function file
* The catalyst-config.json configuration file
* Java library files in the lib directory
* .classpath and .project dependency files

You will be adding code in the Custom_User_Validation_Java.java file.

The Basic I/O function contains the following functionalities:

* The end-user's details will provided as a JSON input to the *Custom User Validation* function.
* The function is coded to implement a custom logic based upon which the end-user will either be authenticated or denied.

Note: For the purpose of this tutorial, we have coded a logic for the Custom User Validation function where if the user's email provider is anyone other than Zylker Technology (@zylker.com) the end-user will not be able to sign up to the application. You can either use the same or code a logic of your preference.

Now, let’s begin coding the Basic I/O function.

Copy the code given below and paste it in the Custom_User_Validation_Java.java file in the functions/authorization_portal_function directory of your project, and save the file. You can use any IDE of your choice to work with the application’s files.

Note: Please go through the code in this section to make sure you fully understand it.

import com.catalyst.Context;
import com.catalyst.basic.BasicIO;
import com.catalyst.basic.ZCFunction;
import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.logging.Logger;
import java.util.logging.Level;
import com.zc.api.APIConstants.ZCSignupValidationStatus;
import com.zc.common.ZCProject;
import com.zc.component.auth.ZCSignupResponseUserDetails;
import com.zc.component.auth.ZCSignupUserValidationRequest;
import com.zc.component.auth.ZCSignupUserValidationResponse;
import com.zc.component.users.ZCSignupUserService;
public class Custom_User_Validation_Java implements ZCFunction {
private static final Logger LOGGER = Logger.getLogger(Custom_User_Validation_Java.class.getName());
@Override
public void runner(Context context, BasicIO basicIO) throws Exception {
try {
ZCProject.initProject();
ZCSignupUserValidationRequest requestDetails = ZCSignupUserService.getSignupValidationRequest(basicIO);
if(requestDetails != null) {
ZCSignupUserValidationResponse validationResponse = ZCSignupUserValidationResponse.getInstance();
if(requestDetails.getUserDetails().getEmailId().contains("@zylker.com")) {
validationResponse.setStatus(ZCSignupValidationStatus.FAILURE); // The user has failed authentication
}
else { 
// The actions that occur in the event of a successful authentication can be customized
validationResponse.setStatus(ZCSignupValidationStatus.SUCCESS); 
ZCSignupResponseUserDetails respUserDetails = ZCSignupResponseUserDetails.getInstance();
respUserDetails.setRoleIdentifier("App User"); // If you want to override the default role, you can specify the role id/name here.
validationResponse.setUserDetails(respUserDetails);
}
basicIO.setStatus(200);
basicIO.write(new ObjectMapper().writeValueAsString(validationResponse));
}
}
catch(Exception e) {
LOGGER.log(Level.SEVERE,"Exception in Custom_User_Validation_Java",e);
basicIO.setStatus(500);
basicIO.write("An error has occured. Please try again after sometime.");
}   
}
}



Note: You can also use this SDK to code your own custom logic instead of the one implemented above.

The function directory is now configured. We can now proceed to configuring the client directory.

--------------------------------------------------------------------------------
title: "Enable Custom User Validation"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.312Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/enable-custom-validation/"
service: "All Services"
related:
- Custom User Validation (/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)
- Whitelisting (/en/cloud-scale/help/authentication/whitelisting/introduction/)
- Catalyst Deploy Options (/en/cli/v1/deploy-resources/deploy-options/)

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


# Enable Custom User Validation

Now that we have coded the logic, let's enable Custom User Validation. To do this, you must first deploy the function to the console.

Enter this CLI command to deploy the function component alone to the console.
catalyst deploy --only functions

<br />

A function endpoint will be created for the function that allows you to access the function directly. The function will be deployed to the console.

Now, go to the console, and implement the following steps:

1. Navigate to the *Whitelisting* section in the *Authentication* component, and click the **Custom User Validation** toggle.
<br />

2. Select the **Basic I/O function** from the drop-down in the pop-up.
<br />

3. Click **Configure**.
<br />

The *Custom User Validation* function has been enabled for the project, and the end-users signing up for your application will now be additionally authenticated using this function.

Note: You can find out about the all of the features present in the Whitelisting section form in this help document.

<br />

--------------------------------------------------------------------------------
title: "Configure the Client"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.312Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/configure-client/"
service: "All Services"
related:
- Client Directory Structure (/en/cli/v1/project-directory-structure/client-directory)

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


# Configure the Client

Let’s configure the client component.



The client directory contains:
* The index.html file that contains the HTML code for the frontend application
* The main.css file that contains the CSS code for the frontend application
* The main.js file that contains the JavaScript code
* The client-package.json configuration file

We will be coding index.html and main.js. We will also be making a change in the client-package.json to ensure that the homepage of the application is the authenticated page.

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

Note: Please go through the code provided in this section to make sure you fully understand it.

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

<!DOCTYPE html>
<html>
<head>
 <title>Profile Information</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
 <script src="main.js"></script>
 <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
 <script src="/__catalyst/sdk/init.js"></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: 20px;
   visibility: hidden;
  }
  p{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
  }
 </style>
</head>
<body onload="showProfile()">
 <h1 style="text-align:center">User Profile Information</h1>
 <div class="card">
  <img width="200px" height="450px" src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png" alt="John" style="width:80px;height: 80px;" >
  <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>
  <p><button onclick="logout()">Logout</button></p>
 </div>
</body>
</html>



function showProfile() {
debugger;
    //The catalyst.auth.isUserAuthenticated() method allows only authenticated users, i.e., the users who are logged in, to access the pages
    //You can load this method in the body of your page to allow only authenticated users to access a particular page
    catalyst.auth.isUserAuthenticated().then(result => {

        //If the user is logged in, these contents of the page will be displayed to the user
        document.body.style.visibility = "visible";
        const first_name = "First Name: " + result.content.first_name;
        document.getElementById("fname").innerHTML = first_name;
        const last_name = "Last Name: " + result.content.last_name;
        document.getElementById("lname").innerHTML = last_name;
        const mailid = "Email Address: " + result.content.email_id;
        document.getElementById("mailid").innerHTML = mailid;
        const tzone = "Time Zone: " + result.content.time_zone;
        document.getElementById("tzone").innerHTML = tzone;
        const created_time = " Joined On: " + result.content.created_time;
        document.getElementById("ctime").innerHTML = created_time;
    }).catch(err => {
        //If the user is not logged in, this will be displayed to the user and they will be redirected to the login page
        document.body.style.visibility = "visible";
        document.body.innerHTML = 'You are not logged in. Please log in to continue. Redirecting you to the login page..';
        setTimeout(function () {
           window.location.href = "/__catalyst/auth/login";
        }, 5000);
    });
}

function logout() {
    //The signOut method is used to sign the user out of the application
    const redirectURL = location.protocol +"//"+ location.hostname + "/__catalyst/auth/login";
    catalyst.auth.signOut(redirectURL);
}



    {
        "name" : "ZylkerTechnologies",
        "version" : "0.0.1",
        "homepage" : "/__catalyst/auth/login", 
        "login_redirect" : "index.html"
    }

Note: The home page URL can be copied from the Access URL generated by Catalyst in the Authentication Types section of the console.

The client directory is now configured. 

Let’s go over how the function and the client code works:

* The end-user will first encounter the **Login Page** you have configured and styled in the console.
* To create an account, they will click the **Sign Up** option and be directed to the *Sign Up* page.

Note: End-users can either sign up to your application using their Social Logins or use the conventional method of signing up to the application using their email ID.

* Once the information is inputted and they click **Sign Up**, or if they attempt to sign up using a Social Login of their choice, their details will be provided as a JSON input to the Custom User Validation function (authorization_portal_function/CustomUserValidationFunc.java).

* The function will only authenticate users if the condition you have coded is satisfied. For this tutorial, the users will only be authenticated if they signed up to the application using a Zylker registered email address.

* Upon successful authentication, an Email Verification email will be sent to the account they used to sign up to the application.

Note: Because we are using Hosted Login, a native Catalyst authentication type, no additional logic to trigger the appropriate emails is required. It will be handled by Catalyst automatically.

* Once the user verifies their email address by clicking the link provided in the email, they will be signed up to the application. Their details can be viewed in the User Management section of the *Authentication* component.

* The end-user can now log in to the application using their authenticated credentials.

* The end-user can also reset their password by clicking the **Forgot Password** option. In this event, the *Password Reset* email will be sent to their registered email. Following the steps mentioned in the email, they can easily reset their credentials.




Let’s configure the client component.

The React web client directory contains the following files:

- The root directory of the client contains a client-package.json file, which is a configuration file defining the name, version, default home page, and redirect page of the client component.
- The **zylkertechnologies** client directory contains two subfolders, as per the default project structure of a React app:
    - The public folder is generally used to hold files that can be openly accessed by browsers through public URLs, such as icon files of the web app, the index.html file, and the 404.html file.
    - The src folder contains the application’s source files that will be included in the build folder when we compile the React app.
    - The client directory also contains the package.json dependency file and a  hidden .gitignore file.
- The files present in the **public** folder include:
    - Native React files such as setup Tests.js, index.js, reportWebVitals.js, logo.svg, and App.test.js.
    - **index.html** - Contains Catalyst web sdk that allows you to access Catalyst components.
    - We will be creating an additional **404.html** file that will contain the error handling elements.
- The files present in the **src** folder include:
    - Native React files such as setupTests.js, reportWebVitals.js, logo.svg, and App.test.js.
    - **App.js** - Contains the hash routes to your application
    - **App.css** - Contains the overall styling elements of your application
    - **index.js** - The entry point of the react application.
    - **index.css** - Contains the styling of the elements present in the index.js file.
    - You will be creating the following files in the src folder:
        - **Button.css** - Contains the styling elements for the *Logout* button that will be present in the application.
        - **Button.js** - Contains the React component for the *Logout* present in the application.
        - **Layout.js** - Contains the React component for the application's logic
        - **LoginPage.js** - Contains the React component for the login pages you generated in the Catalyst console.
        - **UserProfile.css** - Contains the styling elements for the user information page that will be displayed once you log in to the application.
        - **UserProfile.js** - Contains the React component to render the user details after you login.

We will be coding in the index.html, 404.html, App.js, App.css, index.css, index.js, Button.css, Button.js, Layout.js, LoginPage.js, UserProfile.css, and UserProfile.js files. We will also be making a change in the client-package.json. to ensure that the homepage of the application is the authenticated page.

Note: You can delete the native React files as they not required for building this application.

#### Install additional React packages

The react-router-dom package needs to be installed in the AuthorizationPortal/zylkertechnologies client directory using the CLI command given below:

npm install react-router-dom

This command will install the react-router-dom module, save the dependencies, and allow us to perform the required hash routing in our application.

This is the client directory after you have created the required files and deleted the unnecessary files.
<br />

Note: Please go through the all code given in this section to ensure you fully understand it.

Copy the code given below and paste it in index.html and 404.html, respectively, located in the client directory (zylkertechnologies/public/) using an IDE and save the file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
    <script src="/__catalyst/sdk/init.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <h2>You are viewing this 404 page since you tried to access a page which does not exist.</h2>
  </head>
</html>


Copy the code given below and paste it in App.css, App.js, index.js, index.css, Button.css, Button.js, Layout.js, LoginPage.js, UserProfile.css, and UserProfile.js, respectively, located in client directory (zylkertechnologies/src/) using an IDE and save the file.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.inputs {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}
#root {
  background-color: #c0c0c0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 1;
}


import "./App.css";
import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
import Layout from "./Layout";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Layout />} />
        <Route path="" element={<Navigate to="/" replace />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </HashRouter>
  );
}

export default App;


body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #c0c0c0;
}


import React from "react";
import "./index.css";
import App from "./App";
import * as ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 20%;
  font-size: 18px;
  border-radius: 8px;
}

button:hover,
.forgetPassword-btn:hover,
a:hover {
  opacity: 0.7;
}
a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}


import { useCallback } from "react";
import "./Button.css";

function Button({ title }) {
  const logout = useCallback(() => {
    const redirectURL = "/__catalyst/auth/login";
    window.catalyst.auth.signOut(redirectURL);
  }, []);
  return (
    <div id="logoutbtn" style={{ textAlign: "inline-block" }}>
      <button onClick={logout} id="logout" style={{ display: "inline-block" }}>
        {title}
      </button>
    </div>
  );
}

export default Button;


import UserProfile from "./UserProfile";
import LoginPage from "./LoginPage.js";
import { useEffect, useState } from "react";

function Layout() {
  const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);
  const [isFetching, setIsFetching] = useState(true);
  const [userDetails, setUserDetails] = useState({
    firstName: "",
    lastName: "",
    mailid: "",
    timeZone: "",
    createdTime: "",
  });

  useEffect(() => {
    window.catalyst.auth
      .isUserAuthenticated()
      .then((result) => {
        let userDetails = {
          firstName: result.content.first_name,
          lastName: result.content.last_name,
          mailid: result.content.email_id,
          timeZone: result.content.time_zone,
          createdTime: result.content.created_time,
        };
        setUserDetails(userDetails);
        setIsUserAuthenticated(true);
      })
      .catch((err) => {})
      .finally(() => {
        setIsFetching(false);
      });
  }, []);
  return (
    <>
      {isFetching ? (
        <p>Loading ....</p>
      ) : isUserAuthenticated ? (
        <UserProfile userDetails={userDetails} />
      ) : (
        <LoginPage />
      )}
    </>
  );
}

export default Layout;


import { useEffect } from "react";

function Login() {
  useEffect(() => {
    window.location.href = window.origin + "/__catalyst/auth/login";
  }, []);
  return null;
}

export default Login;


.card {
  margin: auto;
  text-align: center;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}

.title {
  font-size: 23px;
  color: black;
}
#userimg {
  height: 20%;
  width: 15%;
}

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

div.signup {
  display: none;
}

div.forgotpwd {
  display: none;
}

/* Full-width input fields */
input[type="text"] {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}

/* Add a background color when the inputs get focus */
input[type="text"]:focus,
input[type="password"]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for all buttons */

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

.signupbtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

.signupfnbtn {
  width: 20%;
  padding: 8px;
  border-radius: 8px;
}

.pwdfnbtn {
  width: 40%;
  padding: 8px;
  border-radius: 8px;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #474e5d;
}

/* Modal Content/Box */
.modal-content {
  background-color: #c0c0c0;
  margin: 5% auto 15% auto;
  /* 5% from the top, 15% from the bottom and centered */
  width: 25%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

p.homepage {
  font-size: 23px;
}

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


import Button from "./Button";
import "./UserProfile.css";

function UserProfile({ userDetails }) {
  return (
    <div className="card">
      <br> </br>
      <h1 className="title">User Profile Information</h1>
      <img
        alt="usericon"
        id="userimg"
        width="200px"
        height="450px"
        src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
      />
      <p className="title">First Name : {userDetails.firstName}</p>
      <p className="title">Last Name: {userDetails.lastName}</p>
      <p className="title">Email Address: {userDetails.mailid}</p>
      <p className="title">Time Zone: {userDetails.timeZone}</p>
      <p className="title">Joined On: {userDetails.createdTime}</p>
      <Button title="Logout"> </Button>
    </div>
  );
}
export default UserProfile;



    {
        "name": "zylkertechnologies",
        "version": "0.0.1",
        "homepage": "/__catalyst/auth/login",
        "login_redirect": "index.html"
    }


Note: The home page URL can be copied from the Access URL generated by Catalyst in the Authentication Types section of the console.

The client directory is now configured.

Let’s go over the working of the function and the client code:

* The end-user will first encounter the *Login Page* that you configured and styled in the console.
* To create an account, they will click the **Sign Up** option and be directed to the *Sign Up* page.

Note: End-users can either sign up to your application using their Social Logins or use the conventional method of signing up to the application using their email ID.

* Once the information is inputted and they click **Sign Up**, or if they attempt to sign up using a Social Login of their choice, their details will be provided as a JSON input to the Custom User Validation function (authorization_portal_function/CustomUserValidationFunc.java).

* The function will only authenticate users if the condition you have coded is satisfied. For this tutorial, the users will only be authenticated if they signed up to the application using a Zylker registered email address.

* Upon successful authentication, an Email Verification email will be sent to the account they used to sign up to the application.

Note: Because we are using Hosted Login, a native Catalyst authentication type, no additional logic to trigger the appropriate emails is required. It will be handled by Catalyst automatically.

* Once the user verifies their email address by clicking the link provided in the email, they will be signed up to the application. Their details can be viewed in the User Management section of the *Authentication* component.

* The end-user can now log in to the application using their authenticated credentials.

* The end-user can also reset their password by clicking the **Forgot Password** option. In this event, the *Password Reset* email will be sent to their registered email. Following the steps mentioned in the email, they can easily reset their credentials.




Let’s configure the client component.

The Angular web client directory contains: 

* The root directory of the client contains a client-package.json file, which is a configuration file defining the name, version, default home page, and redirect page of the client component. We will be modifying this file after we have coded the client component.
* Native Angular files such as angular.json, tsconfig.app.json, tsconfig.json, and tsconfig.spec.json files.
* The root directory of the client also contains the package.json dependency file, and a .gitignorefile.
* The **src** folder contains the following files and directories as per the default project structure of the Angular app:
  - Native Angular files such as favicon.ico, main.ts, polyfills.ts, and test.ts files along with the assets, and environment directories.
  - **index.html**: The default entry point of the application.
  - **style.css**: Will contain any styling elements required by the overall application.
* The files present in the **src/app/** directory are:
  - Native Angular files such as app.component.css and app.component.spec.ts.
  - app.component.html: Contains the HTML component that renders the routing that happens in the application.
  - app.component.ts: Contains the global interface of the application where a Catalyst variable is declared to use Catalyst Web SDK methods.
  - app.module.ts: Contains the routing logic involved in the application

We will be coding the index.html, app.component.html, app.component.ts, and the app.module.ts files.

#### Create a Layout Component

You need to create a layout component in the src/app/ directory path. This component will contain the the styling elements, client logic and redirect logic to provide appropriate responses to authenticated and non-authenticated users.

Execute the following command in the src/app/ directory using the Catalyst CLI:

ng generate component layout

<br />

This will create a folder named layout in the src/app/ directory. 

This layout folder will contain:
* Native Angular file called layout.component.pec.ts.
* layout.component.html: Will contain the HTML component required during user validation.
* layout.component.css: Will contain the required styling elements.
* layout.component.ts: Will contain the routing and redirect logic.

We will be coding the layout.component.html, layout.component.css, and the layout.component.ts files.

#### Create a Login Component

You need to create a login component in the src/app/ directory path. This component will contain the redirect logic to provide appropriate responses to authenticated and non-authenticated users.

Execute the following command in the src/app/ directory using the Catalyst CLI:

ng generate component login

<br />

This will create a folder named login in the src/app/ directory. 

This login folder will contain:
* Native Angular file called login.component.pec.ts.
* login.component.html: Will contain the HTML component required during user validation.
* login.component.css: Will contain the required styling elements.
* login.component.ts: Will contain the routing and redirect logic.

We will be coding the login.component.css, and the login.component.ts files.

The client directory should now look like the one depicted in the following image.
<br />

You can now begin coding your client.

Note: Please go through the code given in this section to ensure you fully understand it.

Copy the below code and paste it in the index.html file present in the src/ directory.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Zylker Technologies</title>
    <base href="/app/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
    <script src="/__catalyst/sdk/init.js"> </script>
  </head>
  <body>
    <app-root> </app-root>
  </body>
</html>


Paste the following code in the app.component.html, app.component.ts, and the app.module.ts files present in the src/app/ directory.


<router-outlet> </router-outlet>



import { Component } from '@angular/core';

declare global {
  interface Window {
    catalyst: any;     //This is a Catalyst variable that is required to access Catalyst Web SDK methods.
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

}


Note: The variable any is a Catalyst variable we have declared globally. This variable is required to access Catalyst Web SDK methods.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
import { LoginComponent } from './login/login.component';

const approutes: Routes = [
  { path: '', component: LayoutComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' },
];

@NgModule({
  declarations: [AppComponent, LayoutComponent, LoginComponent],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    RouterModule.forRoot(approutes, { useHash: true }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


Copy the following code and paste it in the layout.component.html, layout.component.css, and the layout.component.ts files present in the src/app/layout directory.


<div class="card" *ngIf="isAuthenticated">
  <div class="titleDiv">
    <h1 class="title">User Profile Information</h1>
  </div>
  <div class="imgDiv">
    <img
      id="userimg"
      width="200px"
      height="450px"
      src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
    />
  </div>
  <div class="textDiv">
    <p class="title" id="fname">First Name: {{ firstName }}</p>
    <p class="title" id="lname">Last Name: {{ lastName }}</p>
    <p class="title" id="mailid">Email ID: {{ mailID }}</p>
    <p class="title" id="tzone">Time Zone: {{ timezone }}</p>
    <p class="title" id="ctime">CreatedTime: {{ createdTime }}</p>
  </div>
  <div className="logoutDiv">
    <button (click)="logout()" id="logoutBtn">Logout</button>
  </div>
</div>

<div *ngIf="isFetching" class="loading-div">
  <p class="loading">Loading...</p>
</div>



.card {
  margin: auto;
  text-align: center;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}
.title {
  font-size: 23px;
  color: black;
  margin-top: 30px;
  margin-bottom: 30px;
  font-weight: bold;
}
#userimg {
  height: 20%;
  width: 15%;
}

#logoutBtn {
  background-color: rgb(2, 136, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}

#logoutBtn:hover {
  background-color: rgb(2, 165, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}

body {
  width: 100%;
}

.loading-div {
  margin-left: 45%;
}

.loading {
  font-weight: bolder;
  font-size: large;
}

#logoutBtn:active {
  background-color: rgb(2, 172, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}



import { Component, OnInit } from '@angular/core'; //decorator which indicates this is a component
import { Router } from '@angular/router';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css'],
})
export class LayoutComponent implements OnInit {
  constructor(private router: Router) {}

  firstName: any;
  lastName: any;
  mailID: any;
  timezone: any;
  createdTime: any;
  isAuthenticated: boolean = false;
  isFetching: boolean = true;

  ngOnInit(): void {
    window.catalyst.auth
      .isUserAuthenticated()
      .then((result: any) => {
        console.log(result);
        console.log(result.content.email_id);
        this.isAuthenticated = true;
        this.mailID = result.content.email_id;
        this.firstName = result.content.first_name;
        this.lastName = result.content.last_name;
        this.timezone = result.content.time_zone;
        this.createdTime = result.content.created_time;
      })

      .catch((err: any) => {
        console.log(err);
      })
      .finally(() => {
        console.log('finally');
        this.isFetching = false;

        this.isAuthenticated
          ? this.router.navigate([''])
          : this.router.navigate(['login']);
      });
  }

  logout() {
    const redirectURL = '/__catalyst/auth/login';
    console.log(redirectURL);

    var auth = window.catalyst.auth;
    auth.signOut(redirectURL);
  }
}


Copy the following code and paste it in the login.component.css, and the login.component.ts files present in the src/app/login directory. 


h1 {
 color: red;
}




import { Component, OnInit } from '@angular/core'; //decorator which indicates this is a component

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css'],
})
export class LoginComponent {
 ngOnInit(): void {
 window.location.href = window.origin + '/__catalyst/auth/login'; // Will handle the login redirects 
 }
}


We will now modify the client-package.json file present in the client root directory.


    {
        "name": "zylkertechnologies",
        "version": "0.0.1",
        "homepage": "/__catalyst/auth/login",
        "login_redirect": "index.html"
    }

Note: The homepage URL can be copied from the Access URL generated by Catalyst in the Authentication Types section of the console.

The client directory is now configured.

Let's go over the working of the function and client code.

* The end-user will first encounter the Login Page that you configured and styled in the console.

* To create an account, they will click the Sign Up option and be directed to the Sign Up page.

Note: End-users can either sign up to your application using the Social Logins or use the conventional method of signing up to the application using their email address

* After the information has been entered and they click **Sign Up**, or if they attempt to sign up using a *Social Login* of their preference, their details will be populated and provided as a JSON input to the Custom User Validation function- authorization_portal_function/index.js. 

* The function will only authenticate users that have signed up to the application using a Zylker email address.

* Upon successful authentication, an *Email Verification* email will be sent to the account they used to sign up to the application.

Note: Because we are using Hosted Login, no additional logic to trigger the appropriate emails is required. It will be handled by Catalyst automatically.

* After the user verifies their email address by clicking the link provided in the email, they will be signed up for the application. Their details can be viewed in the *User Management* section of the Authentication component.

* The end-user can now log in to application using their authenticated credentials.

* The end-user can also reset their password by clicking the **Forgot Password** option.

* In this event, the *Password Reset* email will be sent to their registered email. Following the steps mentioned in the email, they can easily reset their credentials.



--------------------------------------------------------------------------------
title: "Test the Application"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.314Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/test-app/"
service: "All Services"
related:
- Serve CLI Resources (/en/cli/v1/serve-resources/introduction)

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


# Test the Application

Before you deploy the application to the remote console, you can test the application on a local server and check if everything works using the Catalyst CLI. For detailed information on catalyst serve, refer to the Serve Resources help page.

To serve the Catalyst project locally, execute the following command from your project directory:

catalyst serve

The authorization portal application will now be served at default port 3000. The local endpoint URLs of the components will be displayed in the CLI.




<br />

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

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

### Test Case 1

#### Sign up using email address

1. Click **Sign Up** to create a new account.
<br />

2. Enter the required details and click **Sign Up**.
<br />

3. The Email Verification email will be sent to the email address you used to sign up.
<br />

4. Click the link in the email
<br />

5. Follow the instructions and set your password
<br />

Once the password is set, you will be signed in to the application.
<br />

You can verify this by viewing the user information in the User Management section of the *Authentication* component in the console.
<br />

### Test Case 2

#### Test Custom User Validation

1. Sign up to the application using an email address that will induce a failure instance.
<br />

Note: For the purpose of this tutorial, we have coded a logic for the Custom User Validation function where if the user's email provider is anyone other than Zylker Technology (@zylker.com) the end-user will not be able to sign up to the application.

2. You will not be able to sign up to the application using any email address other than the one coded to permit in the function logic.
<br />

### Test Case 3

#### Sign up to the application using Social Logins

1. You can click a social login that you had configured to begin the sign up process. For this test, we are signing up using the Zoho social login.
<br />

2. Click **Accept**.
<br />

You will be logged in to the application.
<br />

You can verify the end-user has been added by viewing their details in the *User Management* section of the Authentication component in the console.

### Test Case 4

#### Password reset functionality

1. Click the **Forgot Password** option.
<br />

2. Enter the email address
<br />

3. Enter the captcha.
<br />

4. You can still unlock an option if you remember any earlier password you had used to create this account. However, to test this functionality, click **Continue to reset password**.
<br />

5. Click **SEND OTP** to send the OTP to your email address.
<br />

6. Enter the OTP received in your email and click **Verify**.
<br />

7. You can create your new password now and click **Change Password**.
<br />

You will be redirected to the login page, where you can log in to the application using the new password.




<br />

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

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

### Test Case 1

#### Sign up using email address

1. Click **Sign Up** to create a new account.
<br />

2. Enter the required details and click **Sign Up**.
<br />

3. The Email Verification email will be sent to the email address you used to sign up.
<br />

4. Click the link in the email
<br />

5. Follow the instructions and set your password
<br />

Once the password is set, you will be signed in to the application.
<br />

You can verify this by viewing the user information in the User Management section of the *Authentication* component in the console.
<br />

### Test Case 2

#### Test Custom User Validation

1. Sign up to the application using an email address that will induce a failure instance.
<br />

Note: For the purpose of this tutorial, we have coded a logic for the Custom User Validation function where if the user's email provider is anyone other than Zylker Technology (@zylker.com) the end-user will not be able to sign up to the application.

2. You will not be able to sign up to the application using any email address other than the one coded to permit in the function logic.
<br />

### Test Case 3

#### Sign up to the application using Social Logins

1. You can click a social login that you had configured to begin the sign up process. For this test, we are signing up using the Zoho social login.
<br />

2. Click **Accept**.
<br />

You will be logged in to the application.
<br />

You can verify the end-user has been added by viewing their details in the *User Management* section of the Authentication component in the console.

### Test Case 4

#### Password reset functionality

1. Click the **Forgot Password** option.
<br />

2. Enter the email address
<br />

3. Enter the captcha.
<br />

4. You can still unlock an option if you remember any earlier password you had used to create this account. However, to test this functionality, click **Continue to reset password**.
<br />

5. Click **SEND OTP** to send the OTP to your email address.
<br />

6. Enter the OTP received in your email and click **Verify**.
<br />

7. You can create your new password now and click **Change Password**.
<br />

You will be redirected to the login page, where you can log in to the application using the new password.




<br />

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.

<br />

You can now open the client component’s local URL in a browser to access the application.

### Test Case 1

#### Sign up using email address

1. Click **Sign Up** to create a new account.
<br />

2. Enter the required details and click **Sign Up**.
<br />

3. The Email Verification email will be sent to the email address you used to sign up.
<br />

4. Click the link in the email
<br />

5. Follow the instructions and set your password
<br />

Once the password is set, you will be signed in to the application.
<br />

You can verify this by viewing the user information in the User Management section of the *Authentication* component in the console.
<br />

### Test Case 2

#### Test Custom User Validation

1. Sign up to the application using an email address that will induce a failure instance.
<br />

Note: For the purpose of this tutorial, we have coded a logic for the Custom User Validation function where if the user's email provider is anyone other than Zylker Technology (@zylker.com) the end-user will not be able to sign up to the application.

2. You will not be able to sign up to the application using any email address other than the one coded to permit in the function logic.
<br />

### Test Case 3

#### Sign up to the application using Social Logins

1. You can click a social login that you had configured to begin the sign up process. For this test, we are signing up using the Zoho social login.
<br />

2. Click **Accept**.
<br />

You will be logged in to the application.
<br />

You can verify the end-user has been added by viewing their details in the *User Management* section of the Authentication component in the console.

### Test Case 4

#### Password reset functionality

1. Click the **Forgot Password** option.
<br />

2. Enter the email address
<br />

3. Enter the captcha.
<br />

4. You can still unlock an option if you remember any earlier password you had used to create this account. However, to test this functionality, click **Continue to reset password**.
<br />

5. Click **SEND OTP** to send the OTP to your email address.
<br />

6. Enter the OTP received in your email and click **Verify**.
<br />

7. You can create your new password now and click **Change Password**.
<br />

You will be redirected to the login page, where you can log in to the application using the new password.




--------------------------------------------------------------------------------
title: "Deploy the Application"
description: "Create a simple Basic or React application using the features of Catalyst Hosted Authentication that provides user sign-up, application login, password reset, and implements sign-in using prevalent federated identity providers."
last_updated: "2026-09-09T11:06:26.316Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/java/deploy-app/"
service: "All Services"
related:
- Deploy CLI Resources (/en/cli/v1/deploy-resources/introduction/)
- Web Client Hosting (/en/cloud-scale/help/web-client-hosting/introduction)

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


# Deploy the Application

To deploy your Catalyst project from the CLI, run the following command in your terminal from your project directory:

catalyst deploy

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




<br />

Note You can also use the catalyst deploy --only client CLI command to deploy the client component alone, as the function component was already deployed.

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 />

The authorization portal application is now functional and should work without any errors.




<br />

Note You can also use the catalyst deploy --only client CLI command to deploy the client component alone, as the function component was already deployed.

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 />

The authorization portal application is now functional and should work without any errors.




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

Note: You can also use the catalyst deploy --only client CLI command to deploy the client component alone, as the function component was already deployed.

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 />

The authorization portal application is now functional and should work without any errors.




<br />