Automatic login

If you have your own login system and would like to setup automatic login to the app you can use our API to retrieve login tokens that you pass to us.

First add a server-side endpoint to get a login token from our embedded-login-token API. (NOTE: Do not expose the API key in your client app or elsewhere as this allows logging in any user).

TypeScript

app.use(express.json()); // Middleware to parse JSON bodies

app.get('/api/get-kazm-login-token', async (req, res) => {
  // Placeholder for authentication check
  // Replace this with your actual authentication logic
  if (!req.auth || !req.auth.user) {
    return res.status(401).json({ error: 'User not authenticated' });
  }

  const response = await axios.post(
    'https://kazm.com/api/v2/auth/embedded-login-token', 
    {
      accountId: req.auth.user.email, // Replace with your user's email from auth
      accountType: "EMAIL" // Can also be "PHONE" or "ETHEREUM_WALLET"
    },
    {
      headers: {
        'accept': 'application/json',
        // NOTE: This should not be exposed on the client side.
        'Authorization': 'Bearer <myApiKey>', // Replace <myApiKey> with your actual API key
        'Content-Type': 'application/json'
      }
    }
  );

  const loginToken = response.data.token;
  res.json({ token: loginToken });
}

Client Side

Then you can use that login token in your client to log directly in to the app by passing in the loginToken option.

TypeScript

const loginToken = ''; // Retrieve from backend

const sdk = new KazmSDK();
const embed = sdk.initializeEmbed({
  elementId: '<yourHtmlElementId>',
  // Can be found in the Kazm embed window
  membershipId: '<yourMembershipId>',
  loginToken: loginToken,
  options: {
    profileOptions: {
      sdkManagedLogin: true,
    }
  }
});

React Example

TypeScript

import { useEffect } from "react";

import { KazmSDK } from "@kazm/client-sdk";

export function EmbedPage() {
  const elementId = "kazm-container";
  
  // Retrieve kazm login token from your server-side function created above
  const kazmLoginToken = retrieveKazmLoginTokenHook();

  
  useEffect(() => {
    const sdk = new KazmSDK();
    const form = sdk.initializeEmbed({
      elementId: elementId,
      membershipId: "<membership-id>",
      loginToken: kazmLoginToken,
      options: {
        profileOptions: {
          sdkManagedLogin: true,
        }
      }
    });

    return () => {
      form.remove();
    };
  }, [kazmLoginToken]);

  return (
    <div className="flex h-[800px] w-full flex-col bg-gray-800">
      <div className="py-4">Embedded Form</div>
      <div id={elementId} className="flex h-full w-full p-4">
        {/* This is where the SDK will inject its content */}
      </div>
    </div>
  );
}