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.58k stars 1.06k forks source link

The current environment does not support the specified persistence type. (auth/unsupported-persistence-type) #976

Open sushantdhiman opened 2 years ago

sushantdhiman commented 2 years ago

Describe your environment

Describe the problem

The following error is thrown when using Persistence.NONE and trying to create an auth instance on a browser which has its cookies disabled.

Uncaught (in promise) FirebaseError: Firebase: The current environment does not support the specified persistence type. (auth/unsupported-persistence-type).
    FirebaseError index.esm2017.js:791
    create index.esm2017.js:819
    createErrorInternal index-4dc22a28.js:474
    _assert index-4dc22a28.js:480
    _validatePersistenceArgument index.esm2017.js:201
    setPersistence index.esm2017.js:749
    Cn esm.js:347
    Login index.tsx:76

I believe the root cause behind this is the following code.

https://github.com/firebase/firebaseui-web/blob/51c8f7a4397f9e504460937cb950bbc282c7bf4e/javascript/widgets/authui.js#L144-L148

As you can see, this code tries to set Persistence.SESSION even when I have previously set Persistence.NONE in my firebase/auth instance.

Steps to reproduce:

  1. Set browser to reject cookies for your Firebase based application address, for example localhost:3001 in my case.
  2. Try to open page which is creating firebase instance, something like this (react code). Main idea is to set auth to Persistence.NONE and then try to create firebaseui auth instance.
  export default function Login() {
    const [ready, setReady] = useState(false);
    const elementRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      auth.setPersistence(firebase.auth.Auth.Persistence.NONE).then(() => {
        firebaseui.auth.AuthUI.prototype.
        setReady(true);
      });
    }, []);

    useEffect(() => {
      if (!ready) return;

      const widget =
        firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);

      if (elementRef.current) {
        widget.start(elementRef.current, uiConfig);
      }

      return () => {
        widget.reset();
      };
    }, [ready, elementRef]);

   // code
   return (
      <div ref={elementRef} />
    );
}

How to fix:

I believe this.tempAuth_.setPersistence should be using persistence information from firebase.auth instance passed to it.

umrashrf commented 8 months ago

Just ran into it.

I am trying to use LOCAL persistence in an Expo React Native app (riamuapp.com).

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
  .then(() => {
      firebase
          .auth()
          .signInWithEmailAndPassword(email, password)
          .then(() => {
              // success
          })
          .catch(error => {
              setError({ title: 'Wrong Password', message: error.message });
          });
  })
  .catch((error) => {
      setError({ title: error.code, message: error.message });
  });
artemis-prime commented 8 months ago

Same issue in a Nextjs 14.1 app using your exact code in the readme. Didn't do anything special to set persists and cookies are not disabled.