profile always redirect to login in my mobile while it works pretty well in my laptop!!
Also "My Account" doesn't work on mobile phones it also redirects to login!
'use client'
import React, { useState, useEffect } from 'react';
import Image from "next/image";
import { logout } from "@/components/loginAPIs";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useSelector } from "react-redux";

export function Profile() {
    const router = useRouter();
    const { isAuthenticated } = useSelector(state => state.auth);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        if (!isAuthenticated) {
            const timer = setTimeout(() => {
                router.push('/login');
            }, 500); // Small delay to ensure state is checked
            return () => clearTimeout(timer);
        } else {
            setIsLoading(false);
        }
    }, [isAuthenticated, router]);

    if (isLoading) {
        return <div>Loading...</div>; // Or use your Loading component
    }

    return (
        <div className="my-28">
            <ProfileItem
                src="/profile/account.svg"
                title="My Account"
                hasNavigate={true}
                alt="My Account"
                href="/profile/account"
            />
            <ProfileItem
                src="/profile/orders.svg"
                title="My Orders"
                hasNavigate={true}
                alt="My Orders"
                href="/profile/orders"
            />
            <ProfileItem
                src="/profile/addresses.svg"
                title="My Addresses"
                hasNavigate={true}
                alt="My Addresses"
                href="/profile/address"
            />
            <ProfileItem
                src="/profile/coupons.svg"
                title="My Coupons"
                hasNavigate={true}
                alt="My Coupons"
                href="/profile/coupons"
            />
            <ProfileItem
                src="/profile/logout.svg"
                title="Logout"
                hasNavigate={false}
                alt="Logout"
                onClick={logout}
                href="/"
            />
        </div>
    );
}

function ProfileItem({src, title, hasNavigate, alt, onClick, href="/"}) {
    return (
        <Link
            className="flex mx-2 mb-6 justify-between border border-[#3b534580] border-solid rounded-lg py-3 px-4 items-center"
            onClick={onClick}
            href={href}
            prefetch={false}
        >
            <div className="flex items-center space-x-5">
                <Image src={src} width={26} height={26} alt={alt} />
                <p className="font-serif text-black text-xl">{title}</p>
            </div>
            {hasNavigate && <Image unoptimized={true} src="https://storage.naayiq.com/resources/leftAlt.svg" alt="Navigate" width={10} height={18} />}
        </Link>
    );
}
'use client';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Footer from "@/components/Footer";
import { Profile } from "@/components/Profile";
import Image from "next/image";
import { useAppDispatch } from "@/lib/hook";
import Cookies from 'js-cookie';
import { setIsAuthenticated } from "@/lib/features/authSlice";
import { useSelector } from "react-redux";
import Loading from "@/components/Loading";
import {handleAuthResponse} from "@/components/isAuth";

export default function ProfileClient() {
    const router = useRouter();
    const dispatch = useAppDispatch();
    const { info } = useSelector(state => state.user);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        async function checkAuth() {
            const accessToken = Cookies.get('token');
            if (accessToken) {
                try {
                    const response = await fetch('https://api.naayiq.com/user/check-auth', {
                        credentials: "include"
                    });
                    const data = await response.json();
                    handleAuthResponse(data, dispatch);
                    if (!data.isAuthenticated) {
                        router.push('/login');
                    }
                } catch (error) {
                    console.error('Error checking authentication:', error);
                    router.push('/login');
                }
            } else {
                dispatch(setIsAuthenticated(false));
                router.push('/login');
            }
            setIsLoading(false);
        }

        const timer = setTimeout(checkAuth, 500); // Small delay to ensure smooth loading
        return () => clearTimeout(timer);
    }, [dispatch, router]);

    if (isLoading) {
        return <Loading />;
    }

    return (
        <>
            <div className="relative left-0 -translate-y-[10%] -m-4 right-0 min-h-[100vw] top-0 w-[100vw]">
                <div className="font-sans absolute top-1/2 z-10 left-0 right-0 text-center text-3xl">
                    <p>Hi {info?.name}!</p>
                    <p className="text-base font-serif">Let your beauty shine!</p>
                </div>
                <Image src="https://storage.naayiq.com/resources/bg_flowers.png" unoptimized={true} alt="bg_flowers" fill={true}
                       className="object-contain"/>
            </div>
            <div className="h-screen flex flex-col justify-between">
                <Profile/>
                <Footer/>
            </div>
        </>
    );
}
import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
    name: 'auth',
    initialState: {
        isAuthenticated: false,
    },
    reducers: {
        setIsAuthenticated: (state, action) => {
            state.isAuthenticated = action.payload;
        },
    },
});

