Firebase SDK delay with signInWithCredential using Facebook and Google OAuth

[sonu-mamsys]

Operating System

Android 14, iOS 18

Environment (if applicable)

Chrome 128.0.6613.146

Firebase SDK Version

10.12.2

Firebase SDK Product(s)

Auth

Project Tooling

Ruby on Rails web app where I am using React for components inside javascript packs.

Detailed Problem Description

What you were trying to achieve: I am using Firebase SDK with Google and Facebook OAuth endpoints for social authentication. My goal is to authenticate users via Facebook OAuth and then log them in using Firebase.

What actually happened: After successful Facebook authentication, the user is redirected to my specified URI with an access token. However, the steps following this redirection take a significant amount of time, causing a noticeable delay in the login process.

Error messages or unexpected behavior: There are no error messages, but the delay in the login process is causing a poor user experience.

Relevant log snippets or console output: No specific error messages or console output indicating issues. Network latency has been ruled out as a cause.

Steps taken to troubleshoot:

Ensured there is no network latency issue.

Tried using signInWithPopup, but faced inconsistent behavior on mobile browsers.

Verified that all Firebase configurations are correct and added my domain as an authorized domain.

Current login flow:

Call Facebook OAuth endpoint with redirect URI.

After authentication, land on redirect URI with access token.

Generate credential using FacebookProvider.credential(access_token).

Log user in with Firebase signInWithCredential function.

Send idToken to backend to create a session.

Questions: What could be causing the logout delay here? Are there any alternative methods to reduce this delay?

Steps and code to reproduce issue

Steps to Reproduce:

Set up a Firebase project and configure Facebook as an authentication provider.

Implement the login flow using Facebook OAuth in your web or mobile application.

Call the Facebook OAuth endpoint with a redirect URI.

After Facebook authentication, the user will be redirected to your specified URI with an access token.

Use the access token to generate a credential using FacebookProvider.credential(access_token).

Log the user in with Firebase using the signInWithCredential function.

Send the idToken to your backend to create a session.

Observe the delay between the redirection to your URI and the completion of the login process.

useEffect(()=>{

  const handleAuthResponse = async () => {
    try {
        const params = new URLSearchParams(hash.substring(1));
        const accessToken = params.get('access_token');
        const state = params.get('state'); // Retrieve custom state parameter
        const decodedState = JSON.parse(decodeURIComponent(state));

        if(decodedState.loginType == 'facebook'){

          try {
            const credential = FirebaseService.FacebookAuthProvider.credential(accessToken);  
            const userCredential = await FirebaseService.signInWithCredential(FirebaseService.auth, credential);
            if(decodedState?.mode !== 'login' && !userCredential?.user?.email){
              showToast("We could not find an email address linked to your Facebook account, which is required to complete the signup process. Please register using an email address or select a different signup method to proceed.", "error", false);
              await FirebaseService.deleteFirebaseUser();
              StopSpinner();
              return;
            }

          } catch (error) {
            StopSpinner();
            console.error('Error signing in with Facebook:', error);
          }
        } else {

            try {
              // Use the access token to authenticate with Firebase
              const credential = FirebaseService.GoogleAuthProvider.credential(null, accessToken);
              const userCredential = await FirebaseService.signInWithCredential(FirebaseService.auth, credential);
              props.onUserSignIn(userCredential?.user,userCredential,"google",null,decodedState.mode || "login")
            } catch (error) {
                StopSpinner();
              };
            }

    } catch (error) {
      console.error('Error handling OAuth response:', error);
      StopSpinner();
    }
  };

if(FirebaseService.auth) handleAuthResponse()
},[FirebaseService.auth])

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

Possible relation to "Firebase auth with Facebook does not work on Android" https://github.com/firebase/firebase-js-sdk/issues/8435 ? That issue has a "popup closed by user" instead of a delay, however.