Working FirebaseUI Package for React and Next.js

[mccordryan]

Hey everybody! @christiangenco and I have rebuilt FirebaseUI as a React component under the npm package firebaseui-react. It works more or less the same way (though I would still recommend looking through the documentation before trying to reuse an existing configuration). If you're having trouble getting the original FirebaseUI to work on your project, come check us out!

Our component supports:

• Authentication using all of the default third party providers included in the original Firebase UI
• Multi-Factor Authentication Sign In
• Password Resets handled on your website, not the external Firebase default page
• Massive customizability. Everything from button styling, text, icons, and error handling can be overridden.
• Usable in React and Next.js projects.

Links npm Github demo

[christiangenco]

A big part of our motivation for rebuilding this component is that this firebase-web package doesn't seem to be maintained anymore—it was a huge pain for us to get working in a Next.js app and it felt clunky and dated.

We built firebaseui-react with zero dependencies as a React-first component and made sure it works seamlessly with Next.js. I've got it deployed in production on my small SaaS, Fileinbox.

Here's the minimal code to try it out:

import { getAuth } from "firebase/auth";
import dynamic from "next/dynamic";
const FirebaseUIReact = dynamic(() => import("firebaseui-react"), {
  ssr: false,
});

// soon, just:
// import FirebaseUIReact from "firebaseui-react";

export default function AuthComponent() {
  const auth = getAuth();

  const config = {
    // link back to this page for password resets
    continueUrl: document.location.href,
    signInOptions: ["emailpassword", "google.com"],
  };

  return <FirebaseUIReact auth={auth} config={config} />
}

which would give you:

PRs and feature requests are welcome!

[jhuleatt]

Hi @Taoula and @christiangenco, very cool, thank you for open sourcing this! Would you like to advertise on https://github.com/firebase/firebaseui-web-react as well?

Longer term, we are working on a web-components-based replacement for the current FirebaseUI library so that all frameworks can be supported, but I think your library could be a great solution for React developers.

[artemis-prime]

@Taoula and @christiangenco, great work! Thanks. Two questions:

1) Why not put the code above in the examples your repo under 'nextjs'? The next usage is a bit different and non obvious. 2) Why not have better / any support for Typescript? Better yet, why not build it in TS? :)

[christiangenco]

@artemis-prime 1. Oh yup that's a great idea. @Taoula can you do that please? :D

2. I'm not a fan of typescript but we're definitely open to PRs if you are!

[Pushkariiit]

Hi @christiangenco I am interested in raising pr for converting to reusable react components