Trying to learn new things, I have created a simple Web application with React in which the products of any business are displayed, which has three screens: Menu, New products and orders (Orders) Once finished, I have decided to add the need for enter an email and a password to enter the application. I have created a registration and authentication system following the Firebase data and studying other examples.
The application must start on a page with a form, enter email and password and when doing Login take us to the menu screen, the one I show in the first screenshot. ( < /Sidebar> ) However, when I enter the email and password, the application does not move. It's the second screenshot. The log works, because it is shown to me by a console.log()
I've tried several things, even thought about unregistering, but I want to make it mandatory as it's like the App admin panel.
I show the code
App.js file
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
Signin.js file
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
firebase.js file
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
enter image description here
Finally solved the problem with the help of another user. The problem was that it wasn't calling
firebase/auth
From is Both in
App.js
and inSignin.js
create a constant to point to firebase and inApp.js
creates aif else
:And the same in Signin.js
and if the email and password are not entered, the registration form starts, once the correct data has been entered, it takes us to the application menu. Something simple and effective.
The resulting code is the following: