Lab routing và authentication

npm install --save-exact react@19 react-dom@19 react-router@7 \
  --workspace=@shop/shell --workspace=@shop/catalog --workspace=@shop/cart

npm install --save-dev --save-exact @babel/core@7 @babel/preset-react@7 babel-loader@9 \
  --workspace=@shop/shell --workspace=@shop/catalog --workspace=@shop/cart

npm ls react react-dom react-router \
  --workspace=@shop/shell --workspace=@shop/catalog --workspace=@shop/cart

exposes: {
  './CatalogPage': './src/CatalogPage.jsx',
  './CatalogRoutes': './src/CatalogRoutes.jsx',
},

'react-router': {
  singleton: true,
  requiredVersion: dependencies['react-router'],
  strictVersion: true,
},

remotes: {
  catalog: 'shop_catalog@http://localhost:3001/remoteEntry.js',
  cart: 'shop_cart@http://localhost:3002/remoteEntry.js',
},

historyApiFallback: true,
proxy: [
  {
    context: ['/api'],
    target: 'http://127.0.0.1:4000',
  },
],

import { createServer } from 'node:http';
import { randomUUID } from 'node:crypto';

if (process.env.SHOP_LAB !== '1' || process.env.NODE_ENV === 'production') {
  throw new Error('Chỉ chạy fixture với SHOP_LAB=1 ngoài production');
}

const origin = 'http://localhost:3000';
const cookieName = 'shop_lab_session';
const sessions = new Map();
const users = {
  alice: { subject: 'alice', displayName: 'Alice', uiPermissions: ['cart.read'] },
  bob: { subject: 'bob', displayName: 'Bob', uiPermissions: ['cart.read'] },
};
const carts = {
  alice: [{ sku: 'ao-thun-den', quantity: 1 }],
  bob: [{ sku: 'tui-vai', quantity: 2 }],
};
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const sessionDelay = Math.max(0, Number(process.env.SESSION_DELAY_MS) || 0);
const cartDelay = Math.max(0, Number(process.env.CART_DELAY_MS) || 0);
const denyCart = process.env.DENY_CART === '1';

function sessionId(req) {
  return (req.headers.cookie ?? '').split(';')
    .map((part) => part.trim())
    .find((part) => part.startsWith(`${cookieName}=`))
    ?.slice(cookieName.length + 1);
}

function reply(res, status, data) {
  res.writeHead(status, {
    'Content-Type': 'application/json; charset=utf-8',
    'Cache-Control': 'no-store',
  });
  res.end(data === undefined ? undefined : JSON.stringify(data));
}

createServer(async (req, res) => {
  try {
    const path = new URL(req.url, 'http://127.0.0.1:4000').pathname;
    const id = sessionId(req);
    const user = sessions.get(id);

    // Mọi mutation của fixture chỉ nhận POST từ origin của shell.
    // Thiếu Origin hoặc Origin: null cũng bị từ chối.
    if (req.method !== 'GET' && req.headers.origin !== origin) {
      return reply(res, 403, { error: 'origin-rejected' });
    }

    if (req.method === 'GET' && path === '/api/session') {
      await delay(sessionDelay);
      const current = sessions.get(id);
      return current ? reply(res, 200, current) : reply(res, 401);
    }

    if (req.method === 'POST' && path === '/api/dev-login') {
      let body = '';
      for await (const chunk of req) {
        body += chunk;
        if (body.length > 1024) return reply(res, 413);
      }
      const fixture = JSON.parse(body).fixture;
      if (fixture !== 'alice' && fixture !== 'bob') return reply(res, 400);
      if (id) sessions.delete(id);
      const nextId = randomUUID();
      sessions.set(nextId, users[fixture]);
      res.setHeader('Set-Cookie',
        `${cookieName}=${nextId}; Path=/; HttpOnly; SameSite=Lax`);
      return reply(res, 204);
    }

    if (req.method === 'POST' && path === '/api/logout') {
      if (id) sessions.delete(id);
      res.setHeader('Set-Cookie',
        `${cookieName}=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0`);
      return reply(res, 204);
    }

    if (req.method === 'GET' && path === '/api/cart') {
      if (!user) return reply(res, 401);
      if (denyCart || !user.uiPermissions.includes('cart.read')) {
        return reply(res, 403);
      }
      // Cố ý giữ kết quả phiên cũ để tái hiện response đến muộn.
      const result = { items: carts[user.subject] };
      await delay(cartDelay);
      return reply(res, 200, result);
    }

    reply(res, 404, { error: 'not-found' });
  } catch {
    if (!res.headersSent) reply(res, 400, { error: 'invalid-request' });
    else res.end();
  }
}).listen(4000, '127.0.0.1', () => {
  console.log('Shop lab fixture: http://127.0.0.1:4000');
});

