javascript - 如何在我的 React 应用程序中使用 Firebase 身份验证强制注册？

Question

编辑以添加详细信息
应用程序必须从带有表单的页面开始，输入电子邮件和密码，当登录时将我们带到菜单屏幕，我在屏幕截图中显示。
但是，当我输入电子邮件和密码时，应用程序不会移动。
日志有效，因为 consolelog()给我看
这是第二张截图
我不明白我有什么问题。
现在我显示修改后的 App.js 文件以显示表单，但是当我注册时，应用程序没有到达菜单，页面 <Sidebar /> 文件 App.js 修改

import React, { useState, useEffect } from 'react'
import { Routes, Route } from 'react-router'

import firebase, { FirebaseContext } from './firebase'
//import { auth } from 'firebase' 
import firebaseObj from './firebase'
import Ordenes from './components/paginas/Ordenes'
import Menu from './components/paginas/Menu'
import NuevoPlato from './components/paginas/NuevoPlato'
import Sidebar from './components/ui/Sidebar'
import Signin from './components/Signin'

const auth = firebaseObj.auth

function App() {

  const [user, setUser] = useState(null)
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(userAuth => {
      const user = {
        uid: userAuth?.uid,
        email: userAuth?.email
      }
      if (userAuth) {
        console.log(userAuth)
        setUser(user)
      } else {
        setUser(null)
      }
    })
    return unsubscribe
  }, [])

  return (
    <FirebaseContext.Provider
      value={{
        firebase
      }}
    >
      <div className="md:flex min-h-screen" >
        <div className="md:w-2/5 xl:w-4/5 p-6">
          <Routes>
            <Route path="/" element={<Signin />} />
            <Route path="/sidebar" element={<Sidebar />} />
            <Route path="/ordenes" element={<Ordenes />} />
            <Route path="/menu" element={<Menu />} />
            <Route path="/nuevo-plato" element={<NuevoPlato />} />
          </Routes>
        </div>
      </div>

    </FirebaseContext.Provider>
  )
}

export default App

我用 React 创建了一个 Web 应用程序 ( https://github.com/facebook/create-react-app . --- npx create-react-app my-app)
这是一个简单的应用程序，具有三个屏幕:主、菜单、新产品
显示商店产品列表的应用程序，用户可以从中添加更多产品。
完成后，我决定必须通过电子邮件注册才能查看内容并添加产品。
我添加了适当的配置以通过 Firebase 登录，应用程序始终直接启动，尽管它显示了注册表单。
App.js的配置是正确的，但是我不知道如何让我的应用程序从Signin开始，并且一旦输入了电子邮件和用户名，我就被发送到应用程序
我尝试了几种方法，并且在所有这些方法中都直接启动了应用程序。
我已经在App.js中添加了Signin，但是我需要查看App.js显示的内容，需要输入电子邮件和密码。
现在，有应用程序菜单
文件 App.js

import React, { useState, useEffect } from 'react'
import { Routes, Route } from 'react-router'

import firebase, { FirebaseContext } from './firebase'
//import { auth } from 'firebase' 
import firebaseObj from './firebase'
import Ordenes from './components/paginas/Ordenes'
import Menu from './components/paginas/Menu'
import NuevoPlato from './components/paginas/NuevoPlato'
import Sidebar from './components/ui/Sidebar'
import Signin from './components/Signin'

const auth = firebaseObj.auth

function App() {

  const [user, setUser] = useState(null)
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(userAuth => {
      const user = {
        uid: userAuth?.uid,
        email: userAuth?.email
      }
      if (userAuth) {
        console.log(userAuth)
        setUser(user)
      } else {
        setUser(null)
      }
    })
    return unsubscribe
  }, [])

  return (
    <FirebaseContext.Provider
      value={{
        firebase
      }}
    >
      <div className="md:flex min-h-screen" >
        <Sidebar />

        <div className="md:w-2/5 xl:w-4/5 p-6">
          <Routes>
            <Route path="/" element={<Ordenes />} />
            <Route path="/menu" element={<Menu />} />
            <Route path="/nuevo-producto" element={<NuevoProducto />} />
          </Routes>

        </div>

      </div>

    </FirebaseContext.Provider>
  )
}

export default App

文件 Signin.js

import React, { useRef } from 'react'
//import { auth } from '../firebase'
import firebaseObj from '../firebase/firebase'

const auth = firebaseObj.auth

const Signin = () => {
    const emailRef = useRef(null);
    const passwordRef = useRef(null);
    const signUp = e => {
        e.preventDefault();
        auth.createUserWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(user => {
            console.log(user)
        }).catch(err => {
            console.log(err)
        })
    }
    const signIn = e => {
        e.preventDefault();
        auth.signInWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(user => {
            console.log(user)
        }).catch(err => {
            console.log(err)
        })
    }
    return (
        <div className="mb-4">
            <form action="">
                <h1>Sign in</h1>
                <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                ref={emailRef} type="email" placeholder="email"/>
                <input 
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                ref={passwordRef} type="password" />
                <button onClick={signIn}>Sign in </button>
            </form>
        </div>
    )
}

export default Signin

Answer 1

您无法访问 SignIn 的原因注册后的页面是没有逻辑的。如果你像这里一样做一个简单的 if statament 它应该可以工作:

import React, { useState, useEffect } from "react";
import { Routes, Route } from "react-router";

import firebase, { FirebaseContext } from "./firebase";
//import { auth } from 'firebase'
import firebaseObj from "./firebase";
import Ordenes from "./components/paginas/Ordenes";
import Menu from "./components/paginas/Menu";
import NuevoPlato from "./components/paginas/NuevoPlato";
import Sidebar from "./components/ui/Sidebar";
import Signin from "./components/Signin";

const auth = firebaseObj.auth;

function App() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((userAuth) => {
      const user = {
        uid: userAuth?.uid,
        email: userAuth?.email,
      };
      if (userAuth) {
        console.log(userAuth);
        setUser(user);
      } else {
        setUser(null);
      }
    });
    return unsubscribe;
  }, []);

  if (!user) {
    return (
      <div className="md:flex min-h-screen">
        <div className="md:w-2/5 xl:w-4/5 p-6">
          <Signin />
        </div>
      </div>
    );
  } else {
    return (
      <FirebaseContext.Provider
        value={{
          firebase,
        }}
      >
        <div className="md:flex min-h-screen">
          <div className="md:w-2/5 xl:w-4/5 p-6">
            <Routes>
              <Route path="/" element={<Sidebar />} />
              <Route path="/sidebar" element={<Sidebar />} />
              <Route path="/ordenes" element={<Ordenes />} />
              <Route path="/menu" element={<Menu />} />
              <Route path="/nuevo-plato" element={<NuevoPlato />} />
            </Routes>
          </div>
        </div>
      </FirebaseContext.Provider>
    );
  }
}

export default App;

这只是为了举例。我建议将身份验证状态监听器放入 Provider 并创建自动重新路由到 SignIn 的自定义路由没有用户登录的页面。
Here您有一个我在每个项目中都使用的此类提供程序的示例。
一个 here是正在监听该提供者的那些自定义路由的示例。