How to Connect Firebase Auth with 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);
 });