在nextjs项目中实现firebaseUi auth时发出问题？[错误:未定义窗口]

Question

我正在尝试将firebase设置到我的nextjs项目中(看起来，通过发布getAuth方法，firebase文档并不是最新的)。

在使用firebaseUi (获取不同auth提供程序的自动样式)时，我得到了以下错误：

​

​

下面是代码(我现在只是尝试呈现firebaseUi组件)：

​

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 }

​

然后在用于签名的模板页面中：

​

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

​

提前谢谢你的帮助，我不明白怎么回事

//编辑//我理解它必须处理SSR。因此，我确实尝试使用next/dynamic动态导入firebaseUi。我不再收到错误了，但是页面现在是空白的(只呈现navbar组件)。是不是因为我的道具不合适？

​

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

​

Answer 1

这里的想法是在使用firebaseui的页面上禁用SSR。

这可以分两步完成。

1. 使用firebase用户界面或任何需要window关键工作的库。

。

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>
    </>
  );
}

在导入库时，请执行以下操作：

1. .

//__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 }
);

现在，您可以使用firebaseui而不会出现窗口错误。