3

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í

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

5
  • 3
    "Sin embargo, cuando ingreso el email y la contraseña, la aplicación no se mueve" A qué te refieres con "no se mueve" Qué esperas que pase? Commented el 2 sept. 2021 a las 15:35
  • Hola @AndresGardiol la intención es que la app sea necesario un email y contraseña para entrar ver el panel. Entonces arranca en un formulario en que introducir el email y contraseña, y si es correcto, nos lleve hasta la aplicación en si, que es la pagina < / Sidebar>. Quizá deba de editar la pregunta para explicarlo mejor Commented el 2 sept. 2021 a las 17:42
  • 1
    Si por favor, edita tu pregunta para aclarar eso. Por otro lado, en el componente Signin cuando el usuario se loguea o registra solo haces un logeo por consola y nada más. Por eso no pasa nada en tu app Commented el 3 sept. 2021 a las 13:56
  • Gracias, ya he conseguido solucionar el problema, en breve lo añadiré, estoy probando los últimos detalles. El problema era. que no llamaba bien a authde firebase, y no se iniciaba la sesión. Commented el 3 sept. 2021 a las 14:10
  • Excelente! Agregalo como respuesta, me interesa ver la solución. Saludos! Commented el 3 sept. 2021 a las 14:57

1 respuesta 1

1

Finalmente solucione el problema con la ayuda de otro usuario. El problema era que no estaba llamando bien a firebase/auth

De es Tanto en App.js como en Signin.js cree una constante para señalar firebase y en App.js se crea un if else:

import firebaseObj from "./firebase"

const auth = firebaseObj.auth

Y lo mismo en Signin.js

import firebaseObj from '../firebase/firebase'

const auth = firebaseObj.auth

y si no esta introducido el email y contraseña se inicia el Formulario de registro, una vez introducido los datos correctos, nos lleva al menu de la aplicación. Algo sencillo y efectivo.

El código resultante es el siguiente:

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">
          <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-plato" element={<NuevoPlato />} />
            </Routes>
          </div>
        </div>

      </FirebaseContext.Provider>
    );
  }
}

export default App

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.