Social login fails in Capacitor (both iOS & Android)

jahertor commented 2 years ago

[REQUIRED] Describe your environment

Operating System version: iOS 15.5, iPad OS 15.4.1, Android 12
Browser version: N/A
Firebase UI version: 6.0.1
Firebase SDK version: 9.8.4

[REQUIRED] Describe the problem

I'm trying to integrate Firebase UI in my app created with Capacitor. The email/password login works ok, but when I add the social logins the problems begins.

In every case I'm using ionic:// as scheme, as the documentation says so.

In iOS 15.5 (simulator), I can open the Google and Apple flow, but when it ends, it doesn't redirect to the app. The Safari browser ends in about:blank tab, and can't login.
In iPad OS 15.4.1 when tap some social button it says:

Firebase: This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled. (auth/operation-not-supported-in-this-environment).

But the documentation says that I have to use ionic:// or file:// as protocol.

In Android 12 when tap some social button it says:

Cannot read properties of undefined (reading 'digest')

I think this error is because I'm not using https protocol, but I can't regarding the documentation.

Everything is working in web.

Steps to reproduce:

Start a Capacitor app
Change the Android and iOS scheme to ionic://
Install Firebase and Firebase UI through npm
Setup the login screen with Firebase UI
Setup Google and Apple login in Firebase and the platforms itself
Configure Dynamic Links to accept the proper URLs
Click the social buttons to login with Google or Apple

Relevant Code:


const config: CapacitorConfig = {
  //...
  server: {
    androidScheme: 'ionic',
    iosScheme: 'ionic'
  }
};```

```javascript
this.ui.start('#firebaseui-auth-container', {
  signInFlow: 'redirect',
  signInOptions: [
    firebaseauth.GoogleAuthProvider.PROVIDER_ID,
    "apple.com",
    firebaseauth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
  callbacks: {
    signInSuccessWithAuthResult: (authResult, _) => {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      this.repo.storeUserId(authResult.user.uid);
      this.repo.storeUserEmail(authResult.user.email);
      this.redirectHome();
      return false;
    },
    uiShown: () => {
      // The widget is rendered.
      // Hide the loader.
      this.loading = false;
    }
  },
});```

CristinaEdgin commented 2 years ago

Delete it

jhuleatt commented 1 year ago

We're not familiar with Capacitor, but if you have an idea of how to fix this we'd welcome a PR.

ebadi commented 1 year ago

@jahertor Same problem here, did you happen to find a solution?

firebase / firebaseui-web