1

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.

0 Answers0