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.