Issue while implementing firebaseUi auth in a nextjs project ? [error : window is not defined]

Question

I'm trying to setup firebase Auth into my nextjs project (it looks like the firebase documentation is not up-to-date via the release of the getAuth method).

While using firebaseUi (to get the automatic styling of the different auth providers), I get this error :

Here is the code (i'm just trying to render the firebaseUi component for now) :

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Cloud Firestore
const db = getFirestore(app);

// Initialize Firebase Authentication
const auth = getAuth(app);

export { db, auth }

Then in a template page for signin :

import { NavBar } from '../components';
import { StyledFirebaseAuth } from 'react-firebaseui/StyledFirebaseAuth';
import { auth } from '../firebase/initFirebase';
import { GoogleAuthProvider } from 'firebase/auth';
const firebaseui = require('firebaseui')


// // Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.GoogleAuthProvider(auth);

function Signup() {

    const firebaseUiConfig = {
            signInFlow: 'popup',
            signInSuccessUrl: '/',
            tosUrl: '/terms-of-service',
            privacyPolicyUrl: '/privacy-policy',
            signInOptions: [
                GoogleAuthProvider.PROVIDER_ID
            ]
        }
        
    return (
        <div>
            <NavBar />
            <StyledFirebaseAuth uiConfig={firebaseUiConfig} firebaseAuth={auth} />
        </div>
    )
}

export default Signup

Thanks a lot in advance for your help, I don't understand what's going on :(

// EDIT // I understand it has to deal with SSR. So I did try to dynamically import firebaseUi with next/dynamic. I don't get the error any longer but the page is now blank (just the navbar component renders). Is it because I am passing props inappropriately ?

import dynamic from "next/dynamic";
import { NavBar } from '../components';
import { auth } from '../firebase/initFirebase';
import { GoogleAuthProvider } from 'firebase/auth';

const AuthComponent = dynamic(() => 
    import('react-firebaseui/StyledFirebaseAuth').then((mod) => mod.StyledFirebaseAuth)
)

function Signup() {

    const firebaseUiConfig = {
            // signInFlow: 'popup',
            signInSuccessUrl: '/',
            tosUrl: '/legal',
            privacyPolicyUrl: '/legal',
            signInOptions: [
                GoogleAuthProvider.PROVIDER_ID
            ]
        }
    
    
    return (
        <div>
            <NavBar />
            <AuthComponent uiConfig={firebaseUiConfig} firebaseAuth={auth} />
        </div>
    )
}

export default Signup

You need to pass the ssr: false option on the next/dynamic call to dynamically import to component on the client-side only. — juliomalves
– juliomalves, Commented May 2, 2022 at 16:38
Thanks Julio. I tried but not working. Nothing shows up on the page. I think the FirebaseUi integration is not mature for Nextjs. I opted for the customized solution instead.. — Maxime Crtgn
– Maxime Crtgn, Commented May 3, 2022 at 9:21

Fakabbir Amin · Accepted Answer · 2022-09-08 16:25:04Z

The idea here to disable SSR on the page which used firebaseui.

This can be done in two steps.

Use firebase ui or any library which needs window keywork to work.

import React from 'react';
import Modal from '@leafygreen-ui/modal';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'


export default function AuthUi({open, setOpen}) {
  return (
    <>
      <Modal open={open} setOpen={setOpen}>
        // Modal Content goes here.
        // Signup widgets comes here
      </Modal>
    </>
  );
}

while importing the library, do something like this.

//__app.js
// import AuthUi from '../components/authUi'; >> Replace this by code below
import dynamic from 'next/dynamic'

const AuthUi = dynamic(
  () => import('../components/authUi'),
  { ssr: false }
);

Now you would be able to use firebaseui without window error.

Collectives™ on Stack Overflow

Issue while implementing firebaseUi auth in a nextjs project ? [error : window is not defined]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related