Migration Guide

// Manual configuration
const API_BASE_URL = 'https://api.example.com';
const API_KEY = 'your-api-key';
let accessToken = '';
let refreshToken = '';

// Manual token refresh logic
async function getValidToken() {
  // Complex token validation and refresh logic
  if (isTokenExpired(accessToken)) {
    const response = await fetch(`${API_BASE_URL}/auth/refresh-token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refresh_token: refreshToken })
    });
    const data = await response.json();
    accessToken = data.access_token;
    refreshToken = data.refresh_token;
  }
  return accessToken;
}

import { CommerceEngineSDK, BrowserTokenStorage } from '@commercengine/storefront-sdk';

// Simple, automated configuration
const client = new CommerceEngineSDK({
  baseUrl: 'https://api.example.com',
  apiKey: 'your-api-key',
  tokenStorage: new BrowserTokenStorage(),
  automaticTokenManagement: true // Default: true
});

// Token management is now automatic!

// Manual fetch with error handling
async function fetchProducts(limit: number, categoryId?: string) {
  try {
    const token = await getValidToken();
    const params = new URLSearchParams({ limit: limit.toString() });
    if (categoryId) params.append('category_id', categoryId);
    
    const response = await fetch(`${API_BASE_URL}/catalog/products?${params}`, {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    return { success: true, data };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Usage (no type safety)
const result = await fetchProducts(20, 'electronics');
if (result.success) {
  result.data.forEach((product: any) => { // ❌ Any type
    console.log(product.name);
  });
}

// Type-safe SDK call
const result = await client.catalog.listProducts({
  limit: 20,
  category_id: 'electronics'
});

if (result.success) {
  // ✅ Full type safety with IntelliSense
  result.data.forEach(product => {
    console.log(product.name); // TypeScript knows this is a string
    console.log(product.selling_price); // TypeScript knows this is a number
  });
} else {
  // ✅ Typed error handling
  console.error(result.error.message);
  console.error(result.error.code);
}

// Manual authentication flow
async function loginWithEmail(email: string) {
  try {
    // Step 1: Initiate login
    const loginResponse = await fetch(`${API_BASE_URL}/auth/login/email`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${await getValidToken()}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ 
        email, 
        register_if_not_exists: true 
      })
    });
    
    const loginData = await loginResponse.json();
    const otpToken = loginData.content.otp_token;
    
    // Step 2: Get OTP from user (UI logic)
    const otp = await getUserOTPInput();
    
    // Step 3: Verify OTP
    const verifyResponse = await fetch(`${API_BASE_URL}/auth/verify-otp`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${await getValidToken()}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        otp,
        otp_token: otpToken,
        otp_action: 'login'
      })
    });
    
    const verifyData = await verifyResponse.json();
    
    // Manual token storage
    accessToken = verifyData.content.access_token;
    refreshToken = verifyData.content.refresh_token;
    localStorage.setItem('access_token', accessToken);
    localStorage.setItem('refresh_token', refreshToken);
    
    return { success: true, user: verifyData.content.user };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Simplified authentication with automatic token management
async function loginWithEmail(email: string) {
  // Step 1: Initiate login
  const loginResult = await client.auth.loginWithEmail({
    email,
    register_if_not_exists: true
  });
  
  if (!loginResult.success) {
    return loginResult;
  }
  
  const otpToken = loginResult.data.otp_token;
  
  // Step 2: Get OTP from user (UI logic)
  const otp = await getUserOTPInput();
  
  // Step 3: Verify OTP
  const verifyResult = await client.auth.verifyOtp({
    otp,
    otp_token: otpToken,
    otp_action: 'login'
  });
  
  if (verifyResult.success) {
    // ✅ Tokens automatically stored and managed!
    return { success: true, user: verifyResult.data.user };
  }
  
  return verifyResult;
}