OAuth Login Flow with Vite

This article illustrates an implementation of an OAuth login flow using Vite as a JavaScript frontend. It highlights a server-side solution required to securely persist the session cookie when working with a pure client-side framework like Vite.

The example uses Google as the login provider and Passport to handle authentication.

Below is a snapshot of the core components involved in the OAuth flow and how responsibilities are split between them.

Although the OAuth flow above is well known, I discovered a practical limitation when using Vite.

Because a Vite application is a static frontend that runs entirely in the browser, it cannot handle a JWT server-side or create an HTTP-only session cookie. Establishing a secure session therefore requires a server that can receive the token and set the cookie in the HTTP response.

To handle this, I currently use a thin Express service that receives the JWT and sets it as a secure cookie before redirecting the user back to the Vite application.

The essential requirement is the domain: the server that sets the cookie must share the same parent domain as the Vite host. For example, a service running on auth.reactedge.net can set a cookie for .reactedge.net, which will then be sent automatically to wpdemo.reactedge.net.

The GitHub repository contains the flow illustrated here:

https://github.com/digitalrisedorset/bookme

The oauth-express folder implements the Google OAuth strategy. After successful authentication, it creates a JWT and synchronises the user with the backend.

The auth-bridge is the thin Express service that receives this JWT, sets it as a secure HTTP-only cookie for the browser, and then redirects the user back to the Vite frontend. This allows the session to persist without exposing the token to client-side code.