Upgraded to React 18, updated dependencies, fixed "AuthUI instance is deleted" error

[gvillenave]

• Updated peer dependency to support React 18
• Updated all dependencies (Babel, Webpack, ...)
• Replaced React class component with function component
• Updated component lifecycle management from componentWillMount/componentWillUnmount to a useEffect hook
• Fixed #172
• Switched from using a hardcoded element ID to a React ref with useRef
• Updated example app accordingly
• Switched example app from using extract-text-webpack-plugin (now deprecated) to mini-css-extract-plugin and postcss
• Updated README
• Bumped package version to 7.0.0

[chuhancheng]

Hi, is it ready to be merged?

[modsushi]

When is it getting merged?

[gvillenave]

@jhuleatt can you review and merge?

[cuongnvn]

Hi all. I need this PR merged right now. Thank you

[aamancio]

Hey when is this fix getting merged?

[gvillenave]

@jhuleatt any feedback on the PR? Can we get this merged soon?

[zettry1]

waiting for merge

[paviln]

waiting for merge +1

[MaurizioTonelli]

waiting for merge +2

[YGKtech]

I too would greatly appreciate this getting merged

[MartinXPN]

React solution

Based on this PR, if anyone is using React (create-react-app and not Next.js or other) and is looking for a way of solving this issue, you can get rid of firebaseui-web-react and just use firebaseui. These are the steps to do that:

• Remove react-firebaseui (yarn remove react-firebaseui)
• Add firebaseui (yarn add firebaseui)
• Copy the below code as StyledFirebaseAuth.tsx

import { useEffect, useRef, useState } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

interface Props {
    // The Firebase UI Web UI Config object.
    // See: https://github.com/firebase/firebaseui-web#configuration
    uiConfig: firebaseui.auth.Config;
    // Callback that will be passed the FirebaseUi instance before it is
    // started. This allows access to certain configuration options such as
    // disableAutoSignIn().
    uiCallback?(ui: firebaseui.auth.AuthUI): void;
    // The Firebase App auth instance to use.
    firebaseAuth: any; // As firebaseui-web
    className?: string;
}


const StyledFirebaseAuth = ({uiConfig, firebaseAuth, className, uiCallback}: Props) => {
    const [userSignedIn, setUserSignedIn] = useState(false);
    const elementRef = useRef(null);

    useEffect(() => {
        // Get or Create a firebaseUI instance.
        const firebaseUiWidget = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebaseAuth);
        if (uiConfig.signInFlow === 'popup')
            firebaseUiWidget.reset();

        // We track the auth state to reset firebaseUi if the user signs out.
        const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, (user) => {
            if (!user && userSignedIn)
                firebaseUiWidget.reset();
            setUserSignedIn(!!user);
        });

        // Trigger the callback if any was set.
        if (uiCallback)
            uiCallback(firebaseUiWidget);

        // Render the firebaseUi Widget.
        // @ts-ignore
        firebaseUiWidget.start(elementRef.current, uiConfig);

        return () => {
            unregisterAuthObserver();
            firebaseUiWidget.reset();
        };
    }, [firebaseui, uiConfig]);

    return <div className={className} ref={elementRef} />;
};

export default StyledFirebaseAuth;

That's it! You can use this component without the need for this library. If you need FirebaseAuth instead of the StyledFirebaseAuth, you can just remove the import 'firebaseui/dist/firebaseui.css'; line from the component and you'll be good to go!

I just did this for my personal project and reduced the main bundle size by ~9KB.

[Skyblueballykid]

waiting for merge +3

[lewis-cobry]

me too!

[frontcodelover]

Please merge it :)

[th-m]

merge 🙏

[IAmKio]

Pretty please with chocolate sprinkles on top? 🙏

[Skyblueballykid]

Give me permission and I'll merge it. This project feels unmaintained.

[xhonorate]

waiting for merge +999

[gbourne1]

@jhuleatt

Can this be merged?

[wiktor-cobry]

Please merge this; no reason not to.

[juliankleine]

Let's go! @jhuleatt Would be really nice if you would find the time, thanks!

[juliankleine]

@jhuleatt If you can't find the time is it possible to dispatch the review to a different maintainer of this project? I think a lot of people would love to see this PR being merged. Thanks for your time!

[fsalcedo55]

Has anyone found a way of solving this using Next.js?

[rubencarv]

Please merge 🙏

[karkir0003]

@jhuleatt and @Skyblueballykid , this merge is important for my team's project! Please be a kind soul and help us unblock. At least, by when should this PR get merged in?

[MartinXPN]

Next.js solution

For anyone looking for a solution for Next.js, you can use the following code and completely get rid of this library:

• Remove react-firebaseui (yarn remove react-firebaseui)
• Add firebaseui (yarn add firebaseui)
• Copy the below code as StyledFirebaseAuth.tsx

