Tratando de aprender cosas nuevas, he creado una simple aplicación Web con React en la que se muestran los productos de cualquier negocio, la cual tiene tres pantalla: Menú, Nuevo productos y ordenes( Pedidos) Una vez terminada, he decido añadir la necesidad de introducir un email y una contraseña para poder entrar en la aplicación. He creado un sistema de registro y de autenticación siguiendo los datos de Firebase y estudiando otros ejemplos.
La aplicación debe iniciarse en una pagina con formulario , ingresar correo electrónico y la contraseña y al hacer Login nos lleve a la pantalla del menú, la que muestro en la primera captura de pantalla. ( < /Sidebar> ) Sin embargo, cuando ingreso el email y la contraseña, la aplicación no se mueve. Es la segunda captura de pantalla. El registro funciona, porque me lo muestra un console.log()
He probado varias cosas, incluso pense en eliminar el registro, pero quiero que sea obligatorio, ya que es como el panel de administración de la Aplicación.
Muestro el código
Archivo 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
Archivo 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
Archivo firebase.js
import app from 'firebase/app'
import 'firebase/firestore'
import 'firebase/storage'
import 'firebase/auth'
import firebaseConfig from './config'
class Firebase {
constructor() {
if (!app.apps.length) {
app.initializeApp(firebaseConfig)
}
this.db = app.firestore()
this.storage = app.storage()
this.auth = app.auth()
}
}
const firebase = new Firebase()
export default firebase
introducir la descripción de la imagen aquí
< / Sidebar>
. Quizá deba de editar la pregunta para explicarlo mejorSignin
cuando el usuario se loguea o registra solo haces un logeo por consola y nada más. Por eso no pasa nada en tu appauth
de firebase, y no se iniciaba la sesión.