Skip to main content

Reference: TideCloak JavaScript SDK (@tidecloak/js)

A compact reference for the Vanilla JS SDK surface.

Install​

npm install @tidecloak/js

Top-Level Exports​

IAMService​

High-level service for auth & E2EE. Also manages events.

Initialization​

await IAMService.initIAM(config: AdapterJson & { redirectUri?: string }): Promise<void>

IAMService.isLoggedIn(): boolean

Login/Logout​

IAMService.doLogin(): void

IAMService.doLogout(): void

Tokens & Claims​

await IAMService.getToken(): Promise<string> // Access token (JWT)

IAMService.getIDToken(): string | undefined // ID token (JWT)

IAMService.getTokenExp(): number | undefined // epoch seconds

IAMService.getName(): string | undefined // preferred_username



IAMService.getValueFromToken(key: string): any

IAMService.getValueFromIDToken(key: string): any

Roles​

IAMService.hasRealmRole(role: string): boolean

IAMService.hasClientRole(role: string, clientId?: string): boolean

Refresh​

await IAMService.updateIAMToken(): Promise<boolean> // refresh if needed

await IAMService.forceUpdateToken(): Promise<boolean>

E2EE​

type EncryptItem = { data: string | Uint8Array, tags: string[] };

type DecryptItem = { encrypted: string, tags: string[] };



await IAMService.doEncrypt(items: EncryptItem[]): Promise<string[]>

await IAMService.doDecrypt(items: DecryptItem[]): Promise<(string|Uint8Array)[]>

Permissions: _tide_<tag>.selfencrypt to encrypt; _tide_<tag>.selfdecrypt to decrypt. Output order matches input order. data must be string or Uint8Array.

Events​

type Handler = (...args: any[]) => void;

IAMService.on(event: string, handler: Handler): typeof IAMService

IAMService.off(event: string, handler: Handler): typeof IAMService

Events:

  • ready (authenticated: boolean)
  • initError (error)
  • authSuccess
  • authError (error)
  • authRefreshSuccess
  • authRefreshError (error)
  • logout
  • tokenExpired

TideCloak​

Lower-level adapter instance (Keycloak-style). Prefer IAMService unless you need advanced control.

Files You Must Provide​

  • tidecloak.json (adapter from your realm client)
  • public/silent-check-sso.html
  • A redirect page (default path /auth/redirect)

Example: Minimal Bootstrap​

<!-- index.html -->

<button id="login-btn">Log In</button>

<button id="logout-btn" style="display:none">Log Out</button>

<div id="status">Initializing...</div>

<script type="module" src="/main.js"></script>
// main.js

import { IAMService } from "@tidecloak/js";

import config from "./tidecloak.json";



const login = document.getElementById("login-btn");

const logout = document.getElementById("logout-btn");

const status = document.getElementById("status");



function ui(authed){ status.textContent = authed ? "✅ Authenticated" : "🔒 Please log in";

  login.style.display = authed ? "none" : "inline-block";

  logout.style.display = authed ? "inline-block" : "none";

}

login.onclick = () => IAMService.doLogin();

logout.onclick = () => IAMService.doLogout();



IAMService.on("ready", ui).on("tokenExpired", () => ui(false));

await IAMService.initIAM(config);

Troubleshooting​

  • Renders as code block, not diagram: You're using a fenced ``` block. That's expected for code snippets; use Mermaid/Kroki only if configured in your docs site.
  • Login succeeds but returns 404: Your redirect route/file doesn't exist. Create /auth/redirect.html or set a custom redirectUri.
  • Encrypt errors: Ensure data is a string or Uint8Array, and the user has all required tag roles.