# #javascript #reactjs #firebase #firebase-realtime-database #firebase-authentication
Вопрос:
Я использую firebase и react js для аутентификации пользователя , в которой я использую электронную почту и пароль для входа.
каждый раз, когда пользователь входит в систему , пользователь становится нулевым сразу после входа в систему или регистрации, и я выяснил, что, когда я устанавливаю пользователя в состояние контекста, пользователь выходит из системы и становится нулевым. вот мой код для того же самого.
//login.js
import React , {useState , useEffect , useContext} from 'react'
import './Login.css';
import { Link } from "react-router-dom";
import { auth } from '../../Firebase';
import {useHistory} from 'react-router-dom'
import { UserContext } from '../../context/UserContext';
import firebase from 'firebase'
const Login = () => {
const [email , setEmail] = useState("")
const [password , setPassword] = useState("")
const [user , setUser] = useContext(UserContext)
const [error , setError] = useState("")
const history = useHistory()
const signInWithEmailAndPasswordHandler = (event, email, password) => {
event.preventDefault();
auth.signInWithEmailAndPassword(email, password).catch(error => {
setError("Error signing in with password and email!");
console.error("Error signing in with password and email", error);
});
};
//console.log(user)
useEffect(() => {
if(user){
history.push('/')
}
}, [user])
return (
<div>
<div className="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div className="container">
<div className="card login-card">
<div className="row no-gutters">
<div className="col-md-5">
<img src="https://images.unsplash.com/photo-1512813498716-3e640fed3f39?ixlib=rb-1.2.1amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=amp;auto=formatamp;fit=cropamp;w=1566amp;q=80" alt="login" className="login-card-img"/>
</div>
<div className="col-md-7">
<div className="card-body">
<div className="brand-wrapper">
{/*<img src="assets/images/logo.svg" alt="logo" className="logo"/>*/}
<h1>Mecasso</h1>
</div>
<p className="login-card-description">Login into your account</p>
<form>
<div className="form-group">
<label for="email" className="sr-only">Email</label>
<input onChange={(e)=>setEmail(e.target.value)} type="email" name="email" id="email" className="form-control" placeholder="Email address"/>
</div>
<div className="form-group mb-4">
<label for="password" className="sr-only">Password</label>
<input onChange={(e)=>setPassword(e.target.value)} type="password" name="password" id="password" className="form-control" placeholder="***********"/>
</div>
<input onClick={(e)=>signInWithEmailAndPasswordHandler(e , email , password)} name="login" id="login" className="btn btn-block login-btn mb-4" type="button" value="Login"/>
</form>
<a href="#!" className="forgot-password-link">Forgot password?</a>
<p className="login-card-footer-text">Don't have an account? <Link to="/signup" className="text-reset">Register here</Link></p>
<nav className="login-card-footer-nav">
<a href="#">Terms of use.</a>
<a href="#">Privacy policy</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Login
//Signup.js
import React , {useState , useContext , useEffect}from 'react'
import './Signup.css'
import { Link } from "react-router-dom";
import { auth, generateUserDocument } from '../../Firebase';
import { UserContext } from '../../context/UserContext';
import {useHistory} from 'react-router-dom'
const Signup = () => {
const [email , setEmail] = useState("")
const [displayName , setDisplayName] = useState("")
const [phoneNumber , setPhoneNumber] = useState("")
const [password , setPassword] = useState("")
const [password1 , setPassword1] = useState("")
const [error , setError] = useState("")
const[user , setUser]=useContext(UserContext)
const history = useHistory()
const createUserWithEmailAndPasswordHandler = async (event, email, password) => {
event.preventDefault();
try{
const {user} = await auth.createUserWithEmailAndPassword(email, password);
generateUserDocument(user, {displayName , phoneNumber});
}
catch(error){
setError('Error Signing up with email and password');
}
setEmail("");
setPassword("");
setDisplayName("");
};
console.log(user)
return (
<div>
{/* <input placeholder="name" type="text" onChange={(e)=>setDisplayName(e.target.value)}/>
<input placeholder="email" type="email" onChange={(e)=>setEmail(e.target.value)}/>
<input placeholder="phone" type="tel" onChange={(e)=>setPhoneNumber(e.target.value)}/>
<input type="password" onChange={(e)=>setPassword(e.target.value)}/>
<button onClick={event => { createUserWithEmailAndPasswordHandler(event, email, password);}}>sign up</button> */}
<div className="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div className="container">
<div className="card login-card">
<div className="row no-gutters">
<div className="col-md-5">
<img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-1.2.1amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=amp;auto=formatamp;fit=cropamp;w=334amp;q=80" alt="signup" className="login-card-img"/>
</div>
<div className="col-md-7">
<div className="card-body">
<div className="brand-wrapper">
<h1>Mecasso</h1>
</div>
<p className="login-card-description">Signup new account</p>
{error amp;amp; <strong>{error}</strong>}
<form >
<div className="form-group">
<label for="username" className="sr-only">Username</label>
<input onChange={(e)=>setDisplayName(e.target.value)} type="text" name="username" id="username" className="form-control" placeholder="Username"/>
</div>
<div className="form-group">
<label for="username" className="sr-only">Phone</label>
<input onChange={(e)=>setPhoneNumber(e.target.value)} type="tel" name="phone" id="phone" className="form-control" placeholder="Phone"/>
</div>
<div className="form-group">
<label for="email" className="sr-only">Email</label>
<input onChange={(e)=>setEmail(e.target.value)} type="email" name="email" id="email" className="form-control" placeholder="Email address"/>
</div>
<div className="form-group">
<label for="password" className="sr-only">Password</label>
<input onChange={(e)=>setPassword(e.target.value)} type="password" name="password" id="password" className="form-control" placeholder="Password"/>
</div>
<div className="form-group mb-4">
<label for="re-enter_password" className="sr-only">Password</label>
<input onChange={(e)=>setPassword1(e.target.value)} type="password" name="re-enter_password" id="re-enter_password" className="form-control" placeholder="Re-enter Password"/>
</div>
<input onClick={(e)=>createUserWithEmailAndPasswordHandler(e , email , password)} name="login" id="login" className="btn btn-block login-btn mb-4" type="button" value="Sign up"/>
</form>
<p className="login-card-footer-text">Already have an account? <Link to='/login' className="text-reset">Login</Link></p>
<nav className="login-card-footer-nav">
<a href="#!">Terms of use.</a>
<a href="#!">Privacy policy</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Signup
//UserContext.js
import react, { useState, createContext , useEffect } from "react";
import firebase from 'firebase'
import { auth, generateUserDocument } from "../Firebase";
export const UserContext = createContext();
export const UserProvider = (props) => {
const [user, setUser] = useState("");
useEffect(() => {
auth.onAuthStateChanged(async userAuth=>{
if(userAuth){
const user = await generateUserDocument(userAuth);
//const user = firebase.auth().currentUser
setUser(user)
console.log(user)
}
})
}, [])
return (
<UserContext.Provider value={[user, setUser]}>
{props.children}
</UserContext.Provider>
);
};
//Firebase.js
import firebase from 'firebase';
const firebaseApp = firebase.initializeApp({
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxx"
})
const db = firebaseApp.firestore()
const auth = firebase.auth()
const storage = firebase.storage()
export const generateUserDocument = async (user, additionalData) => {
if (!user) return;
const userRef = db.doc(`clients/${user.uid}`);
const snapshot = await userRef.get();
if (!snapshot.exists) {
const { email, displayName, phoneNumber } = user;
try {
await userRef.set({
displayName,
email,
phoneNumber,
...additionalData
});
} catch (error) {
console.error("Error creating user document", error);
}
}
return getUserDocument(user.uid);
};
const getUserDocument = async uid => {
if (!uid) return null;
try {
const userDocument = await db.doc(`clients/${uid}`).get();
return {
uid,
...userDocument.data()
};
} catch (error) {
console.error("Error fetching user", error);
}
};
export { db, auth, storage }
Пожалуйста, помогите мне или направьте меня по вышеуказанной проблеме