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

Question

编辑以添加详细信息

应用程序必须从一个带有表单的页面开始，输入电子邮件和密码，当登录将我们带到菜单屏幕时，我在屏幕截图中显示。但是，当我输入电子邮件和密码时，应用程序不会移动。日志有效，因为 aconsolelog()向我展示了它

这是第二张截图

我不明白我有什么问题。现在我显示修改后的 App.js 文件来显示表单，但是当我注册时，应用程序并没有到达 Menu，页面<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