firebase / firebaseui-web

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.
https://firebase.google.com/
Apache License 2.0
4.53k stars 1.04k forks source link

Unable to sign-in as cross-site cookies are blocked #1070

Open tommed opened 4 months ago

tommed commented 4 months ago

[REQUIRED] Describe your environment

[REQUIRED] Describe the problem

Related to this: https://goo.gle/3pcd-dev-issue

Steps to reproduce:

When attempting to sign-in via Google (though I suspect this will happen with any other provider), the redirect attempts to set cookies which are blocked, preventing the log-in process from working.

Relevant Code:

// init
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

import * as firebaseui from 'firebaseui';
import ssoCfg from './sso.config.json'

// initialise firebase first
  firebase.initializeApp(ssoCfg.firebase);

  // then configure the sso ui
  uiConfig = {
    signInSuccessUrl: import.meta.env.PROD ? `https://${ssoCfg.firebase.authDomain}/` : `http://localhost:8080/`,
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID
    ],
    credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO,
    callbacks: {
      signInSuccessWithAuthResult: function(authResult, redirectUrl) {
        console.log('CALLBACK:', JSON.stringify(authResult), redirectUrl)
        return true;
      }
    }
  };

  // Initialize the FirebaseUI Widget using Firebase.
  uiSingleton = new firebaseui.auth.AuthUI(firebase.auth());

then started like so:

uiSingleton.start(cssQuery, uiConfig);

Initial UI works:

image

but when clicked, you are signed in, redirected back to an error:

image

Set via: https://apis.google.com/js/api.js?onload=__iframefcb297111

image
Boardtale commented 4 months ago

Ugh, is this working at all for Safari or iOS browesers where third-party cookies are blocked completly? And firefox by default blocks them now?

jhuleatt commented 4 months ago

Here's a guide with best practices for using redirect sign-ins on browsers that block third-party cookies: https://firebase.google.com/docs/auth/web/redirect-best-practices. These should all work with FirebaseUI, but if they don't, please follow up in this issue.

Boardtale commented 4 months ago

Oh, so it's nothing new. I wonder if I could find it earlier somehow. But thanks! Currently change to popup, as it was kinda incident on my side. Just released the Firebase loging system instead the old one and people could nto log in via iOS. popup works for now, but if popups are blocked, gonna need to adjust, so thanks! :)