# Native Catalyst Authentication -------------------------------------------------------------------------------- title: "Introduction" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.535Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/introduction/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Native Catalyst Authentication Native Catalyst Authentication is an Authentication type where the entire authentication setup is handled by Catalyst, without the requirement of any additional coding or infrastructure management from your end. With this authentication type, Catalyst secures end-user access and all the end points of your application, relieving you from the responsibility of handling the backend security requirements. Native Catalyst Authentication can be implemented using either or both of these methods: * {{%link href= "/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/" %}}{{%bold%}}Hosted Login{{%/bold%}}{{%/link%}}: This enables you to create and host your login element as a dedicated page. <br /> You can implement this authentication type, if you wish to provide your end-users a dedicated page for them to sign up, sign in, or perform a password reset operation. {{%note%}}{{%bold%}}Note:{{%/bold%}} Catalyst will provide you with all backend support required to style and customize your login element to match your branding preferences.{{%/note%}} * {{%link href= "/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}{{%bold%}}Embedded Login{{%/bold%}}{{%/link%}}: This enables you to load your application's login element as an iFrame. <br /> You can implement this authentication type, if you want your end-users to complete their authentication process in the same page, without redirecting them to a separate page. For example, in the sample image above, the end-user can continue their login process, while viewing your application's website content or marketing collaterals. {{%note%}}{{%bold%}}Note:{{%/bold%}}You can find out how to customize and style this authentication type from this {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/" %}}help page{{%/link%}}.{{%/note%}} You can implement {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}}Social Logins{{%/link%}} for both the authentication types. Additionally, you can also have your login element in a manner that allows users to access your application {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/scripts-for-embedded/" %}}exclusively through Social Logins{{%/link%}}. ### Benefits * You can choose to host your application's login element on a dedicated page or load it is an iFrame. * You can implement both the native authentication types, along with a third-party authentication, for each of your application. * You can provide your users with the option to sign up to your application by using popular {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}}Social Logins{{%/link%}}. * You do not have to invest time or additional resources to set up a secure infrastructure, because with Native Catalyst Authentication, Catalyst secures all the end points of your application for you. With third-party authentication, you will need to handle the security of your application end-points. * You can set up both of these authentication methods from the console with a few steps, without requiring any additional backend support. <br /> ## Embedded Authentication Type -------------------------------------------------------------------------------- title: "Introduction" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.536Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Embedded Authentication Type Embedded authentication type is a native Catalyst authentication lets you load your login element as an iFrame in your application. This is the ideal authentication type to use if you require your end-users to sign up to your application without leaving the landing page. For example, the end-users can sign up or log in while they are viewing your application's website content or marketing collaterals. You can configure the iFrame to be loaded as a conventional login form. <br /> You can also configure the iFrame to let your end-users log in using only {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}}social logins{{%/link%}}. <br /> You can access **Catalyst Web SDK scripts** for the *Conventional Login Form* and the *Social Logins Only Form* from the console when you set up Embedded Authentication, or from {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/scripts-for-embedded/" %}}this help page{{%/link%}}. You can simply copy and add the required script to your application's web client. You will not need to perform any additional coding. Catalyst handles all the necessary backend operations to secure your application and render your login element as an iFrame in your application. <br /> While the embedded authentication type does allow you to customize and style it as per your preference, you will not have the ease that you can expect while styling {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/" %}}Hosted Authentication Type{{%/link%}}. However, if you use Embedded Authentication along with Hosted Authentication type, then you can directly import styling elements you used for Hosted to be applied to your Embedded iFrame. You can also provide custom CSS your **Confirm Password** and **Password Reset** pages. Additionally, Catalyst will also provide you with a CSS sheet that you can download from the console. Along with this CSS sheet, you can refer the {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/" %}}Styling Embedded Authentication type help section{{%/link%}}, to style your iFrame and the login element, in a manner that does not induce any UI errors. This will be discussed further in the {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/setup-embedded-auth/" %}}setup section{{%/link%}}. -------------------------------------------------------------------------------- title: "Benefits" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.536Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/benefits/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Benefits * Embedded authentication is a type of Native Catalyst Authentication. This ensures that all end points of your application including end users' access to your application are secured by Catalyst. * Catalyst offers you the necessary scripts that you can plug in to your application to configure this authentication method. This will let load your login element as an iFrame in your application, considerably reducing your coding efforts. * You can style the login element per your preferences, and in a manner that reflects your company's branding, ensuring brand consistency. You can easily import this CSS into your login script. * If you are using Embedded Authentication along with Hosted Authentication, then you can directly import the styling elements you used to style your Hosted Login elements to your Embedded Authentication type. You can also easily apply custom styling by importing your CSS file. * Catalyst provides you with a CSS style-sheet for the default iFrame design, that you can simply download and customize as per your requirements. * You can implement the embedded authentication type in two ways—*Conventional Login Form* and *Social Login Form*. Each method allows you to provide the required sign in logic in your app, while ensuring a smooth end-user experience and complete security. -------------------------------------------------------------------------------- title: "Scripts for Embedded Authentication" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.536Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/scripts-for-embedded/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Scripts for Embedded Authentication Catalyst offers you the following scripts that you can incorporate in your web client application to implement Embedded authentication. For **Conventional Login Form** Type <br /> {{%code class="language-javascript line-numbers" scroll="set-scroll" %}}&lt;script src="https://static.zohocdn.com/catalyst/sdk/js/4.4.0/catalystWebSDK.js"&gt; &lt;/script&gt; &lt;script src="/__catalyst/sdk/init.js"&gt; &lt;/script&gt; &lt;script&gt; const config = {}; /* config is optional { css_url : "/css/embeddediframe.css", // Provide your custom CSS file path here. If no path is provided default css will be rendered service_url : "/app/index.html", // This value is optional. You can provide your redirect URL here. is_customize_forgot_password : true, // Default value is false. Keep this value as true, if you wish to customize Forgot Password page forgot_password_id : "forgotPasswordDivElementId", // The Element id in which forgot password page should be loaded,If no value is provided, it will be rendered in the "loginDivElementId" by default forgot_password_css_url : "/css/forgotPwd.css" // Provide your custom CSS file path for the Forgot Password page.If no path is provided,then the default CSS will be rendered. } */ catalyst.auth.signIn("loginDivElementId", config); &lt;/script&gt; {{% /code%}} <br /> For **Social Login-only Form** Type <br /> {{%code class="language-xml line-numbers"%}}&lt;script src="https://static.zohocdn.com/catalyst/sdk/js/4.4.0/catalystWebSDK.js"&gt; &lt;/script&gt; &lt;script src="/__catalyst/sdk/init.js"&gt; &lt;/script&gt; &lt;script&gt; const config = { signin_providers_only : true, // Set value as true to customize the sign in provider only form css_url : "/css/embeddediframe.css", // Provide your custom CSS file path here. If no path is provided default css will be rendered service_url : "/app/index.html" // Provide your redirect URL here. This value is optional. } catalyst.auth.signIn(elementId, config); &lt;/script&gt; {{%/code%}} {{%note%}}{{%bold%}}Note:{{%/bold%}} These scripts are also available in the console. You can directly copy and enable them while you are setting up embedded authentication and in the {{%italics%}}Authentication Type{{%/italics%}} section of the console.{{%/note%}} -------------------------------------------------------------------------------- title: "Setup Embedded Authentication" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.536Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/setup-embedded-auth/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Setup Embedded Authentication To enable and configure Embedded Authentication type: 1. Navigate to **Authentication** in *Cloud Scale* section of the Catalyst console, and click the **Set Up** option present in the *Native Catalyst Authentication* section. <br /> 2. Select **Embedded Authentication** as the type of native authentication method, and click **Next**. <br /> 3. Enable CSS Customization - If you wish to provide a custom CSS for your **Confirm Password** and **Reset Password** elements: <br /> - Provide the file path of where you have stored the required CSS files in your project directory. <br /> - If you are using Embedded Authentication along with Hosted Login, you can inherit styling elements from Hosted Login: <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} No previews will be made available by Catalyst, for you to view the rendering of your login element, or the {{%bold%}}Reset Password{{%/bold%}} and {{%bold%}}Confirm Password{{%/bold%}} pages.{{%/note%}} 4. Choose how you wish your login element to be: * To load the login element as a conventional login form: Click the **Login Form** option in the *Configuration* step. Copy the script and paste it in the HTML file of your web client that contains the index of your application. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} You can click {{%bold%}}View Sample Image{{%/bold%}} to view and compare how each of the login forms would appear to the end-user. These are only sample images, not the actual rendering of how the form will appear with your custom styling.{{%/note%}} * To load the login element with only the Social Logins or IdP sign in options: Click the **Social Login-Only Form** option in the *Configuration* step. Copy the script and paste it in the HTML file of your web client that contains the index of your application. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} The {{%italics%}}Social Login-Only Form{{%/italics%}} can only be implemented if you have coded your web client application using the latest {{%link href="/en/sdk/web/v4/overview/" %}}Catalyst Web SDK{{%/link%}}. This method is only supported in {{%bold%}}v4{{%/bold%}} and not in the earlier versions.{{%/note%}} You can access earlier versions of embedded authentication, by clicking and choosing from the **Version** drop-down. However, ensure that you implement the latest version as this would include upgraded security definitions and enhancements. <br /> 5. Enable **Public Signup** if you wish new users to sign up to your application. You can find out more about this from the {{%link href="/en/cloud-scale/help/authentication/public-signup/" %}}Public Signup help page{{%/link%}}. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} You must enable {{%bold%}}Public Signup{{%/bold%}} if you want to allow your users to access your application through Social Logins.{{%/note%}} 6. You can select the Social Logins and enable them to allow your users to use them and sign up for your applications. You can learn about configuring each social login in detail from the {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/" %}}Social Logins help section{{%/link%}}. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you have {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} provided by the social login before you configure it here. You can find out about obtaining the {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} values for each of the social login using this {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/" %}}step-by-step guide{{%/link%}}.{{%/note%}} 7. Click **Next** to save your configurations, and proceed to the {{%italics%}}Addional Settings{{%/italics%}} section. You can choose to include an additional authentication step by enabling the {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction" %}}{{%bold%}}Custom User Validation{{%/bold%}}{{%/link%}} option. This option allows you to validate your end-users using a {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/how-it-works" %}}custom logic{{%/link%}} that you code in a {{%link href="/en/serverless/help/functions/basic-io" %}}Basic I/O function{{%/link%}}. You can find out how to set this up in the {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/implementation" %}}Whitelisting help document{{%/link%}}. You can use the {{%italics%}}Authorized Domains{{%/italics%}} section to authorize external domains to have CORS and iFrame access to your application. You can find out how to set up authorized domains in the {{%link href="/en/cloud-scale/help/authentication/whitelisting/authorized-domains/introduction" %}}Authorized Domain help section{{%/link%}}. <br /> 8. Click **Finish** to enable the Embedded Authentication type. <br /> You will now be able to view the authentication that you have set up in the {{%link href="/en/cloud-scale/help/authentication/authentication-types/" %}}Authentication Type{{%/link%}} section of *Authentication*. In this section, you can edit your Social Logins configurations by clicking the required Social Login tile and providing your new OAuth credentials. <br /> You can also edit your CSS Customization configurations: 1. Click the **Edit** button. <br /> 2. You can provide new custom CSS files, choose to inherit the styling you applied when you set up Hosted Authentication type, or even disable the customization. <br /> 3. Click **Update**. <br /> Your preferences will be rendered. <br /> You can also access the login scripts for embedded authentication at anytime from this section. -------------------------------------------------------------------------------- title: "Stlying Embedded Authentication" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.537Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Styling Embedded Authentication Type Catalyst enables you to style both variants of the embedded authentication type: * The conventional login form iFrame * The Social Login-only form iFrame You can also style the **Reset Password** and the **Confirm Password** pages by providing custom CSS files or by importing the styling elements you used to set up *Hosted Authentication* type. ### To change the style of the conventional iFrame: <br /> 1. Download the CSS file, and begin styling your iFrame login element after the last line of code as instructed in the file. {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css" %}}Download here{{%/link%}}. 2. {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/" %}}Refer to this document{{%/link%}}, to know the descriptions of each CSS component. ### To change the style of the Social Login-only form: <br /> 1. Download the CSS file, and begin styling your iFrame login element after the last line of code as instructed in the file. {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css" %}}Download here{{%/link%}}. 2. {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/" %}}Refer to this document{{%/link%}}, to view the descriptions of each CSS component. ### To change the style of the Confirm Password iFrame: <br /> 1. Download the CSS file, and begin styling your iFrame login element after the last line of code as instructed in the file. {{%link href="https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css" %}}Download here{{%/link%}}. 2. {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/#section-where-the-end-user-confirms-their-password/" %}}Refer to this document{{%/link%}}, to view the descriptions of each CSS component. ### To change the style of the Password Reset iFrame: <br /> 1. Click the download button to download the CSS file, and begin styling your document after the last line of code as instructed in the document. {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css" %}}Download here{{%/link%}}. 2. {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/" %}}Refer to this document{{%/link%}}, to view the descriptions of each CSS component. -------------------------------------------------------------------------------- title: " Reference for Embedded Authentication's Style-sheet" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.537Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Refrence Style-sheet for Embedded Authentication This page lists and provides descriptions for all the CSS classes and IDs that you would require to style your login element with, in the {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}Embedded Authentication{{%/link%}} type. Catalyst provides individual CSS files for the Conventional Login form, Social-Login Only form, and Password Reset form, with individual CSS IDs and classes for them. These CSS IDs and classes are pre-defined by Catalyst for your ease. You can simply incorporate them into your style-sheet as per your need, and customize the design and branding of the login elements. You must import the CSS file you configure into your login form scripts of this authentication. Before you begin styling your iFrame, download the required CSS file. CSS style-sheet for: * Conventional Login form - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css" %}}Download{{%/link%}} * Social Login-only form - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css" %}}Download{{%/link%}} * Confirm Password form - {{%link href="https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css" %}}Download{{%/link%}} * Password Reset form - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css" %}}Download{{%/link%}} {{%note%}}{{%bold%}}Note:{{%/bold%}} After you download the style-sheet, begin styling your login element after the last line of code. We strongly recommend that you do not alter the code that is already present. Modifying it any way might not render the iFrame correctly. Refer to this {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/" %}}sheet{{%/link%}} for more detailed information on how each of the form mentioned above would appear to the end-users.{{%/note%}} ### Section where the end-user inputs their email address <br /> <br /> #### Section 1 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#headtitle</td> <td>The ID that handles the styling elements present in the title of the iFrame</td> </tr> </tbody> </table> #### Section 2 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#login_id</td> <td>The ID that handles the styling of the input field</td> </tr> <tr> <td>.fielderror</td> <td>The class that handles the size of the error text</td> </tr> <tr> <td>.errorlabel</td> <td>The class that handles the color scheme of the error message</td> </tr> <tr> <td>.errorborder</td> <td>The class that handles the border color that appears in the event of an error, around the input field</td> </tr> </tbody> </table> #### Section 3 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#nextbtn</td> <td>The ID that handles the styling of the "{{%bold%}}NEXT{{%/bold%}}" button</td> </tr> </tbody> </table> #### Section 4 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#forgotpassword</td> <td>The ID that handles the styling of the "{{%bold%}}Forgot Password{{%/bold%}}" literal</td> </tr> </tbody> </table> #### Section 5 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.fed_div</td> <td>The class that handles the size, height, cursor and overflow of the social login option as a whole</td> </tr> <tr> <td>.zoho_fed_box</td> <td>The class that handles the color scheme of the Zoho social login</td> </tr> <tr> <td>.fed_icon</td> <td>The class that handles the size of the logos of all social logins</td> </tr> <tr> <td>..zoho_icon</td> <td>The class that handles the logo icon of the Zoho social login</td> </tr> </tbody> </table> ### Section where the end-user inputs their password <br /> <br /> #### Section 1 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.username</td> <td>The class that handles the email address field</td> </tr> </tbody> </table> #### Section 2 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.Notyou</td> <td>The class that handles the font size of the "{{%bold%}}Change{{%/bold%}} literal</td> </tr> <tr> <td>.bluetext</td> <td>The class that handles the color and other properties of the "{{%bold%}}Change{{%/bold%}}" literal</td> </tr> </tbody> </table> #### Section 3 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#password</td> <td>The ID that handles the various properties of the input field</td> </tr> <tr> <td>.fielderror</td> <td>The class that handles the size of the error text</td> </tr> <tr> <td>.errorborder</td> <td>The class that handles the border color that appears in the event of an error around the input field</td> </tr> <tr> <td>.errorlabel</td> <td>The class that handles the color scheme of the error text</td> </tr> <tr> <td>.show_hide_password</td> <td>The class that handles the properties of the visibility-icon</td> </tr> <tr> <td>.icon_hide</td> <td>The class that handles the properties of the hidden-icon</td> </tr> <tr> <td>.icon_show</td> <td>The class that handles the properties of the visibility-icon when clicked</td> </tr> </tbody> </table> #### Section 4 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.blue_text_action</td> <td>The class that handles the color scheme, font size and other properties of both the literals</td> </tr> </tbody> </table> #### Section 5 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.blue</td> <td>The class that handles the color scheme of the Sign In button and box</td> </tr> <tr> <td>.btn</td> <td>The class that handles the size of the button</td> </tr> </tbody> </table> ### Section where the end-user confirms their password <br /> #### Section 1 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.confirmtitle</td> <td>The class that handles the styling elements present in the title.</td> </tr> <tr> <td>.confirmdesc</td> <td>This is the notification/description element which is notify to create a strong and unique password at the bottom of the title element.</td> </tr> <tr> <td>.confirm_head</td> <td>The class that handles the styling of the Background of the confirmation form.</td> </tr> </tbody> </table> #### Section 2 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.username</td> <td>The class that handles the email address field.</td> </tr> <tr> <td>.icon-profile</td> <td>The class that handles the profile in that email address field.</td> </tr> </tbody> </table> #### Section 3 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#password</td> <td>The ID that handles the styling elements present in the password input field.</td> </tr> <tr> <td>.icon-hide</td> <td>The class that handles the properties of the hidden-icon</td> </tr> <tr> <td>.show_hide_password</td> <td>The class that handles the properties of the visibility of the icon</td> </tr> <tr> <td>.fielderror</td> <td>The class that handles the size of the error text.</td> </tr> <tr> <td>.passwordpolicy</td> <td>The class that handles the pop which contains the password policy.</td> </tr> </tbody> </table> #### Section 4 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#cpassword</td> <td>The ID that handles the input field for confirm password.</td> </tr> </tbody> </table> #### Section 5 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#nextbtn</td> <td>The ID that handles the confirm button.</td> </tr> </table> ### Section where the end-user inputs the CAPTCHA <br /> <br /> #### Section 1 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#headtitle</td> <td>The ID that handles the styling elements present in the title of the iFrame</td> </tr> </tbody> </table> #### Section 2 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.user_info</td> <td>The class that handles styling elements of the box's border</td> </tr> <tr> <td>.menutext</td> <td>The class that handles the styling of the user's email ID</td> </tr> </tbody> </table> #### Section 3 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.changeuser</td> <td>The class that handles the styling elements present in the "{{%bold%}}Change{{%/bold%}}" literal</td> </tr> </tbody> </table> #### Section 4 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>#captcha_container</td> <td>The ID that handles the styling of the box surrounding the Captcha control box</td> </tr> <tr> <td>.reload_captcha ::before</td> <td>The class that handles the styling of the reload button, before it is clicked</td> </tr> <tr> <td>.text_box</td> <td>The class that handles the properties of the input field</td> </tr> </tbody> </table> #### Section 5 <br /> <table class="content-table"> <thead> <tr> <th class="w50p">CSS IDs & Classes</th> <th class="w50p">Description</th> </tr> </thead> <tbody> <tr> <td>.blue</td> <td>The class that handles the color scheme of the button and box</td> </tr> <tr> <td>.btn</td> <td>The class that handles the size of the button</td> </tr> </tbody> </table> ## Hosted Authentication Type -------------------------------------------------------------------------------- title: "Introduction" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.538Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Hosted Authentication Type This is a Native Catalyst Authentication type that enables you to host your login element on dedicated pages. You can configure and design the authentication from the console, and Catalyst will render it for your application and handle all the backend requirements. <br /> Hosted authentication enables you to create and style your entire login element as per your preferences. The customization includes adding your company's logo in the login elements, and the background and predominant colors of the windows and buttons. You can additionally implement {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction" %}}Social Login{{%/link%}} options with popular Identity providers (IdP), such as {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-zoho-social-login" %}}Zoho{{%/link%}}, {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-google-social-login" %}}Google{{%/link%}}, {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-facebook-social-login" %}}Facebook{{%/link%}}, {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-linkedin-social-login" %}}LinkedIn{{%/link%}}, and {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-microsoft-365-social-login" %}}Microsoft 365{{%/link%}}, by inputting the {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} generated from the IdPs console. The hosted login element is made up of three pages, and Catalyst hosts each of these on a separate page with individual URLs: - {{%bold%}}The Sign Up Page{{%/bold%}}: This page enables the end user to sign up for your application by entering their first name, last name, and email address. They can also click the Sign in option, if they have already signed up to your application. <br /> {{%note%}}{{%bold%}}Note{{%/bold%}}: You need to enable {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/" %}}Public Signup{{%/link%}} to view the {{%bold%}}Sign Up{{%/bold%}} page{{%/note%}} - {{%bold%}}The Sign In Page{{%/bold%}}: This page enables your existing end user to log in to your application with their email address and password. <br /> - {{%bold%}}The Password Reset page{{%/bold%}}: This page enables your user to enter their email, mobile number or username to reset their password. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} The secure URLs containing the endpoints for the Sign Up, Sign In, and Password Reset pages of your Hosted Login are automatically generated by Catalyst, and can be incorporated into your application client.{{%/note%}} <br /> -------------------------------------------------------------------------------- title: "Benefits" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.538Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/benefits/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Benefits * You can create your login elements on dedicated pages in your app, and design them to resonate with your brand, without any coding. * You can easily enable this authentication type and configure it directly from the console. Catalyst infrastructure ensures that even if you have configured another authentication type, you can additionally include Hosted Login in your app. * You can easily add social logins to your login element while setting this authentication method up. Catalyst provides you {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/" %}}step-by-step guides{{%/link%}} or configuring these social logins and obtaining the required OAuth credentials to add in the console. <br /> -------------------------------------------------------------------------------- title: "Configure Hosted Authentication" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.538Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/configure-hosted-authentication/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Configure Hosted Authentication Type To enable and configure Hosted authentication type: 1. Navigate to {{%bold%}}Authentication{{%/bold%}} in the {{%italics%}}Cloud Scale{{%/italics%}} section of the Catalyst console. Click the {{%bold%}}Set Up{{%/bold%}} option present in the {{%italics%}}Native Catalyst Authentication{{%/italics%}} section. <br /> 2. Select {{%bold%}}Hosted Authentication{{%/bold%}} as the type of native authentication method, and click {{%bold%}}Next{{%/bold%}}. <br /> 3. You can configure your login element now to reflect your company's brand. Enter the {{%italics%}}Company Name{{%/italics%}}, and upload the {{%italics%}}Company Logo{{%/italics%}} by clicking the upload-icon and choosing a file from your local system. <br /> {{%note%}}{{%bold%}}Note{{%/bold%}}: The file size of the {{%italics%}}Company Logo{{%/italics%}} must be {{%bold%}}5MB{{%/bold%}} or less and the file name must be {{%bold%}}150 characters{{%/bold%}} or less.{{%/note%}} 4. You can incorporate your company's colors in your login elements by choosing the primary color and background color from the color palette, or by entering their HEX values. <br /> 5. Enable {{%bold%}}Public Signup{{%/bold%}} if you wish to allow new users to sign up to your application. You can find out more on this from the {{%link href="/en/cloud-scale/help/authentication/public-signup/" %}}Public Signup help page{{%/link%}}. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} You must enable {{%bold%}}Public Signup{{%/bold%}} if you want to view the Sign Up page and allow your users to access your application through {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}}Social Logins{{%/link%}}.{{%/note%}} 6. You can also select the Social Logins and enable them to allow your users to use them and sign up for your applications. You can learn about configuring each social login in detail from the {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction" %}}Social Logins help section{{%/link%}}. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you have {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} values for each of the social login using this {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/" %}}step-by-step guide{{%/link%}}.{{%/note%}} 7. In the {{%italics%}}Addional Settings{{%/italics%}} section you can choose to include an additional authentication step by enabling the {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction" %}}{{%bold%}}Custom User Validation{{%/bold%}}{{%/link%}} option. This option allows you to validate your end-users using a {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/how-it-works" %}}custom logic{{%/link%}} that you code in a {{%link href="/en/serverless/help/functions/basic-io" %}}Basic I/O function{{%/link%}}. You can find out how to set this up in the {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/implementation" %}}Whitelisting help document{{%/link%}}. You can use the {{%italics%}}Authorized Domains{{%/italics%}} section to authorize external domains to have CORS and iFrame access to your application. You can find out how to set up authorized domains in the {{%link href="/en/cloud-scale/help/authentication/whitelisting/authorized-domains/introduction" %}}Authorized Domain help section{{%/link%}}. <br /> 9. Click {{%bold%}}Finish{{%/bold%}}, to enable the Hosted authentication type. <br /> You will now be able to view the authentication that you have set up in the {{%link href="/en/cloud-scale/help/authentication/authentication-types" %}}{{%italics%}}Authentication Type{{%/italics%}}{{%/link%}} section of {{%italics%}}Authentication{{%/italics%}}. You can view a more detailed preview of how the login element will appear to your end-user by clicking {{%bold%}}Access URL{{%/bold%}}. <br /> This will open a tab in your browser and load the {{%bold%}}Login Page{{%/bold%}} URL in a seperate tab in your browser, giving you an exact view of the entire login element that your end-user would access. <br /> You can similarly view the **Sign Up** and the **Password Reset** pages by clicking the drop-down icon and choosing the respective page, then clicking **Access URL**. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}} You must enable {{%link href="/en/cloud-scale/help/authentication/public-signup/public-signup" %}}Public Signup{{%/link%}}, to view the Sign Up page. You can always edit the configured authentication and enable it any time.{{%/note%}} <br /> -------------------------------------------------------------------------------- title: "Edited Hosted Authentication Type" description: "Catalyst Authentication enables you to provide secure authentication and sign-ins for your app users, and manage their user accounts." last_updated: "2026-03-18T07:41:08.538Z" source: "https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/edit-hosted-authentication/" service: "Cloud Scale" -------------------------------------------------------------------------------- # Edit Hosted Authentication Type You will be able to preview and edit the company branding elements and enable or disable social logins per your preference. {{%note%}}{{%bold%}}Note:{{%/bold%}} <br />If you wish to: * Change any configuration you made in the *Additional Settings* section during the authentication set up, click the *Whitelisting* section, and visit the {{%link href="/en/cloud-scale/help/authentication/whitelisting/introduction" %}}Whitelisting help document{{%/link%}} for more information. * Edit Social Logins, visit {{%link href="/en/cloud-scale/help/authentication/social-logins/modifying-social-logins/" %}}this help section{{%/link%}}. * Set up a different authentication type, visit the {{%link href="/en/cloud-scale/help/authentication/authentication-types" %}}{{%italics%}}Authentication Type{{%/italics%}} help document{{%/link%}} to know how to add a manage multiple authentication types. * Disable/enable Public Signup, and the actions that will follow, refer to the {{%link href="/en/cloud-scale/help/authentication/public-signup/" %}}Public Signup help page{{%/link%}}. {{%/note%}} To edit the Hosted Authentication type: 1. Click the **Edit Page** option present in the review section, and edit the branding and functional elements of the Sign Up, Sign In, and Reset Password pages. <br /> 2. You can edit the *Company Name*, *Company Logo*, the branding colors, and {{%link href= "/en/cloud-scale/help/authentication/social-logins/modifying-social-logins/" %}}edit, enable or disable social logins{{%/link%}} and {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/" %}}configure{{%/link%}} them. You will be able to view live preview of the edits. <br /> {{%note%}}{{%bold%}}Note:{{%/bold%}}Note: You can click {{%bold%}}Maximize{{%/bold%}} to preview the changes in full screen, and click {{%bold%}}Minimize{{%/bold%}} to go back to the configuration section.{{%/note%}} 3. Click **Confirm**, to save the changes. <br /> You can view the updated login element back in the {{%link href="/en/cloud-scale/help/authentication/authentication-types" %}}{{%italics%}}Authentication Types{{%/italics%}}{{%/link%}} section. <br /> <br />