Skip to Content
Documentation

Installation Guide

⚡ 2 min read

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

PWA (installable Web App Kit) needs webworker.js from HTML, plus manifest and sw.js. The npm SDK alone does not replace that path—follow Web App Installation Guide. This page covers Authentication-only (passkeys, step-up MFA, modals).

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.

Package and import names in the Dashboard may be shown as @bigstrider/transcodes-sdk. Source: transcodings/transcodes-sdk .

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.

Installation Guide panel

Next Steps

Last updated on
Introduction