Logout при обновлении не сохраняется
Когда пользователь зарегестрирован то isUserAuthed = true и появляется ник, фото профиля и logout при обновлении состояние сохраняется но когда пользователь выходит из аккаунта тоесть нажимает на logout он выходит но когда обноляет страницу, то пользователь остаеться авторизованным тоесть не выходит из системы.
Пробовал поменять user на isUserAuthed в условии, но это постоянно выводит в консоле logout
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (isUserAuthed) {
console.log('login');
const { displayName, email, photoURL, uid } = user
const newuser = {
displayName,
email,
avatar: photoURL,
userId: uid
}
dispatch(setUserFromParams(newuser))
} else {
console.log("logout");
}
})
dispatch(checkUserInSystem())
}, [])
(это из-за того что useEffect в Layout сначало выводит user==null потом срабатывает signIn в userSlice?) signUpUser тоже почему то не работает
Layout.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { signIn, signOut, signUpUser } from '../../redux/slices/userSlice'
import { checkUserInSystem, setUserFromParams } from '../../redux/slices/userSlice';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from '../../config';
import { Auth } from '../../Components/AuthModal/Auth';
import { useEffect, useState } from 'react';
const Layout = ({ children }) => {
const [isClicked, setIsClicked] = useState(false)
const [isSigUp, setisSigUp] = useState(false)
const [isUserAuthed, setIsUserAuthed] = useState(false)
const user = useSelector(state => state.user)
const dispatch = useDispatch()
const logOut = () => {
setIsUserAuthed(false)
dispatch(signOut())
}
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
console.log('login');
const { displayName, email, photoURL, uid } = user
const newuser = {
displayName,
email,
avatar: photoURL,
userId: uid
}
dispatch(setUserFromParams(newuser))
} else {
console.log("logout");
}
})
dispatch(checkUserInSystem())
}, [])
useEffect(() => {
console.log(user, 'dididi');
if (user.user == null) {
setIsUserAuthed(false)
} else {
setIsUserAuthed(true)
}
console.log(isUserAuthed);
}, [user, isUserAuthed])
return (
<>
<Auth isClicked={isClicked} setIsClicked={setIsClicked} isSigUp={isSigUp} />
<header>
<div className='header'>
<div className='header__auth'>
{
isUserAuthed ?
<>
<div className='header__username'>{user?.user?.displayName}</div>
<img className='header__avatar' src={user?.user?.avatar} />
<button className='header__logOut' onClick={logOut}>Log Out</button>
</> :
<>
<button className='header__sign-up' onClick={(e) => {
setIsClicked(true)
setisSigUp(true)
}}>Sign Up</button>
<button className='header__sign-in' onClick={(e) => {
setIsClicked(true)
setisSigUp(false)
}}>Sign In</button>
</>
}
</div>
</div>
</header>
<main>
{children}
</main>
</>
)
}
export default Layout
Auth.js
import React, { useEffect, useState } from 'react'
import './Auth.scss'
import { auth, storage } from '../../config'
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'
import { useDispatch } from 'react-redux'
import { signIn, signUpUser } from '../../redux/slices/userSlice'
import { redirect, useNavigate } from 'react-router-dom'
export const Auth = ({ isClicked, setIsClicked, isSigUp }) => {
const navigate = useNavigate()
const title = isSigUp ? 'Sign Up' : 'Sign In'
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [username, setUsername] = useState('')
const [fileImg, setFileImg] = useState(null)
const [avatar, setAvatar] = useState('')
const dispath = useDispatch()
const signUp = async (keyword) => {
if (keyword == 'Sign Up') {
console.log('gggg');
const newUserInfo = { auth, email, password, moreInfo: { username, fileImg } }
dispath(signUpUser(newUserInfo))
setIsClicked(false)
} else {
const existUserInfo = { email, password }
dispath(signIn(existUserInfo))
setIsClicked(false)
navigate('/feed')
}
}
const showAvatar = (e) => {
if (e.target.files[0] != null) {
const file = e.target.files[0]
setFileImg(file)
console.log(file);
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function () {
setAvatar(reader.result)
}
}
}
return (
<div className={`modal ${isClicked ? 'active' : ''}`}>
<div className={`modal__container ${isClicked ? 'active' : ''}`}>
<div className='modal__close' onClick={() => {
setIsClicked(false)
}}>X</div>
<h1>{title}</h1>
<form className='modal__form'>
{
isSigUp ? <>
<div className='modal__form-control'>
<input onChange={(e) => { setUsername(e.target.value) }} type='text' className='modal__username' placeholder='Username' />
<small>Error</small>
</div>
</> : null
}
<div className='modal__form-control'>
<input onChange={(e) => { setEmail(e.target.value) }} type='text' className='modal__email' placeholder='Email' />
<small>Error</small>
</div>
<div className='modal__form-control'>
<input onChange={(e) => { setPassword(e.target.value) }} type='text' className='modal__password' placeholder='Password' />
<small>Error</small>
</div>
{
isSigUp ? <>
<img src={avatar}></img>
<div className='modal__file-wrapper'>
<input onChange={showAvatar} type='file' className='modal__file' id='modal__file' />
<label for='modal__file' className='modal__file-label'>
Выберите файл
</label>
</div>
</> : null
}
<button onClick={() => { signUp(title) }}>{title}</button>
</form>
</div>
</div>
)
}
userSlice.js
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { auth } from "../../config";
import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword, updateProfile } from "firebase/auth";
import { getUrlUploadedImg } from "../../utils/utils";
const initialState = {
user: null,
loading: false,
error: null
}
export const signUpUser = createAsyncThunk(
'user/signUp',
async ({ auth, email, password, moreInfo }) => {
try {
console.log('sign');
const urlImg = await getUrlUploadedImg(moreInfo.username, moreInfo.fileImg)
await createUserWithEmailAndPassword(auth, email, password, moreInfo)
if (auth.currentUser != null) {
console.log('up');
await updateProfile(auth.currentUser, {
displayName: moreInfo.username,
photoURL: urlImg
})
const { displayName, email, photoURL, uid } = auth.currentUser
const user = { displayName, email, avatar: photoURL, userId: uid }
return user
}
} catch (error) {
console.log(error.message);
}
}
)
export const signIn = createAsyncThunk(
'auth/SignIn',
async ({ email, password }) => {
const eemail = email
try {
const userCredential = await signInWithEmailAndPassword(auth, eemail, password)
const { displayName, email, photoURL, uid } = auth.currentUser
const user = {
displayName,
email,
avatar: photoURL,
userId: uid
}
console.log(user);
return user
} catch (error) {
console.log(error.message);
}
}
)
export const signOut = createAsyncThunk(
'auth/signOut',
async () => {
try {
signOut(auth)
} catch (error) {
console.log(error.message);
}
}
)
export const checkUserInSystem = createAsyncThunk(
'auth/checkUserInSystem',
async () => {
new Promise((res, rej) => {
onAuthStateChanged(auth, (user) => {
try {
const { displayName, email, photoURL, uid } = user
const newuser = {
displayName,
email,
avatar: photoURL,
userId: uid
}
res(newuser)
} catch (error) {
console.log(error.message);
}
})
})
}
)
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
setUserFromParams: (state, action) => {
state.user = action.payload
}
},
extraReducers: builder => {
builder.addCase(signUpUser.pending, (state, action) => {
state.loading = true
})
builder.addCase(signUpUser.fulfilled, (state, action) => {
state.user = action.payload
state.loading = false
})
builder.addCase(signUpUser.rejected, (state, action) => {
state.error = action.error.message
state.loading = false
})
// !----------------------------------------------------
builder.addCase(signIn.pending, (state, action) => {
state.loading = true
})
builder.addCase(signIn.fulfilled, (state, action) => {
state.user = action.payload
state.loading = false
})
builder.addCase(signIn.rejected, (state, action) => {
state.error = action.error.message
state.loading = false
})
// !----------------------------------------------------
builder.addCase(signOut.pending, (state, action) => {
state.loading = true
})
builder.addCase(signOut.fulfilled, (state, action) => {
state.user = null
state.loading = false
})
builder.addCase(signOut.rejected, (state, action) => {
state.error = action.error.message
state.loading = false
})
// !----------------------------------------------------
builder.addCase(checkUserInSystem.pending, (state, action) => {
state.loading = true
})
builder.addCase(checkUserInSystem.fulfilled, (state, action) => {
state.user = action.payload
state.loading = false
})
builder.addCase(checkUserInSystem.rejected, (state, action) => {
state.error = action.error.message
state.loading = false
})
}
})
export const { setUserFromParams } = userSlice.actions
export default userSlice.reducer