export class HttpError extends Error {
  constructor(status) {
    super(`HTTP ${status}`);
    this.status = status;
  }
}

async function request(path, options = {}) {
  const response = await fetch(path, {
    ...options,
    credentials: 'same-origin',
    cache: 'no-store',
  });
  if (!response.ok) throw new HttpError(response.status);
  return response;
}

async function getSession() {
  try {
    const response = await request('/api/session');
    const user = await response.json();
    if (typeof user?.subject !== 'string'
      || typeof user?.displayName !== 'string'
      || !Array.isArray(user?.uiPermissions)
      || !user.uiPermissions.every((value) => typeof value === 'string')) {
      throw new Error('Session response không đúng contract');
    }
    return Object.freeze({
      subject: user.subject,
      displayName: user.displayName,
      uiPermissions: Object.freeze([...user.uiPermissions]),
    });
  } catch (error) {
    if (error instanceof HttpError && error.status === 401) return null;
    throw error;
  }
}

export const authApi = {
  getSession,
  async devLogin(fixture) {
    await request('/api/dev-login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ fixture }),
    });
  },
  async logout() {
    await request('/api/logout', { method: 'POST' });
  },
};

export const cartApi = {
  async getCart(signal) {
    const response = await request('/api/cart', { signal });
    const cart = await response.json();
    if (!Array.isArray(cart?.items)
      || !cart.items.every((item) => typeof item?.sku === 'string'
        && Number.isInteger(item.quantity) && item.quantity > 0)) {
      throw new Error('Cart response không đúng contract');
    }
    return cart;
  },
};

export function createAuth(api) {
  let snapshot = Object.freeze({ status: 'checking', epoch: 0 });
  let pending = null;
  const listeners = new Set();

  function publish(next) {
    snapshot = Object.freeze(next);
    for (const listener of listeners) listener();
  }

  function confirmed(user) {
    publish(user
      ? { status: 'authenticated', epoch: snapshot.epoch, user }
      : { status: 'anonymous', epoch: snapshot.epoch });
  }

  function run(status, work, failureReason) {
    // Một operation auth tại một thời điểm trong runtime của tab này.
    if (pending) return pending;
    publish({ status, epoch: snapshot.epoch + 1 });
    pending = Promise.resolve()
      .then(work)
      .catch((error) => {
        publish({
          status: 'unavailable',
          epoch: snapshot.epoch,
          reason: failureReason ?? (error.status ? 'server' : 'network'),
        });
      })
      .finally(() => { pending = null; });
    return pending;
  }

  return {
    getSnapshot: () => snapshot,
    subscribe(listener) {
      listeners.add(listener);
      return () => { listeners.delete(listener); };
    },
    revalidate() {
      // Không phục hồi phiên sau một logout chưa được xác nhận.
      if (snapshot.status === 'signing-out'
        || snapshot.reason === 'logout-unconfirmed') return Promise.resolve();
      return run('checking', async () => confirmed(await api.getSession()));
    },
    devLogin(fixture) {
      if (snapshot.status !== 'anonymous') return Promise.resolve();
      return run('checking', async () => {
        await api.devLogin(fixture);
        confirmed(await api.getSession());
      });
    },
    logout() {
      return run('signing-out', async () => {
        await api.logout();
        confirmed(null);
      }, 'logout-unconfirmed');
    },
  };
}

import { matchPath } from 'react-router';