import { useEffect, useRef, useState } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import 'firebaseui/dist/firebaseui.css';
import {auth} from "firebaseui";

interface Props {
    // The Firebase UI Web UI Config object.
    // See: https://github.com/firebase/firebaseui-web#configuration
    uiConfig: auth.Config;
    // Callback that will be passed the FirebaseUi instance before it is
    // started. This allows access to certain configuration options such as
    // disableAutoSignIn().
    uiCallback?(ui: auth.AuthUI): void;
    // The Firebase App auth instance to use.
    firebaseAuth: any; // As firebaseui-web
    className?: string;
}


const StyledFirebaseAuth = ({uiConfig, firebaseAuth, className, uiCallback}: Props) => {
    const [firebaseui, setFirebaseui] = useState<typeof import('firebaseui') | null>(null);
    const [userSignedIn, setUserSignedIn] = useState(false);
    const elementRef = useRef(null);

    useEffect(() => {
        // Firebase UI only works on the Client. So we're loading the package only after
        // the component has mounted, so that this works when doing server-side rendering.
        setFirebaseui(require('firebaseui'));
    }, []);


    useEffect(() => {
        if (firebaseui === null )
            return;

        // Get or Create a firebaseUI instance.
        const firebaseUiWidget = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebaseAuth);
        if (uiConfig.signInFlow === 'popup')
            firebaseUiWidget.reset();

        // We track the auth state to reset firebaseUi if the user signs out.
        const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, user => {
            if (!user && userSignedIn)
                firebaseUiWidget.reset();
            setUserSignedIn(!!user);
        });

        // Trigger the callback if any was set.
        if (uiCallback)
            uiCallback(firebaseUiWidget);

        // Render the firebaseUi Widget.
        // @ts-ignore
        firebaseUiWidget.start(elementRef.current, uiConfig);

        return () => {
            unregisterAuthObserver();
            firebaseUiWidget.reset();
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [firebaseui, uiConfig]);

    return <div className={className} ref={elementRef} />;
};

export default StyledFirebaseAuth;

That's it! You can use this component without the need for this library. If you need FirebaseAuth instead of the StyledFirebaseAuth, you can just remove the import 'firebaseui/dist/firebaseui.css'; line from the component and you'll be good to go!

[LeandroLeon]

Waiting for merge 🙏

[michaelangeloio]

pls merge!

[gbourne1]

React solution

Based on this PR, if anyone is using React (create-react-app and not Next.js or other) and is looking for a way of solving this issue, you can get rid of firebaseui-web-react and just use firebaseui. These are the steps to do that:

• Remove react-firebaseui (yarn remove react-firebaseui)
• Add firebaseui (yarn add firebaseui)
• Copy the below code as StyledFirebaseAuth.tsx

import { useEffect, useRef, useState } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

interface Props {
    // The Firebase UI Web UI Config object.
    // See: https://github.com/firebase/firebaseui-web#configuration
    uiConfig: firebaseui.auth.Config;
    // Callback that will be passed the FirebaseUi instance before it is
    // started. This allows access to certain configuration options such as
    // disableAutoSignIn().
    uiCallback?(ui: firebaseui.auth.AuthUI): void;
    // The Firebase App auth instance to use.
    firebaseAuth: any; // As firebaseui-web
    className?: string;
}


const StyledFirebaseAuth = ({uiConfig, firebaseAuth, className, uiCallback}: Props) => {
    const [userSignedIn, setUserSignedIn] = useState(false);
    const elementRef = useRef(null);

    useEffect(() => {
        // Get or Create a firebaseUI instance.
        const firebaseUiWidget = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebaseAuth);
        if (uiConfig.signInFlow === 'popup')
            firebaseUiWidget.reset();

        // We track the auth state to reset firebaseUi if the user signs out.
        const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, (user) => {
            if (!user && userSignedIn)
                firebaseUiWidget.reset();
            setUserSignedIn(!!user);
        });

        // Trigger the callback if any was set.
        if (uiCallback)
            uiCallback(firebaseUiWidget);

        // Render the firebaseUi Widget.
        // @ts-ignore
        firebaseUiWidget.start(elementRef.current, uiConfig);

        return () => {
            unregisterAuthObserver();
            firebaseUiWidget.reset();
        };
    }, [firebaseui, uiConfig]);

    return <div className={className} ref={elementRef} />;
};

export default StyledFirebaseAuth;

That's it! You can use this component without the need for this library. If you need FirebaseAuth instead of the StyledFirebaseAuth, you can just remove the import 'firebaseui/dist/firebaseui.css'; line from the component and you'll be good to go!

I just did this for my personal project and reduced the main bundle size by ~9KB.

Perfect and worked like a charm! Thanks.

[Sp3ctreZero]

Hey guys come on! Many people are looking for this, it is as simple as merging it, just do it or give access to someone else that will actually maintain it.