Example Snippets Highlighting Optimizations with Modular SDK
The following snippets are examples highlighting the differences and advantages that are possible when you use the Modular JavaScript SDK instead of individually using Server SDK for server functionality and Web SDK for browser functionality.
Node Considerations
The following snippet installs the entire Catalyst Node.js server SDK to use the Authentication and Stratus components.
'use strict';
const catalyst = require('zcatalyst-sdk-node');
module.exports = async (req, res) => {
var url = req.url;
const app = catalyst.initialize(req);
switch (url) {
case '/stratus': {
const stratus = app.stratus();
const bucket = stratus.bucket("bucketName");
const buckets = await bucket.getDetails();
console.log(buckets);
}
default:
res.writeHead(404);
res.write('You might find the page you are looking for at "/" path');
break;
}
res.end();
};
Now, in the Modular JavaScript SDK, to use the required Authentication, and Stratus component, you are going to initialize those modules.
'use strict';
const { IncomingMessage, ServerResponse } = require("http");
const { zcAuth } = require('@zcatalyst/auth');
const { Stratus } = require('@zcatalyst/stratus');
/**
* @param {IncomingMessage} req
* @param {ServerResponse} res
*/
module.exports = async (req, res) => {
var url = req.url;
switch (url) {
case '/stratus':
const auth = await zcAuth.init(req);
const stratus = new Stratus();
const bucket = stratus.bucket("bucketName");
const buckets = await bucket.getDetails();
console.log(buckets);
break;
default:
res.writeHead(404);
res.write('You might find the page you are looking for at "/" path');
break;
}
res.end();
};
Browser Considerations
The following snippet installs the entire WebSDK just to use the Authentication component.
<script src="https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js"></script>
<script src="/__catalyst/sdk/init.js"></script>
<script>
catalyst.auth.signIn("your element ID here...");
</script>
Now, in the Modular JavaScript SDK, to use the required Authentication component, you are going to initialize the Authentication module.
<script type="module">
import { zcAuth } from 'zcatalyst.js';
const config = {
cssUrl: "/css/embeddediframe.css", // Provide your custom CSS file path here. If no path is provided default css will be rendered
serviceUrl: "/app/index.html", // This value is optional. You can provide your redirect URL here.
isCustomizeForgotPassword: true, // Default value is false. Keep this value as true, if you wish to customize Forgot Password page
forgotPasswordId: "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
forgotPasswordCssUrl: "/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.
};
zcAuth.signIn("element_id", config);
</script>
Last Updated 2026-07-02 14:51:41 +0530 IST
Yes
No
Send your feedback to us