export function safeReturnTo(raw) {
  const fallback = '/catalog';
  if (typeof raw !== 'string' || !raw.startsWith('/')
    || raw.startsWith('//') || /[\\\u0000-\u0020\u007f]/.test(raw)) {
    return fallback;
  }
  try {
    const url = new URL(raw, window.location.origin);
    if (url.origin !== window.location.origin || url.username || url.password) {
      return fallback;
    }
    const allowed = ['/catalog', '/catalog/products/:productId', '/cart']
      .some((path) => matchPath({ path, end: true }, url.pathname));
    return allowed ? `${url.pathname}${url.search}${url.hash}` : fallback;
  } catch {
    return fallback;
  }
}

import React from 'react';
import { Navigate, useLocation } from 'react-router';
import { safeReturnTo } from './destinations';

export function SessionUnavailable({ session, auth }) {
  const logoutFailed = session.reason === 'logout-unconfirmed';
  return (
    <section role="alert">
      <p>{logoutFailed
        ? 'Chưa xác nhận được logout. Dữ liệu riêng tư đã bị khóa.'
        : 'Chưa xác nhận được session. Kiểm tra kết nối rồi thử lại.'}</p>
      <button onClick={() => void (logoutFailed ? auth.logout() : auth.revalidate())}>
        {logoutFailed ? 'Thử logout lại' : 'Thử lại'}
      </button>
    </section>
  );
}

export function RequireSession({ session, auth, children }) {
  const location = useLocation();
  if (session.status === 'checking' || session.status === 'signing-out') {
    return <p role="status">Đang xác nhận session…</p>;
  }
  if (session.status === 'unavailable') {
    return <SessionUnavailable session={session} auth={auth} />;
  }
  if (session.status === 'anonymous') {
    const destination = location.pathname + location.search + location.hash;
    return <Navigate replace to={`/login?returnTo=${encodeURIComponent(destination)}`} />;
  }
  if (!session.user.uiPermissions.includes('cart.read')) {
    return <p role="alert">Bạn không có quyền xem cart.</p>;
  }
  return children;
}

export function LoginPage({ session, auth }) {
  const location = useLocation();
  const destination = safeReturnTo(
    new URLSearchParams(location.search).get('returnTo'),
  );
  if (session.status === 'authenticated') {
    return <Navigate replace to={destination} />;
  }
  if (session.status === 'unavailable') {
    return <SessionUnavailable session={session} auth={auth} />;
  }
  if (session.status !== 'anonymous') {
    return <p role="status">Đang xác nhận session…</p>;
  }
  return (
    <section aria-labelledby="login-title">
      <h2 id="login-title">Đăng nhập lab</h2>
      <p>Chọn identity fixture; không nhập credential thật.</p>
      <button onClick={() => void auth.devLogin('alice')}>Login Alice</button>
      <button onClick={() => void auth.devLogin('bob')}>Login Bob</button>
    </section>
  );
}

import React, { Component, Suspense, lazy, useCallback, useSyncExternalStore } from 'react';
import { BrowserRouter, Link, Navigate, Route, Routes, useNavigate } from 'react-router';
import { LoginPage, RequireSession } from './AuthUI';

const CatalogRoutes = lazy(() => import('catalog/CatalogRoutes'));
const SessionCartPage = lazy(() => import('cart/SessionCartPage'));

class RemoteBoundary extends Component {
  state = { failed: false };
  static getDerivedStateFromError() { return { failed: true }; }
  render() {
    return this.state.failed
      ? <p role="alert">Không tải được frontend. Kiểm tra remote rồi reload trang.</p>
      : this.props.children;
  }
}

function RemoteSlot({ children }) {
  return (
    <RemoteBoundary>
      <Suspense fallback={<p role="status">Đang tải frontend…</p>}>
        {children}
      </Suspense>
    </RemoteBoundary>
  );
}

