Estoy tratando de hacer una autenticación de nombre de usuario y contraseña en una aplicación web que está hecha con reaccionar y base de fuego.
Pero soy realmente nuevo en firebase y no pude encontrar ninguna buena documentación sobre el proceso, he leído sobre Firestore pero no sé cómo conectarlo al método de autenticación. ¡Cualquier ayuda o sugerencia es apreciada!
Aquí está la función de registro de mi ruta /registrar.
async function handleSubmit(e) { e.preventDefault() if (passwordRef.current.value !== passwordConfirmationRef.current.value){ return setError('Passwords do not match'); } try { setError('') setLoading(true) await signup(emailRef.current.value, passwordRef.current.value, usernameRef.current.value) Home() } catch { setError('Failed to create an account') } setLoading(false) }Y este es mi código 'AuthContext.JSX':
import React, { useContext , useEffect, useState } from 'react' const AuthContext = React.createContext() import {auth} from '../firebase' export function useAuth() { return useContext(AuthContext) } export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState() const [loading, setLoading] = useState(true) function signup(email, password) { return auth.createUserWithEmailAndPassword(email, password) } function login(email, password) { return auth.signInWithEmailAndPassword(email, password) } useEffect(() => { const unsubscribe = auth.onAuthStateChanged(user => { setCurrentUser(user) setLoading(false) }) return unsubscribe }, []) auth.onAuthStateChanged(user => { setCurrentUser(user) }) const value = { currentUser, signup, login } return ( <AuthContext.Provider value={value}> {!loading && children } </AuthContext.Provider> ) }Solo para informarle que la autenticación funciona bien, el único problema es obtener el nombre para mostrar y exportarlo a la página de inicio para mostrarlo.
Gracias a Dhamaraj , utilicé la función updateProfile() dentro de mi ruta de registro, y funcionó correctamente para agregar un nombre para mostrar al usuario que usé en la página de inicio para mostrar el perfil.
Esa es la nueva función, puede ayudar a alguien con el mismo problema:
async function handleSubmit(e) { e.preventDefault() if (passwordRef.current.value !== passwordConfirmationRef.current.value){ return setError('Passwords do not match'); } try { setError('') setLoading(true) await signup(emailRef.current.value, passwordRef.current.value) auth.currentUser.updateProfile({ displayName: usernameRef.current.value }).then(() => { console.log('Username is: ' + auth.currentUser.displayName) }).catch((error) => { console.log('An error was occured while updating the profile.') }); Home() } catch { setError('Failed to create an account') } setLoading(false) }