Next.js 应用程序在尝试实现谷歌 firebase 身份验证时崩溃

Question

在我的 next.js 应用程序中尝试使用 firebase（通过 google）实现身份验证时遇到问题，并且一直看到应用程序崩溃。 我将展示 auth.js 页面组件的代码，以及我在哪里配置 firebase 并定义登录和注销功能。

这是存储在项目根目录中的 firebase-config.js 文件：

import { initializeApp,  } from 'firebase/app';
import { initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider } from "firebase/auth";


const firebaseCredentials = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID
};

export const app = initializeApp(firebaseCredentials);

export const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});

export const getUserFirebase = () => {
  return auth.currentUser;
};

export const loginFirebase = () => {
  signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);
};

export const logoutFirebase = () => {
  signOut(auth);
};

这是 auth.js 组件：

import { useRouter } from 'next/router';
import { useState } from 'react';
import { IconButton, Menu, MenuItem, Button, Box } from '@mui/material';
import { AccountCircle, Logout, ManageAccounts, RateReview, Google } from '@mui/icons-material';
import { getUserFirebase, loginFirebase, logoutFirebase } from '../firebase-config';


export const Auth = () => {
  const router = useRouter();

  const [anchorEl, setAnchorEl] = useState(null);
  const handleMenu = (event) => setAnchorEl(event.currentTarget);
  const handleClose = () => setAnchorEl(null);
  const redirectFromMenu = (url) => {
    handleClose();
    router.push(url);
  };

  return (
    <Box sx={{ marginLeft: 'auto' }}>
      {getUserFirebase() ? (
        <>
          <IconButton
            size="large"
            aria-label="account of current user"
            aria-controls="menu-appbar"
            aria-haspopup="true"
            onClick={handleMenu}
            color="inherit"
            >
            <AccountCircle />
          </IconButton>
          <Menu
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem onClick={() => redirectFromMenu('/account')}><ManageAccounts />&nbsp;My Account</MenuItem>
            <MenuItem onClick={() => redirectFromMenu('/reviews/write')}><RateReview />&nbsp;Write Review</MenuItem>
            <MenuItem onClick={logoutFirebase}><Logout />&nbsp;Logout</MenuItem>
          </Menu>
        </>
      ) : (
        <Button size='small' onClick={loginFirebase} startIcon={<Google />} variant='contained' color='secondary'>
          Login with Google
        </Button>
      )}
    </Box>
  );
};

尝试记录auth object 时，它包含一个错误，指出：

'dependent-sdk-initialized-before-auth': '另一个 Firebase SDK 已初始化，并试图在 Auth 初始化之前使用 Auth。 请务必在开始任何其他 Firebase getAuth之前调用initializeAuth或 getAuth。

该应用程序要么在启动时被killed ，要么在尝试进行身份验证时发生。 任何帮助将非常感激

Answer 1

我假设您没有使用服务器端渲染。 如果是这样，您需要将这些环境变量公开给浏览器。

为了向浏览器公开变量，您必须在变量前面加上NEXT_PUBLIC_ 。

在您的环境文件中，

NEXT_PUBLIC_FIREBASE_API_KEY=******************
...
...

您可以在您的应用程序中访问，如下所示，

apiKey:  process.env.NEXT_PUBLIC_FIREBASE_API_KEY