A purchase intent has to survive a round trip through Google, so ours rides in a query parameter that deletes itself on arrival
On Munchable the pricing table sits on the homepage, which means the person clicking "Get Premium" is usually signed out. Checkout needs an account. Sign in is Google OAuth, which is a full page navigation to another origin and a redirect back. So between the click and the Stripe page there is a trip through a domain we do not control, and the user's intent has to be waiting for them when they…
Munchable's pricing table appears on the homepage, prompting users to click "Get Premium," who are typically not signed in. The checkout process necessitates an account, which can only be established through Google OAuth sign-in—a full-page navigation to a different domain. Consequently, there exists a gap between the user's click and their redirection to the Stripe payment page.
The user's intent must persist throughout this process; otherwise, the button would merely redirect them to a sign-in form and abandon them there, creating an expensive bug for the pricing page. Utilizing a single unpretentious browser API, the mechanism consists of approximately twenty lines of code.
The intent is implemented as a query parameter. When a signed-out user clicks "Get Premium," the following code snippet is executed:
`const { error } = await signIn(google, '?checkout=1');`
The return path is handed over to the provider and is validated upon arrival back at the callback route. If the code is valid, the user is redirected to a specified relative path using `safeReturnPath`. This parameter has to withstand the navigation to another origin and return through a redirect chain. The URL, being the only state preserved across redirects, serves this purpose.
Additionally, this URL is visible, enabling support emails to reference the exact link and allowing the reporter to recreate the state by typing it into the browser.
The `safeReturnPath` function accepts a same-origin relative path and nothing else to prevent open redirects. An account is created implicitly upon the user's first Google sign-in, obviating the need for a separate signup page. The system depends on the `ready` and `user` states, which change multiple times during a regular load.
To avoid a race condition, the effect must execute before `goToCheckout()`, as it modifies the window.location.href. The parameter is retrieved from the window.location object, not the useSearchParams hook, ensuring the code functions correctly within a React development environment without generating server-rendered discrepancies.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
