Google Login i need idToken

[tarangshah19]

Describe the bug
From Google Login i need idToken but not able to get how can i get that?

<LoginSocialGoogle
client_id="373861975505-853d8bvtichuiltu546rhsrrjlq3al15.apps.googleusercontent.com"
typeResponse="idToken"
scope="openid profile email"
ux_mode="popup"
onResolve={({ provider, data }) => {
const login = 'Google';
auth.login({ provider, data, login }, () => {});
}}
onReject={err => {
// eslint-disable-next-line no-console
console.log(err);
}}
>
<Button
variant="contained"
startIcon={}
className="mb-2 socialBTN"
id="Google"
>
Login with Google

[marko-birdbuddy]

You probably need an access token. Which is in the data on onResolve

[marko-birdbuddy]

I managed to get this (google with this lib) working without any issues.

[occultus73]

@marko-birdbuddy Could you explain more about how you got this to work, I believe I'm having the same problem.

Frontend

import {loginApi, loginGoogleApi} from "../api/apiAuth";
import {getAnonymousKey, loginUser} from "../userAuth";
import {LoginSocialGoogle} from "reactjs-social-login";
import {GoogleLoginButton} from "react-social-login-buttons";

const responseGoogle = async (response) => {
    if (!response['access_token']) {
        alert('Unknown Google authentication error - try again or try alternative login.');
        console.log(response);
        return
    }
    try {
        const ret = await loginGoogleApi(response);
        loginUser(ret.data);
        window.location = '/';
    } catch (e) {
        setSuccess("Log in Failed!");
        console.log(e);
    }
}

return (
    <LoginSocialGoogle
        client_id="my-client-id.apps.googleusercontent.com"
        onResolve={({ provider, data }) => {
            console.log(provider);
            console.log(data);
            void responseGoogle(data);
        }}
        onReject={err => {
            console.log(err);
        }}
    >
        <GoogleLoginButton />
    </LoginSocialGoogle>

Backend

from google.auth.transport import requests
from google.oauth2 import id_token

@api_auth.route('/loginGoogle', methods=['POST'])
def login_google():
    data = request.get_json()

    try:
        id_info = id_token.verify_oauth2_token(data['access_token'], requests.Request(), GOOGLE_CLIENT_ID)
        email = id_info['email']

The above doesn't work, as OP said, I think you need the "id_token" and there's suppose to be some way of deriving one from the other.

More broadly though, is it a good idea to use google.oauth2 with this library, or is there a better solution for backend verification of tokens for most login providers just like reactjs-social-login? I tried asking this question on StackOverflow twice, and both times the moderators blocked it because that would invite an "opinionated response". sigh

[occultus73]

Okay, I looked at the source code and saw that you can explicitly set a "typeResponse" to equal "idToken" where the default would otherwise be "accessToken". So this:

<LoginSocialGoogle
    client_id="my-client-id.apps.googleusercontent.com"
    onResolve={({ provider, data }) => {
        console.log(provider);
        console.log(data);
        void responseGoogle(data);
    }}
    onReject={err => {
        console.log(err);
    }}
    typeResponse="idToken"
>
    <GoogleLoginButton />
</LoginSocialGoogle>                   

...works fine - where data has the field "credential" instead of "access_token" - just like with @react-oauth/google.

[piotr-ponikowski-source]

Is this solution still working? I am receiving below error when trying to display login popup, using OP example.

[GSI_LOGGER]: FedCM get() rejects with AbortError: signal is aborted without reason

After removing typeResponse="idToken" popup opens and I can login, but I end with accessToken instead idToken.