Overview: How to Get Started

Create Your Organization

Go to Transcodes Dashboard  and sign in or create an account. As long as you create an account, you will be given an organizaiton automatically.

Create New Project

1. Click “Create New Project”
2. Enter project details:
   • Project Name *: A name to identify your project (required, max 100 characters)
   • Project Description: A brief description of your project (optional, max 200 characters)

Copy Project ID and Import CDN Script

After creation, copy your Project ID (e.g., proj_abc123xyz). You’ll need this to initialize the SDK.

Login, Console, and MFA Components

After CDN script is added, you can trigger the login, console, and mfa modals with one function call. For more detailed params, please visit Modal API page

// Trigger sign-in or registration modal with one function call
const result = await transcodes.openAuthLoginModal();

// Trigger account management modal with one function call
const result = await transcodes.openAuthModal();

// Trigger multi-factor authentication modal with one function call
const result = await transcodes.openAuthMfaModal();

Listen for Authentication State Changes

Once login is successful, you can listen for authentication state changes with the following event:

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

For more detailed events, please visit Events API page

Server-side Integration

If you need to integrate with your backend, you can get the user’s token from Transcodes:

Include the token in your API requests:

async function checkAuth() {
  // Check authentication status
  const isAuth = await transcodes.token.isAuthenticated();
 
  if (!isAuth) {
    console.log('Not authenticated');
    return null;
  }
 
  // Get access token for API calls
  const token = await transcodes.token.getAccessToken();
  console.log('Access token available:', !!token);
 
  return token;
}

const response = await fetch('/api/protected', {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});