Работа с куками в мобильном браузере на react js
Всем привет! Разрабатываю маркетплейс на react и возникла проблема при авторизации пользователя на мобильном браузере, не важно ios/android. Проблема в том, что в браузере 'ПК' (в различных разрешениях включая 'мобильное') TOKEN записывается в куки и авторизация идет, но как только пытаюсь авторизоваться на РЕАЛЬНОМ мобильном android/ios нет никакого продвижения.
Признаком того, что пользователь авторизован является HEADER, в котором фото и тд пользователя отображается в том случае, если authState = true. А в authState использую useEffect для выставления 'true' значения если токен есть в куках.
Вопрос: Есть ли какая то особенность при реализации хранения токена в куках в мобильных браузерах и если есть то какая?
Запись токена в куки:
function setCookie(name, value, options = {}) {
options = {
path: '/',
...options
};
if (options.expires instanceof Date) {
options.expires = options.expires.toUTCString();
}
let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
for (let optionKey in options) {
updatedCookie += "; " + optionKey;
let optionValue = options[optionKey];
if (optionValue !== true) {
updatedCookie += "=" + optionValue;
}
}
document.cookie = updatedCookie;}
Выставление значений true/false в authState:
const cookies = getCookie('userInfo')
useEffect(()=>{
if(cookies !== ''){
setAuthState(prev => {
return {
...prev,
authed:true
}
})
}
if(cookies === '' || cookies === undefined ){
setAuthState(prev => {
return {
...prev,
authed:false
}
})
}
},[cookies])
Отображение в мобильном header если authState true:
if(authState.authed === true){
return (
<div className='userAuthedIcons'>
<Link to='/postAd' className='postAdIcon'>
<img src={postAdIcon} alt="icon"/>
</Link>
<Link to='/userPage/favorities'>
<img src={favoritePageIcon} alt="icon"/>
</Link>
<Link to='/userPage/notifications'>
<img src={notificationsPageIcon} alt="icon"/>
</Link>
<Link to='/userPage/profile'>
<img src={useIcon} alt="icon" className='userAuthedIcon'/>
</Link>
</div>
)
}
else if(authState.authed === false) {
return (
<Link to='/userPage/favorities'>
<img src={favoritePageIcon} alt="icon"/>
</Link>
)
}
Отображение в desktop header если authState true:
if(authState.authed === true){
return (
<Link to='/userPage/profile'>
<div className='header__profileImg'>
<img src={useIcon} alt='img' />
</div>
</Link>
)
}
else if(authState.authed === false) {
return (
<button
id='signin__out'
onClick={() =>
setAuthState(prev => {
return {
...prev,
mainModal: true,
logInModal: true,
}
})
}
>
<p>Вход/Регистрация</p>
</button>
)
}