Web SDK Authentication Flow

VLPlay Web SDK uses a popup-based OAuth 2.0 flow for user authentication. [PLACEHOLDER] When VLPlaySDK.auth.login() is called, the SDK opens a VLPlay login popup where the user can sign in with their VLPlay account, Google, or Facebook. On success, the SDK receives an access token, stores it in localStorage, and resolves the Promise with the user object.

[PLACEHOLDER] For games that prefer a redirect-based flow (e.g., single-page apps that cannot use popups), use VLPlaySDK.auth.loginWithRedirect() and handle the callback on page load with VLPlaySDK.auth.handleRedirectCallback().

Popup Login (Default)

import { VLPlaySDK } from '@vlplay/sdk';

async function handleLogin() {
  try {
    const result = await VLPlaySDK.auth.login();
    if (result.success) {
      console.log('Welcome,', result.user.displayName);
      console.log('User ID:', result.user.userId);
      console.log('Access Token:', result.token.accessToken);
    }
  } catch (error) {
    console.error('Login failed:', error);
  }
}

Redirect Login

// Step 1: Redirect user to VLPlay login page
await VLPlaySDK.auth.loginWithRedirect({
  redirectUri: 'https://your-game.com/callback',
});

// Step 2: On the callback page, handle the result
const result = await VLPlaySDK.auth.handleRedirectCallback();
if (result.success) {
  window.location.href = '/game'; // redirect to game
}

Check Auth State

// Check if user is already logged in (e.g., on page load)
const user = VLPlaySDK.auth.currentUser;
if (user) {
  console.log('Returning player:', user.displayName);
} else {
  // Show login button
}

Logout

await VLPlaySDK.auth.logout();
console.log('Logged out');

Auth Events

VLPlaySDK.auth.onAuthStateChanged((user) => {
  if (user) {
    updateGameUI(user);
  } else {
    showLoginScreen();
  }
});

For error codes related to authentication, see Error Codes.