Open tarangshah19 opened 8 months ago
You probably need an access token. Which is in the data
on onResolve
I managed to get this (google with this lib) working without any issues.
@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
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.
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.
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); }}