Overview

⚡ 12 min read

Integrate sign-in and step-up MFA: create a project in the Console, load the SDK via CDN, redirect to Transcodes Auth, and verify JWTs on your backend.

Client-side only. The Transcodes SDK runs in the browser only. Do not import or call it from SSR or React Server Components. In Next.js, add 'use client' to any file that uses the SDK.

Console: organization and project

Open the Transcodes Console . Creating an account creates an organization (your workspace).

Create a project

Click Create New Project
Enter a project name (required, up to 100 characters) and optional description (up to 200 characters)

Copy your Project ID

After creation, copy the Project ID (e.g. proj_abc123xyz). Use it in the CDN script URL and in VITE_TRANSCODES_PROJECT_ID / NEXT_PUBLIC_TRANSCODES_PROJECT_ID.

Organization = company/workspace (billing, members). Project = one app or site. Always use the Project ID in SDK code—not an organization ID.

Load the SDK (CDN)

Add webworker.js from Console Installation Guide:


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

Use transcodes.* after the script loads. transcodes.token.getCurrentMember() returns the signed-in member; transcodes.member.get() for lookups (e.g. by email).

Quick Start Guides

Signin Step-up MFA

Choose Your Framework

React Next.js Vue.js Vanilla JS

Framework Comparison

Framework	Build Tool	TypeScript	SSR	Load SDK	State Management
React	Vite	Yes	No	CDN script in HTML	Context API
Next.js	Next.js	Yes	Yes	`next/script` CDN	Context API
Vue.js	Vite	Yes	No	CDN script in HTML	Composables / Pinia
Vanilla JS	—	No	No	CDN script in HTML	Module / inline

Universal Setup

Add the CDN script from Console, then follow the steps below.

1. Load the SDK

Script in HTML (Vite / Vue):

index.html


<script
  src="https://cdn.transcodes.link/%VITE_TRANSCODES_PROJECT_ID%/webworker.js"
  defer
></script>

2. Set Environment Variables

Vite (React, Vue, Vanilla):

.env


VITE_TRANSCODES_PROJECT_ID=proj_abc123xyz

Next.js:

.env.local


NEXT_PUBLIC_TRANSCODES_PROJECT_ID=proj_abc123xyz


transcodes.redirectToSignIn();
 
// On return page (or app bootstrap):
const result = await transcodes.handleSignInCallback();
if (result.success) {
  const { token, member } = result.payload[0];
  console.log('Logged in as:', member?.email);
}

4. Check Authentication Status

isAuthenticated() is an async method. Always use await


const isAuth = await transcodes.token.isAuthenticated();


const unsubscribe = transcodes.on('AUTH_STATE_CHANGED', (payload) => {
  console.log('Auth state:', payload.isAuthenticated);
});
unsubscribe();

6. Sign Out


await transcodes.token.signOut({ webhookNotification: false });

SDK API Overview


// Token
transcodes.token.getCurrentMember(): Promise<Member | null>
transcodes.token.getAccessToken(): Promise<string | null>
transcodes.token.hasToken(): boolean
transcodes.token.isAuthenticated(): Promise<boolean>  // async!
transcodes.token.signOut(options?: { webhookNotification?: boolean }): Promise<void>
 
// Member
transcodes.member.get(params): Promise<ApiResponse<Member[]>>
 
// Redirect auth
transcodes.redirectToSignIn(options?): void
transcodes.handleSignInCallback(): Promise<ApiResponse<AuthResult[]>>
transcodes.redirectToConsole(options?): void
transcodes.redirectToStepUp(options): Promise<ApiResponse<StepUpRedirectResult[]>>
transcodes.handleStepUpReturnPage(): void
 
// Events
transcodes.on(event, callback): () => void
transcodes.off(event, callback): void
 
// Audit
transcodes.trackUserAction(event, options?): Promise<void>

Available Events

Event	Description
`AUTH_STATE_CHANGED`	Authentication state changed (login/logout)
`TOKEN_REFRESHED`	Access token was automatically refreshed
`TOKEN_EXPIRED`	Token expired and cannot be refreshed
`ERROR`	SDK error occurred

TypeScript support

Download transcodes.d.ts from Console Project Setup, or:


curl -o transcodes.d.ts https://cdn.transcodes.link/types/transcodes.d.ts

Then point tsconfig.json at your types/ folder (see below).

tsconfig.json


{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"]
  },
  "include": ["src", "types"]
}

See each framework guide for full TypeScript setup

Common Patterns

Protected Route Pattern

All frameworks implement a similar protected route pattern:

Check isAuthenticated() (async)
If not authenticated, call redirectToSignIn() or show a sign-in button
On return, run handleSignInCallback()
If authenticated, render protected content

React/Next.js: <ProtectedRoute> component with useEffect Vue: <AuthGuard> component with watch Vanilla JS: init() function with async/await

Auth State Management

Framework	Pattern	File
React	Context + `use()` hook	`AuthContext.tsx`
Next.js	Context + `'use client'`	`AuthProvider.tsx`
Vue	Composable / Pinia	`useAuth.ts` / `auth.ts`
Vanilla JS	Class / Module	`auth.js`

Common Mistakes


// WRONG: isAuthenticated() is async
if (transcodes.token.isAuthenticated()) { ... }
 
// CORRECT
if (await transcodes.token.isAuthenticated()) { ... }


// WRONG
await transcodes.token.logout();
 
// CORRECT
await transcodes.token.signOut({ webhookNotification: false });

Troubleshooting

SDK Not Loading


// Check if SDK is loaded
if (typeof transcodes === 'undefined') {
  console.error('Transcodes SDK not loaded');
}

CORS Errors

Ensure your domain is added to the allowed list in the Transcodes Dashboard :

localhost:5173 (Vite dev server)
localhost:3000 (Next.js dev server)
yourdomain.com (production)

CSP (Content Security Policy)

At minimum, allow the CDN domain for the SDK script. The exact connect-src and frame-src API domains are available in your Transcodes Console → Authentication Cluster → Installation Guide.


<meta
  http-equiv="Content-Security-Policy"
  content="
  script-src 'self' https://cdn.transcodes.link;
  connect-src 'self' {TRANSCODES_API_DOMAINS};
  frame-src 'self' {TRANSCODES_API_DOMAINS};
"
/>

Replace {TRANSCODES_API_DOMAINS} with the domains listed in your Console.

Production checklist

Allow your domain in the Transcodes Console (Authentication Kit → Configuration)
HTTPS in production — WebAuthn needs a secure context
CSP — include cdn.transcodes.link and the Transcodes API domains as in CSP above

The SDK only runs on domains you authorize for the project.

Next steps

Signin - Step-by-step sign-in setup
Step-up MFA - Add MFA for sensitive actions
React Integration - Vite React SPA guide
Next.js Integration - Next.js 15 App Router guide
Vue Integration - Vite Vue 3 guide
Vanilla JS Integration - Pure JavaScript guide
API Reference - Full API documentation