--- title: "Introduction" url: https://docs.catalyst.zoho.com/en/tutorials/hosted-login-app/nodejs/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-08-17T12:16:04Z service: All Services type: tutorial related_links: - name: "Project Directory Structure" url: /en/cli/v1/project-directory-structure/introduction/ - name: "Hosted Authentication Type" url: /en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/ - name: "User Management" url: /en/cloud-scale/help/authentication/user-management/introduction/ - name: "Custom User Validation" url: /en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/ - name: "Social Logins" url: /en/cloud-scale/help/authentication/social-logins/introduction/ - name: "Java SDK" url: /en/sdk/java/v1/overview/ - name: "Node.js SDK" url: /en/sdk/nodejs/v2/overview/ - name: "Python SDK" url: /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](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/) function. The *Authorization Portal* application uses the following Catalyst services and their respective components: - [**Catalyst Cloud Scale**](https://docs.catalyst.zoho.com/en/cloud-scale/) - **Authentication**: The end-user will be authenticated to your application using the [Hosted Authentication](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/), a [Native Catalyst Authentication Type](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/introduction/). - **Web Client Hosting**: The front end of the application will be hosted on Catalyst using the [Web Client Hosting](https://docs.catalyst.zoho.com/en/cloud-scale/help/web-client-hosting/introduction/) component. You can initialize and configure the client as a [Basic web app](https://docs.catalyst.zoho.com/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications), a [React app](https://docs.catalyst.zoho.com/en/cli/v1/initialize-resources/initialize-client/#react-applications), or an [Angular app](https://docs.catalyst.zoho.com/en/cli/v1/initialize-resources/initialize-client/#angular-applications). - [**Catalyst Serverless**](https://docs.catalyst.zoho.com/en/serverless/) - **Functions**: We will be coding the [Basic I/O function](https://docs.catalyst.zoho.com/en/serverless/help/functions/basic-io/) in Node.js 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](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-zoho-social-login) - [Google](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-google-social-login) - [Microsoft 365](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-microsoft-365-social-login) - [LinkedIn](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-linkedin-social-login) - [Facebook](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-facebook-social-login) - 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](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/email-templates/customizing-email-templates/). - Configure and add a [Custom User Validation](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/) function - Logging in and out to the application The following image is an example of how the client application's login screen will appear: ![catalyst_authentication_hosted_catalyst_deploy_app_complete](https://catalyst-docs-development.zohostratus.in/images/tutorials/hosted-login/catalyst_authentication_hosted_catalyst_deploy_app_complete.webp) 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](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/user-management/introduction/), after they sign up for the application. Using this feature, you can manage the end-users’ access to your application and [configure their roles](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/user-management/roles/introduction/). * **Authentication Type**: You will be able to view the [authentication type](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/authentication-types/) you have configured for your application and edit your configurations if required. * **Whitelisting**: You will use this section to enable [Custom User Validation](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/). You can also use this section to enable [CORS and iFrame access](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/whitelisting/authorized-domains/introduction/) to your application. * **Email Templates**: You will be able to configure and customize *Email Verification* and *Password Reset* emails from this [section](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/email-templates/introduction/). We will use the [Catalyst web console](https://console.catalyst.zoho.com/baas/index) and the [Catalyst Command Line Interface (CLI)](https://docs.catalyst.zoho.com/en/cli/v1/cli-command-reference/) to build this application. > **Note:** If you are a *Visual Studio Code IDE* user, you can install the **Catalyst Tools** extension, and use your IDE in place of the CLI. You can find more details about the Catalyst VS Code extension from this [help section](https://docs.catalyst.zoho.com/en/catalyst-extensions/vs-code-extension/introduction/). 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. ### 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: - 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.