function ShopRoutes({ auth, api }) {
  const session = useSyncExternalStore(auth.subscribe, auth.getSnapshot);
  const navigate = useNavigate();
  const onSessionExpired = useCallback(() => { void auth.revalidate(); }, [auth]);

  async function logout() {
    await auth.logout();
    if (auth.getSnapshot().status === 'anonymous') {
      navigate('/catalog', { replace: true });
    }
  }

  return (
    <>
      <header>
        <h1>Shop shell</h1>
        <nav aria-label="Shop navigation">
          <Link to="/catalog">Catalog</Link>{' | '}
          <Link to="/cart">Giỏ hàng</Link>{' | '}
          <Link to="/login">Đăng nhập</Link>
        </nav>
        {session.status === 'authenticated' && (
          <p>
            {session.user.displayName}{' '}
            <button onClick={() => void logout()}>Logout</button>
          </p>
        )}
      </header>
      <main>
        <Routes>
          <Route path="/" element={<Navigate replace to="/catalog" />} />
          <Route path="/login" element={<LoginPage session={session} auth={auth} />} />
          <Route path="/catalog/*" element={
            <RemoteSlot><CatalogRoutes /></RemoteSlot>
          } />
          <Route path="/cart" element={
            <RequireSession session={session} auth={auth}>
              <RemoteSlot>
                <SessionCartPage
                  key={session.epoch}
                  session={session}
                  api={api}
                  onSessionExpired={onSessionExpired}
                />
              </RemoteSlot>
            </RequireSession>
          } />
          <Route path="*" element={<p>Không tìm thấy trang trong shop.</p>} />
        </Routes>
      </main>
    </>
  );
}

export default function App({ auth, api }) {
  return <BrowserRouter><ShopRoutes auth={auth} api={api} /></BrowserRouter>;
}

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { createAuth } from './auth';
import { authApi, cartApi } from './api';

const auth = createAuth(authApi);
const container = document.createElement('div');
container.id = 'root';
document.body.appendChild(container);

createRoot(container).render(<App auth={auth} api={cartApi} />);
void auth.revalidate();

import React from 'react';
import { Link, Route, Routes, useParams } from 'react-router';

const products = [
  { sku: 'ao-thun-den', name: 'Áo thun đen' },
  { sku: 'tui-vai', name: 'Túi vải' },
  { sku: 'binh-nuoc', name: 'Bình nước' },
];

