What problem does it solve? Connecting a Vite single-page app to Overlens login when the backend lives on a different origin is notoriously tricky: the OAuth callback succeeds but every API call returns 401 because the browser silently withholds the cross-origin session cookie. This Skill guides the full integration and resolves the cross-origin cookie, CORS, and redirect problems specific to this split architecture. ## Core Features & Use Cases - Split-origin architecture guidance: Decision tree and three deployment topologies (dev proxy, same parent domain, unrelated domains) with the exact cookie attributes each one requires. - Copy-paste Vite templates: auth-api.ts fetch wrapper with credentials and silent 401-refresh-retry, AuthContext, ProtectedRoute, and a vite.config.ts dev proxy that eliminates the cross-origin problem in development. - BFF split tweaks: The three changes needed on top of a standard OAuth BFF — redirecting the callback back to the SPA origin, CORS with credentials, and a GET /auth/me endpoint. - Use Case: A developer has a React app on localhost:5173 and a NestJS API on localhost:4000 and wants Overlens login; the Skill wires the login navigation, session cookies, and route protection end to end. ## Quick Start Ask the assistant to add Overlens login to your Vite SPA that talks to a separate backend, and it will set up the BFF handlers, dev proxy, and React auth components for you.