export const { setIsAuthenticated } = authSlice.actions;
export default authSlice.reducer;
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
    name: 'user',
    initialState: {
        info: null,
    },
    reducers: {
        setUserInfo: (state, action) => {
            state.info = action.payload;
        },
        clearUserInfo: (state) => {
            state.info = null;
        },
    },
});

export const { setUserInfo, clearUserInfo } = userSlice.actions;
export default userSlice.reducer;
'use client'
import { useEffect } from 'react';
import { setIsAuthenticated } from "@/lib/features/authSlice";
import { setAddresses } from "@/lib/features/addressesSlice";
import { setUserInfo } from "@/lib/features/userSlice";
import { useAppDispatch } from "@/lib/hook";

export default function IsAuth() {
    const dispatch = useAppDispatch();
    useEffect(() => {
        async function checkAuth() {
            const response = await fetch('https://api.naayiq.com/user/check-auth',
                {credentials: "include"});
            const data = await response.json();
            if (data.isAuthenticated) {
                handleAuthResponse(data, dispatch);
            }
        }
        checkAuth();
    }, [dispatch]);

    return null;
}

export function handleAuthResponse(data, dispatch) {
    if (data.isAuthenticated) {
        dispatch(setIsAuthenticated(true));
        dispatch(setAddresses(data.addresses));
        dispatch(setUserInfo({
            userId: data.userId,
            name: data.name,
            email: data.email,
            phone: data.phone,
            dob: data.dob,
            role: data.role
        }));
    } else {
        dispatch(setIsAuthenticated(false));
        dispatch(setAddresses([]));
        dispatch(setUserInfo({}))
    }
}

check-auth example response:
{"isAuthenticated":true,"userId":58,"name":"Mustafa","active":true,"email":"mus52pro@gmail.com","phone":"07752546720","dob":null,"role":"user","addresses":[]}
'use client'
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useNotification } from '@/components/NotificationContext';
import '@/components/NotificationStyles.css';
import Cookies from 'js-cookie';
import setCookies, {login} from "@/components/loginAPIs";
import {useDispatch} from "react-redux";
import {setIsAuthenticated} from "@/lib/features/authSlice";
import {handleAuthResponse} from "@/components/isAuth";


