Firebaseui with reactfire in v9

[codercatdev]

Is there a way to still use reactfire and firebaseui? Even if we are just using the compat mode only for Firebaseui?

[codercatdev]

I know @jamesdaniels is hard at work with this update, and calls this out here firebase/firebaseui-web#877 (comment)

I am wondering if anyone has used it in this way yet?

[codercatdev]

Okay I have this working for the most part, still getting a weird Firestore error on login prior to refresh, but other than that it is working with reactfire, v9, and firebaseui (v9 aka 0.600.0 that @jamesdaniels put out on the next channel).

Here is my working example in codingcat.dev but I will try and make a smaller one soon for Firebase Summit demo.
https://github.com/CodingCatDev/codingcat.dev/blob/fef7cf221c2bb4fd7faeb3346c478cbd38a6582b/frontend/main/src/components/FirebaseAuth.tsx#L18

[mankinchi]

there is a react-firebaseui. Is there a reason you are not using it? I'm having some trouble setting it up and was hoping to learn a bit more about how to properly set it up

[codercatdev]

@mankinchi Yes currently the two repos are out of sync and it has become incredible difficult to get all the versions matched and agreeing. I know I have a PR out on both to try and line them up, but in the meantime this seemed to work really well.

[mankinchi]

how r u using reactfire in your file? I can't seem to find any reference to it. Does the getApp from firebase also read the reactfire app provider component?

[codercatdev]

reactfire just picks up on the fact a user has authenticated with the normal v9 firebase sdk. So for example once this login occurs it automatically is bucked up by the hook useSigninCheck
https://github.com/CodingCatDev/codingcat.dev/blob/cf8d9be771462fe24ae8fb640ba3d51ff571286e/frontend/main/src/pages/admin/%5Btype%5D.tsx#L25

[jhuleatt]

Here's an example of how to use Firebase v9 and ReactFire v4 normally throughout the rest of a web app, and only worry about the compat sdk in the component that sets up react-firebaseui's StyledFirebaseAuth:

import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import { useAuth } from "reactfire";

// compat SDK needed for FirebaseUI
import firebase from "firebase/compat/app";
import "firebase/compat/auth";

export function SignInForm() {
  // get the v9 auth instance normally using ReactFire
  const v9AuthInstance = useAuth();

  // convert the v9 auth instance into a v8 auth instance
  const v8AppInstance = firebase.initializeApp(v9AuthInstance.app.options);
  const v8AuthInstance = v8AppInstance.auth();

  const uiConfig = {
    // ... insert your react-firebaseui config here
  };

  return (
    <StyledFirebaseAuth firebaseAuth={v8AuthInstance} uiConfig={uiConfig} />
  );
}

This works with:

• firebase v9
• reactfire v4
• react-firebaseui v6

Note that since we have to import the compat library, this is not good for keeping bundle size down. I'd strongly recommend importing this example SignInForm component with React.lazy() to make sure that it's a separate chunk that's only loaded if a user isn't signed in yet.