function ProductList() {
  return (
    <section>
      <h2>Catalog</h2>
      <ul>
        {products.map((product) => (
          <li key={product.sku}>
            <Link to={`/catalog/products/${encodeURIComponent(product.sku)}`}>
              {product.name}
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}

function ProductDetail() {
  const { productId } = useParams();
  const product = products.find((item) => item.sku === productId);
  if (!product) return <p>Không tìm thấy sản phẩm này.</p>;
  return (
    <section>
      <h2>{product.name}</h2>
      <p id="details">SKU: {product.sku}</p>
      <Link to="/cart?step=delivery#summary">Đi tới giỏ hàng</Link>
    </section>
  );
}

export default function CatalogRoutes() {
  return (
    <Routes>
      <Route index element={<ProductList />} />
      <Route path="products/:productId" element={<ProductDetail />} />
      <Route path="*" element={<p>Không tìm thấy trang trong catalog.</p>} />
    </Routes>
  );
}

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router';
import CatalogRoutes from './CatalogRoutes';

const container = document.createElement('div');
document.body.appendChild(container);
createRoot(container).render(
  <BrowserRouter>
    <h1>Catalog standalone</h1>
    <Routes>
      <Route path="/" element={<Navigate replace to="/catalog" />} />
      <Route path="/catalog/*" element={<CatalogRoutes />} />
      <Route path="*" element={<p>Không tìm thấy trang.</p>} />
    </Routes>
  </BrowserRouter>,
);

import React, { useEffect, useState } from 'react';

export default function SessionCartPage({ session, api, onSessionExpired }) {
  const [view, setView] = useState({ status: 'loading' });
  const { epoch } = session;
  const subject = session.status === 'authenticated' ? session.user.subject : null;

  useEffect(() => {
    if (!subject) return;
    const controller = new AbortController();
    let active = true;
    setView({ status: 'loading' });

    void api.getCart(controller.signal).then((cart) => {
      if (active && !controller.signal.aborted) {
        setView({ status: 'ready', cart });
      }
    }).catch((error) => {
      if (!active || controller.signal.aborted) return;
      if (error.status === 401) {
        setView({ status: 'expired' });
        onSessionExpired();
      } else {
        setView({ status: error.status === 403 ? 'forbidden' : 'error' });
      }
    });

    return () => {
      active = false;
      controller.abort();
    };
  }, [api, subject, epoch, onSessionExpired]);

  if (!subject) return <p>Cart cần một session đã xác nhận.</p>;
  if (view.status === 'loading') return <p role="status">Đang tải cart…</p>;
  if (view.status === 'expired') return <p role="status">Session đã hết hiệu lực…</p>;
  if (view.status === 'forbidden') return <p role="alert">API từ chối quyền xem cart.</p>;
  if (view.status === 'error') return <p role="alert">Không tải được cart. Thử reload trang.</p>;
  return (
    <section aria-labelledby="cart-title">
      <h2 id="cart-title">Giỏ hàng của {session.user.displayName}</h2>
      <ul id="summary">
        {view.cart.items.map((item) => (
          <li key={item.sku}>{item.sku}: {item.quantity}</li>
        ))}
      </ul>
    </section>
  );
}

import('./bootstrap');

import React from 'react';
import { createRoot } from 'react-dom/client';
import SessionCartPage from './SessionCartPage';

const session = {
  status: 'authenticated', epoch: 1,
  user: { subject: 'alice', displayName: 'Alice fixture', uiPermissions: ['cart.read'] },
};
const api = {
  async getCart() { return { items: [{ sku: 'ao-thun-den', quantity: 1 }] }; },
};
const container = document.createElement('div');
document.body.appendChild(container);
createRoot(container).render(
  <>
    <h1>Cart standalone — dữ liệu giả</h1>
    <SessionCartPage session={session} api={api} onSessionExpired={() => {}} />
  </>,
);

SHOP_LAB=1 SESSION_DELAY_MS=1000 CART_DELAY_MS=3000 node lab/server.mjs

npm run dev:catalog

npm run dev:cart

npm run dev:shell

curl -i -H 'Accept: text/html' http://localhost:3000/catalog/products/ao-thun-den
curl -i http://localhost:3000/api/cart
curl -i http://localhost:3000/api/not-a-route
curl -i http://localhost:3000/missing.js

SHOP_LAB=1 DENY_CART=1 node lab/server.mjs

import { test, expect } from '@playwright/test';

test('login giữ deep link và reload giữ session', async ({ page }) => {
  await page.goto('/cart?step=delivery#summary');
  await expect(page.getByRole('heading', { name: 'Đăng nhập lab' })).toBeVisible();
  await page.getByRole('button', { name: 'Login Alice' }).click();
  await expect(page).toHaveURL(/\/cart\?step=delivery#summary$/);
  await expect(page.getByRole('heading', { name: 'Giỏ hàng của Alice' })).toBeVisible();

  const sessionRequest = page.waitForResponse((response) =>
    new URL(response.url()).pathname === '/api/session');
  await page.reload();
  expect((await sessionRequest).status()).toBe(200);
  await expect(page.getByRole('heading', { name: 'Giỏ hàng của Alice' })).toBeVisible();
});

test('không chấp nhận return URL ngoài app', async ({ page }) => {
  await page.goto('/login?returnTo=' + encodeURIComponent('//evil.example'));
  await page.getByRole('button', { name: 'Login Alice' }).click();
  await expect(page).toHaveURL('http://localhost:3000/catalog');
});

test('session 503 không bị xử lý thành anonymous', async ({ page }) => {
  await page.route('**/api/session', (route) => route.fulfill({
    status: 503,
    contentType: 'application/json',
    body: JSON.stringify({ error: 'unavailable' }),
  }));
  await page.goto('/cart');
  await expect(page.getByRole('button', { name: 'Thử lại', exact: true })).toBeVisible();
  await expect(page).toHaveURL('http://localhost:3000/cart');
  await expect(page.getByRole('heading', { name: 'Đăng nhập lab' })).toHaveCount(0);
});

npm install --save-dev --save-exact @playwright/test
npx playwright install chromium

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: { baseURL: 'http://localhost:3000', browserName: 'chromium' },
});

npx playwright test tests/routing-auth.spec.js
npm run build