firebase 未连接到 Reactjs

Question

我在 reactjs 中建立了一个项目，它需要身份验证，所以我试图将它连接到 firebase，因为它是更简单的方法

我一直在关注 youtube 上的教程，但他的方式对我不起作用

这是我的代码：

firebase 配置代码：

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyBoKEW_g0gOwNKkHGMAyhXxC0ESfdsVhKI",
  authDomain: "kargoevi-auth.firebaseapp.com",
  projectId: "kargoevi-auth",
  storageBucket: "kargoevi-auth.appspot.com",
  messagingSenderId: "726037811463",
  appId: "1:726037811463:web:42d75c7f5c1d1b5b9bf5a2",
  measurementId: "G-PJXGLVZ6GQ",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

export default app;

授权码：

import React, { useState, useEffect } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./base.js";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      setPending(false);
    });
  }, []);
  if (pending) {
    return <>Loading...</>;
  }

  return (
    <AuthContext.Provider
      value={{
        currentUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

私人路线代码：

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./Auth";

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={(routeProps) =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};

export default PrivateRoute;

所以我的目标是在注册和登录时进行身份验证

这是注册和登录的代码

注册码：

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../auth/base.js";

const SignUp = ({ history }) => {
  const handleSignUp = useCallback(
    async (event) => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await createUserWithEmailAndPassword(auth, email.value, password.Value);
        console.log("test");
        history.Push("/");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

 return (
         <form
         onSubmit={handleSignUp}

      >

所以我想看看有人在firebase数据库中注册的时间 我也希望只有注册的人才能登录 现在它不起作用

Answer 1

您要导出的app 是FirebaseApp 的一个实例，并且没有.auth() 方法。您似乎正在关注使用旧命名空间版本的 Firebase SDK 的旧教程。而是尝试删除兼容库并重构代码，如下所示：

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth"; 

const firebaseConfig = {...};

const app = initializeApp(firebaseConfig);

// use this auth instance else where
export const auth = getAuth(app);

在新的modular SDK 中，createUserWithEmailAndPassword() 是顶级函数。尝试：

import { auth } from "../path/to/base.js"
import { createUserWithEmailAndPassword } from "firebase/auth"

const handleSignUp = useCallback(
  async (event) => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await createUserWithEmailAndPassword(auth, email.value, password.Value);
        history.Push("/");
      } catch (error) {
        alert(error);
      }
    },
    [history]
);

也结帐Getting started with Firebase Authentication on the web