如何连接Firebase Auth和Google One Tap Login

Question

I have created a web app with Firebase and React.js and implemented sign-in with Google. I then tried to implement GoogleOneTapSignin and the one-tap-sign-in UI is working successfully because I used the react-google-one-tap-login npm package. If may react app I have a function that listens for AuthStateChange and then either registers the user if they are new or sign in them if they are already a member and also updates the state if they logged. out. Now that I have implemented google-one-tap-login, I was expecting the onAuthSTaetChanged function to be triggered if a user signs in using the google-one-tap-login but it is not the case. Below is the part of my App.js code that handles the user auth.

 const classes = useStyles(); const dispatch = useDispatch(); const alert = useSelector(state => state.notification.alert); // Handling Google-one-tap-signin useGoogleOneTapLogin({ onError: error => console.log(error), onSuccess: response => { console.log(response); const credential = provider.credential(response); auth.signInWithCredential(credential).then(result => { const { user } = result; console.log(user); }); }, googleAccountConfigs: { client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' } }); //Handling firebase authentification useEffect(() => { const unsubscribe = auth.onAuthStateChanged(async user => { // If there is a user create the user profile and update useState if (user) { // createUserProfile function creates the user profile in firestore if they are new const userRef = await createUserProfileDocument(user); userRef.onSnapshot(snapshot => { const doc = snapshot.data(); dispatch( setUser({ id: snapshot.id, ...doc }) ); }); } else { dispatch(setUser(null)); } }); return () => { unsubscribe(); }; }, [dispatch]);

I tried to implement the solution suggested by the 2nd answer in this StackOverflow question but I get the error below on the console. when I use google-one-tap-sign-in. Remember I am not using the FirebaseUi library. So far my application only uses the sign in with Google

 t { code: "auth/argument-error", message: "credential failed: must provide the ID token and/or the access token.", a: null } a: null code: "auth/argument-error" message: "credential failed: must provide the ID token and/or the access token."

Answer 1

The ID token required by Firebase's signInWithCredential function exists within the credential property of the response object. Here is a sample function below using Firebase V8.

// firebase V8
function handleCredentialResponse(response) {
  if (response) {
    const cred = auth.GoogleAuthProvider.credential(response.credential);

    // Sign in with credential from the Google user.
    return auth().signInWithCredential(cred);
  }
}

Firebase v9

// firebase V9
import { getAuth, GoogleAuthProvider, signInWithCredential } from "firebase/auth";

const auth = getAuth();

function handleCredentialResponse(response) {
  if (response) {
    const cred = GoogleAuthProvider.credential(response.credential)

    // Sign in with credential from the Google user.
    return signInWithCredential(auth, cred);
  }
}

The response param is a credential response returned from the Google one-tap function callback.

 google?.accounts.id.initialize({
    client_id: your-google-app-client-id.apps.googleusercontent.com,
    callback: handleCredentialResponse,
 });
 google?.accounts.id.prompt((notification) => {
    console.log(notification);
 });