Installation Guide

Load the Authentication Kit in your app in one of two ways: HTML / CDN (default, matches the Dashboard snippet) or npm (init({ projectId })).

Method 1: HTML / CDN (default)

Add the Dynamic SDK loader once, early in the document (or beforeInteractive in Next.js). Replace YOUR_PROJECT_ID with the ID from the Transcodes Console .

<script
  type="module"
  src="https://cdn.transcodes.link/YOUR_PROJECT_ID/webworker.js"
></script>

After load, use the global transcodes API (e.g. transcodes.openAuthLoginModal, transcodes.token, transcodes.member). See API Reference.

TypeScript (optional)

Download transcodes.d.ts from Authentication Kit → Installation Guide in the Console, place it under types/, and add types to tsconfig.json include / typeRoots (same pattern as Quick Integration).

Method 2: npm SDK

Install the published package and call init once with an options object at the top of your client entry (no webworker.js script tag).

npm install @bigstrider/transcodes-sdk

import { init } from '@bigstrider/transcodes-sdk';
 
await init({ projectId: 'YOUR_PROJECT_ID' });
// Optional: await init({ projectId: 'YOUR_PROJECT_ID', customUserId: 'uid_xxx', debug: true });

Then use named exports (openAuthLoginModal, getCurrentMember, on, …)—not window.transcodes. Full comparison: Quick Integration — Two Ways to Integrate.

Getting snippets from the Console

1. Open Transcodes Console  → your project → Authentication Kit Cluster.
2. Click the Installation Guide (document) icon to open the side panel.
3. Copy Project ID, the HTML script snippet, or Download TypeScript definitions as needed.

Next Steps

• Configuration — domains, RP ID, tokens
• Quick Integration — React, Next.js, Vue, Vanilla
• Branding — auth UI