I'm coding an app that requires users to connect via Google. I have a frontend running on http://localhost:3000 and the backend running on http://localhost:8000. I have implemented One-Tap and the Sign-In Button as a component in the frontend like this:
/*
|--------------------------------------------------------------------------
| SIGN-IN WITH GOOGLE BUTTON
|--------------------------------------------------------------------------
*/
export const SignInWithGoogle = () => {
return (
<>
<div
id="g_id_onload"
data-client_id="205349973317-s5h03qvn3hlnjhoe52nu66aso811nlml.apps.googleusercontent.com"
data-context="use"
data-ux_mode="popup"
data-login_uri="https://65ab-80-14-235-204.ngrok-free.app/auth/webhook/google-sign-in"
data-itp_support="true"
/>
<div
class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="filled_black"
data-text="continue_with"
data-size="large"
data-logo_alignment="left"
/>
</>
);
};
As you can see I'm using ngrok to tunnel HTTP requests from Google to my local backend (dev env).
When I sign in with Google on the frontend (wether with the Button or with One-Tap), Google sends a POST request to the url specified in data-login_uri with the body as it should:
{
credential: string,
g_csrf_token: string
}
But without any Cookie header (g_csrf_token cookie is missing). So I can't verify the g_csrf_token in the body.
I verified the raw request sent by Google on the web interface of ngrok (http://127.0.0.1:4040) to check if Cookies were present in the headers of the request. No Cookies.