GoogleLogin button is not responsive

[nachodeh]

It's currently not possible to make the button take up 100% of the available width. It does initially when rendering but immediately updates to some smaller size. This makes it very hard to make the button fit into any website's style.

[vasanthmn1]

Use Custom Google Button

import { useGoogleLogin } from '@react-oauth/google';

const login = useGoogleLogin({
  onSuccess: tokenResponse => console.log(tokenResponse),
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;

[nachodeh]

Use Custom Google Button

import { useGoogleLogin } from '@react-oauth/google';

const login = useGoogleLogin({
  onSuccess: tokenResponse => console.log(tokenResponse),
});

<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;

Thanks, but this doesn't really work because useGoogleLogin provides a tokenResponse and I need a credentialResponse for my API

[Nicolasbort]

@nachodeh Have you found a solution so far?

[nachodeh]

@Nicolasbort yeah, I stopped using this button, created my own, and implemented token retrieval in my own API. In the end it's much better this way and gives me more flexibility.

[Nicolasbort]

@nachodeh that's a good idea, thanks for the reply.

[nickcan]

Why does useGoogleLogin return an access token instead of a user credential like the GoogleLogin component does?

Thanks btw! I did get it working. It just feels odd because now I need to change the backend implementation simply because the button won't fill the width of the container.

[ciccilleju]

having the same issue.

[divya-nsh]

Why does useGoogleLogin return an access token instead of a user credential like the GoogleLogin component does?

Thanks btw! I did get it working. It just feels odd because now I need to change the backend implementation simply because the button won't fill the width of the container.

I have Same question

[NuraiymMamatova]

It helped me

   const login = useGoogleLogin({
           onSuccess: async tokenResponse => {
               const token = tokenResponse.access_token;
             // fetching userinfo can be done on the client or the server
             console.log(token);
             const userInfo = await axios
               .get('https://www.googleapis.com/oauth2/v3/userinfo', 
                 { headers: { Authorization: `Bearer ${tokenResponse.access_token}` },
               })
             const result = userInfo.data;
             console.log(result);
            // contains name, email & googleId(sub)
           },
         });

<MyCustomButton onClick={login}>Sign in with Google 🚀</MyCustomButton>;

source: https://stackoverflow.com/questions/75590977/get-token-and-google-id-in-react-oauth-google

[yashpatil02121]

Front End

import { useGoogleLogin } from "@react-oauth/google";

const googleLogin = useGoogleLogin({
  onSuccess: async (tokenResponse) => {

    // Send access token to your backend for verification
    const response = await apiClient.post("/auth/google", {
      accessToken: tokenResponse.access_token,
    });

    // Handle your authentication flow
    if (response.success) {
      // Store tokens, update state, etc.
    }
  },
  onError: () => {
    console.error("Google login failed");
  },
});

// Custom button with full styling control
<button
  onClick={() => googleLogin()}
  className="w-full bg-white text-gray-700 py-4 px-6 rounded-2xl font-medium border hover:bg-gray-50 flex items-center justify-center gap-3"
>
  <GoogleLogoSVG />
  <span>Continue with Google</span>
</button>

Back End

app.post("/auth/google", async (request, reply) => {
  const { accessToken: googleAccessToken } = request.body;

  // Verify token by fetching user info from Google
  const response = await fetch(
    "https://www.googleapis.com/oauth2/v3/userinfo",
    {
      headers: { Authorization: `Bearer ${googleAccessToken}` },
    }
  );

  if (!response.ok) {
    return reply.code(400).send({ 
      success: false, 
      message: "Invalid Google access token" 
    });
  }

  const payload = await response.json();
  // payload contains: email, name, picture, sub (Google ID)

  // Create/login user and return your JWT tokens
  const user = await findOrCreateUser(payload);
  const accessToken = generateJWT(user);
  
  return reply.send({ success: true, accessToken, user });
});