Skip to main content

SPA Quickstart React Vite

Doc type: Tutorial

Goal and expected outcome​

Your SPA uses a backend-for-frontend (BFF) endpoint to read the shared HttpOnly cookies and returns a minimal session payload to the browser.

Prerequisites and setup​

  • Your SPA is hosted on a subdomain of *.yoyogroup.com.
  • You can deploy a small server endpoint on the same origin as your SPA.
  • You can reach the hosted auth portal at https://auth.yoyogroup.com.

Step 1: Redirect unauthenticated users to hosted auth​

On app load (or after a 401), redirect users to the hosted auth portal with a return URL.

const redirectUrl = encodeURIComponent(window.location.href);
window.location.assign(`https://auth.yoyogroup.com/?redirectUrl=${redirectUrl}`);

Step 2: Add a BFF session endpoint​

Create a backend endpoint on the same origin as your SPA that reads the shared cookies and returns a minimal session payload.

import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const accessToken = request.cookies.get('yoyo_auth_access_token')?.value;
  if (!accessToken) {
    return NextResponse.json({ hasSession: false }, { status: 401 });
  }

  return NextResponse.json({
    hasSession: true,
    accessToken
  });
}

Step 3: Bootstrap the SPA session​

Call your BFF endpoint from the client and redirect on a 401.

const response = await fetch('/api/bff/session', { credentials: 'include' });
if (response.status === 401) {
  const redirectUrl = encodeURIComponent(window.location.href);
  window.location.assign(`https://auth.yoyogroup.com/?redirectUrl=${redirectUrl}`);
}

Verify the result​

  • Confirm the BFF endpoint returns hasSession: true after login.
  • Confirm the app can call protected APIs with the access token.

SPAs on localhost or non-Yoyo domains​

If your SPA is running on localhost or on a domain that is not under *.yoyogroup.com, shared cookies will not be available in the browser. In that case:

  • Use the OAuth 2.0 Authorization Code + PKCE flow instead of shared cookies.
  • Follow the Local Development Quickstart and OAuth 2.0 Authentication to:
    • Register a client_id and exact redirect_uri.
    • Initiate the /api/oauth/authorize flow with PKCE.
    • Exchange the authorization code for tokens at /api/oauth/token.

The examples/yoyo-auth-spa-example project demonstrates this OAuth2 PKCE pattern end to end.

Example implementations​

For complete working examples, see: