---
title: "Browser Considerations"
url: https://docs.catalyst.zoho.com/en/sdk/javascript/v1/auth-config/browser-consideration/
description: "Catalyst offers you JavaScript SDK in a modular architecture, providing you with a singular SDK for browser and server operations."
last_updated: 2026-09-09T10:45:38Z
service: All Services
type: general
related_links:
  - name: "Java SDK"
    url: /en/sdk/java/v1/overview/
  - name: "Python SDK"
    url: /en/sdk/python/v1/overview/
  - name: "iOS SDK"
    url: /en/sdk/ios/v2/overview/
  - name: "Android SDK"
    url: /en/sdk/android/v2/overview/
  - name: "Flutter SDK"
    url: /en/sdk/flutter/v2/overview/
  - name: "REST APIs"
    url: /en/api/code-reference/general/projects/create-new-project/#CreateNewProject
  - name: "Catalyst Functions"
    url: /en/serverless/help/functions/introduction
repository:
  name: "Repository"
  url: https://github.com/catalystbyzoho/zcatalyst-sdk-js
---

# Browser Considerations

Catalyst provides a straightforward authentication mechanism for users to access the Catalyst REST APIs and our SDKs. In order to use the catalyst components from your client application, it is mandatory to integrate the authentication mechanism provided by Catalyst.

#### Install Requirement

```sh
npm install @zcatalyst/auth
```

#### Import Requirement

```javascript
import {zcAuth} from '@zcatalyst/auth';
```

> **Info:** The required authentication configurations to use JavaScript SDK for browser considerations will be installed by default.

### SignIn Method

**Embedded Authentication**

If you are using the *Embedded Authentication* type for your Catalyst application, then you need to implement the sign in process in the following manner:

```javascript
await zcAuth.signIn('ELEMENT_ID', {
redirectUrl:'/login',
});
```

> **Notes:**

* [Learn more about Embedded Authentication Type](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/scripts-for-embedded/).

* The code contains the line: zcAuth.signIn(“ELEMENT_ID”); . 

The `ELEMENT_ID` can be the ID of any HTML element or div element in your application’s login page. You should replace this with the`ELEMENT_ID` of your application’s login and implement this in the page that contains the user login. 

You can now create a division in the same page for your iFrame as: <\div id=“Your elementID here”> <\/div>. This will span the iFrame for user login in the same page. For example, if your `ELEMENT_ID` is “login”, your code will look like this: 

In the SDK Initialization (Browser) script: zcAuth.signIn(“login”); 

In the body of your page: <\div id=“login”><\div>

**Hosted Authentication**

If you are using the *Hosted Authentication* type for your Catalyst application, then you need to implement the sign in process in the following manner:

```javascript
await zcAuth.hostedSignIn('Redirect_Url'); //Replace with your required URL
```

> **Notes:**

* [Learn more about Hosted Authentication](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/).
* Before using this method, you need to ensure that the Hosted Authentication type is enabled for your application in the Catalyst console.

**Third-party Authentication**

Cloud Scale's Authentication component allows you to implement a [third-party authentication service](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/third-party-authentication/introduction/) of your preference for your Catalyst application. The authorization and validation of the end-user is handled by the third-party service, and the data is passed on to Catalyst.

Before you associate a third-party authentication with your Catalyst application, you must ensure that you have first completed handling the third-party logic in the external service. You can configure the authentication with any third-party of your choice.

> **Note:** Since you are implementing a third-party authentication service, it is understood that the security infrastructure of your application is contingent on the efficiency of the third-party service that you have chosen.

Next, you set up the third-party authentication that you configured in Catalyst by navigating to the Authentication component in *Cloud Scale* in the Catalyst console. The steps are explained in [Set Up Third-party Authentication in Catalyst help page](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/third-party-authentication/implementation/).

This process involves the following steps that you must perform:

### Generate a Custom Server Token

First, we generate a custom server token. When a user is re-directed from a third-party service after being authenticated, their credentials must be passed to an authentication function that you will need to code in [Java](https://docs.catalyst.zoho.com/en/sdk/java/v1/cloud-scale/authentication/third-party-server-token/), [Node.js](https://docs.catalyst.zoho.com/en/sdk/nodejs/v2/cloud-scale/authentication/third-party-server-token/), or [Python](https://docs.catalyst.zoho.com/en/sdk/python/v1/cloud-scale/authentication/third-party-server-token/). This function will generate a Catalyst server-side token **JSON Web Token** token (JWT) which will then be passed to the client.

> **Note:** To enable a third-party authentication in your Catalyst application, you must ensure that you have enabled [Public Signup](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/public-signup/) in the console.

### Authenticate User Using JWT

The below SDK will use the generated JWT or custom token to authenticate the end-user. You must incorporate this code into your web client logic, to enable third-party authentication. 

This is a sample code that uses a JWT to authenticate the user is given below.

```javascript
await zcAuth.signInWithJwt(getCustomTokenCallback);
function getCustomTokenCallback(){
  return fetch("{domain}/server/{function_name}/execute") //function url to get the generated custom token
    .then(resp => resp.json()
      .then(resp => {
        return new Promise((resolve, reject) => {
          resolve({
            client_id:"********",
            scopes:"ZOHOCATALYST.tables.rows.ALL,ZOHOCATALYST.cache.READ",
            jwt_token:"*********"
          });
        });
      })
    );
}
```

> **Note:** The custom server token will have to be generated every single time the user logs in to your application using a third-party authentication service.

### Configure Additional Settings

Finally, you can configure [Customer User Validation](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/) or [Authorized Domains](https://docs.catalyst.zoho.com/en/cloud-scale/help/authentication/whitelisting/authorized-domains/introduction/) as a part of *Whitelisting* and finish the set up. Catalyst will display a confirmation that a third-party authentication service has been enabled and your application’s authentication is being handled by it.

### SignUp Method

You can implement Catalyst Authentication's SignUp process in the following manner:

```javascript
await zcAuth.signUp({
        first_name: 'xxxx',
		last_name: 'yyyyy',
  		email_id:'dfkfjkfj@gmail.com'
 });
```

### Sign Out Method

You can implement Catalyst Authentication's Sign Out or log off process in the following manner:

```javascript
await zcAuth.signOut('Redirect_Url'); // replace your redirect url path here .. defaults '/'
```

### Change Password

You can implement Catalyst Authentication's Change Password process in the following manner:

```javascript
await zcAuth.changePassword("old_password", "new_password");
```