export default function LoginPage() {
    const [loading, setLoading] = useState(false);
    const [hasError, setHasError] = useState(false);
    const [disabled, setDisabled] = useState(false);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [rememberMe, setRememberMe] = useState(false);
    const router = useRouter();
    const dispatch = useDispatch()
    const { addNotification } = useNotification();

    const onFinish = async (event) => {
        event.preventDefault();
        setLoading(true);

        try {
            const response = await login(email, password, rememberMe)
            if (response.ok) {
                const data = await response.json();
                setCookies(data, rememberMe)
                addNotification('success', 'Successfully Logged in!');
                setHasError(false);
                setDisabled(true);
                handleAuthResponse(data, dispatch)
                router.push("/");
            } else {
                const errorData = await response.json();
                addNotification('error', errorData.message || 'Login failed');
                setHasError(true);
                setDisabled(true);
                setTimeout(() => setDisabled(false), 100);
            }
        } catch (error) {
            addNotification('error', 'An error occurred, please try again!');
            setHasError(true);
            setDisabled(true);
            setTimeout(() => setDisabled(false), 100);
        } finally {
            setLoading(false);
        }
    };

    const handleFieldChange = () => {
        if (hasError) {
            setHasError(false);

        }
    };

    return (
        <main className="flex-grow my-24 font-serif flex items-center justify-center px-4 sm:px-6 lg:px-8">
            <div className="w-full space-y-6">
                <form onSubmit={onFinish} className="mt-2 space-y-6">
                    <div className="mb-4">
                        <label className="block text-[#695C5C] mb-2" htmlFor="email">Email</label>
                        <input
                            id="email"
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            onInput={handleFieldChange}
                            placeholder="example@gmail.com"
                            className={`w-full borderblack40 p-3 ${hasError ? 'border-red-500' : ''}`}
                        />
                    </div>
                    <div className="mb-4">
                        <label className="block text-[#695C5C] mb-2" htmlFor="password">Password</label>
                        <input
                            id="password"
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            onInput={handleFieldChange}
                            placeholder="Enter Your Password"
                            className={`w-full borderblack40 p-3 ${hasError ? 'border-red-500' : ''}`}
                        />
                    </div>
                    <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center">
                            <input
                                id="remember"
                                type="checkbox"
                                checked={rememberMe}
                                onChange={(e) => setRememberMe(e.target.checked)}
                                className="sr-only" // Hide the default checkbox
                            />
                            <label htmlFor="remember" className="flex items-center cursor-pointer">
                                <div
                                    className={`w-5 h-5 border ${rememberMe ? 'bg-[#44594A] border-[#44594A]' : 'border-gray-300'} rounded mr-2 flex items-center justify-center`}>
                                    {rememberMe && (
                                        <svg className="w-3 h-3 text-white fill-current" viewBox="0 0 20 20">
                                            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
                                        </svg>
                                    )}
                                </div>
                                <span className="text-[1rem] font-medium text-gray-700">Remember Me</span>
                            </label>
                        </div>
                        <Link prefetch={false} href="/forgot-password" className="text-[#44594A] font-medium hover:text-[#374c3d]">
                            Forgot Password?
                        </Link>
                    </div>
                    <div className="mb-4">
                        <button
                            type="submit"
                            className="w-full py-3 font-semibold bg-[#44594A] text-white rounded-md hover:bg-[#374c3d] disabled:bg-gray-400"
                            disabled={loading || disabled}
                        >
                            {loading ? 'Loading...' : 'Login'}
                        </button>
                    </div>
                </form>
                <div className="text-center">
                    <span className="text-black">Don&apos;t have an account? </span>
                    <Link prefetch={false} href="/signup" className="text-[#44594A] font-semibold hover:text-[#374c3d]">
                        Sign Up
                    </Link>
                </div>
            </div>
        </main>
    );
}
'use client'
import React, { useState, useEffect } from 'react';
import Image from "next/image";
import { logout } from "@/components/loginAPIs";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useSelector } from "react-redux";

export function Profile() {
    const router = useRouter();
    const { isAuthenticated } = useSelector(state => state.auth);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        if (!isAuthenticated) {
            const timer = setTimeout(() => {
                router.push('/login');
            }, 500); // Small delay to ensure state is checked
            return () => clearTimeout(timer);
        } else {
            setIsLoading(false);
        }
    }, [isAuthenticated, router]);

    if (isLoading) {
        return <div>Loading...</div>; // Or use your Loading component
    }

    return (
        <div className="my-28">
            <ProfileItem
                src="/profile/account.svg"
                title="My Account"
                hasNavigate={true}
                alt="My Account"
                href="/profile/account"
            />
            <ProfileItem
                src="/profile/orders.svg"
                title="My Orders"
                hasNavigate={true}
                alt="My Orders"
                href="/profile/orders"
            />
            <ProfileItem
                src="/profile/addresses.svg"
                title="My Addresses"
                hasNavigate={true}
                alt="My Addresses"
                href="/profile/address"
            />
            <ProfileItem
                src="/profile/coupons.svg"
                title="My Coupons"
                hasNavigate={true}
                alt="My Coupons"
                href="/profile/coupons"
            />
            <ProfileItem
                src="/profile/logout.svg"
                title="Logout"
                hasNavigate={false}
                alt="Logout"
                onClick={logout}
                href="/"
            />
        </div>
    );
}

function ProfileItem({src, title, hasNavigate, alt, onClick, href="/"}) {
    return (
        <Link
            className="flex mx-2 mb-6 justify-between border border-[#3b534580] border-solid rounded-lg py-3 px-4 items-center"
            onClick={onClick}
            href={href}
            prefetch={false}
        >
            <div className="flex items-center space-x-5">
                <Image src={src} width={26} height={26} alt={alt} />
                <p className="font-serif text-black text-xl">{title}</p>
            </div>
            {hasNavigate && <Image unoptimized={true} src="https://storage.naayiq.com/resources/leftAlt.svg" alt="Navigate" width={10} height={18} />}
        </Link>
    );
}