From 488ae501dd9c86df871bfa3ee04e5e0a790fd7a8 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sat, 15 Mar 2025 11:23:53 +0330 Subject: [PATCH] test new login --- package-lock.json | 15 ++++++++ package.json | 2 + src/App.tsx | 32 +++++++++------- src/config/axios.ts | 10 ++--- src/config/func.ts | 42 +++++++++++++++++++++ src/pages/auth/components/LoginStep2.tsx | 6 ++- src/pages/auth/components/LoginStep3.tsx | 6 ++- src/pages/auth/components/RegisterStep2.tsx | 6 ++- src/shared/SideBarItem.tsx | 5 ++- 9 files changed, 96 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index cc23461..b9d3bdf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "formik": "^2.4.6", "i18next": "^24.2.0", "iconsax-react": "^0.0.8", + "js-cookie": "^2.2.1", "moment-jalaali": "^0.10.4", "rc-rate": "^2.13.0", "react": "^19.0.0", @@ -37,6 +38,7 @@ }, "devDependencies": { "@eslint/js": "^9.17.0", + "@types/js-cookie": "^3.0.6", "@types/moment-jalaali": "^0.7.9", "@types/react": "^18.3.17", "@types/react-dom": "^18.3.5", @@ -3301,6 +3303,13 @@ "hoist-non-react-statics": "^3.3.0" } }, + "node_modules/@types/js-cookie": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz", + "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -6237,6 +6246,12 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==", + "license": "MIT" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/package.json b/package.json index 899c5a2..ce79d72 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "formik": "^2.4.6", "i18next": "^24.2.0", "iconsax-react": "^0.0.8", + "js-cookie": "^2.2.1", "moment-jalaali": "^0.10.4", "rc-rate": "^2.13.0", "react": "^19.0.0", @@ -39,6 +40,7 @@ }, "devDependencies": { "@eslint/js": "^9.17.0", + "@types/js-cookie": "^3.0.6", "@types/moment-jalaali": "^0.7.9", "@types/react": "^18.3.17", "@types/react-dom": "^18.3.5", diff --git a/src/App.tsx b/src/App.tsx index a12c823..9f1074e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,6 +24,7 @@ import useConvertNumbers from './hooks/useConvertNumbers'; import { Helmet, HelmetProvider } from 'react-helmet-async'; import moment from 'moment-jalaali'; import { refreshToken } from './pages/auth/service/AuthService'; +import { getRefreshToken, getToken, removeRefreshToken, removeToken, setRefreshToken, setToken } from './config/func'; i18next.init({ interpolation: { escapeValue: false }, @@ -58,16 +59,17 @@ const queryClient = new QueryClient({ window.isRefreshingToken = true; try { - const { data } = await refreshToken({ refreshToken: localStorage.getItem(import.meta.env.VITE_REFRESH_TOKEN_NAME) || '' }); + const refreshTokenValue = await getRefreshToken(); + const { data } = await refreshToken({ refreshToken: refreshTokenValue || '' }); console.log('data', data); if (data?.accessToken?.token) { // Save the new token - localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.accessToken?.token); + await setToken(data?.accessToken?.token); // If refresh token also returned, update it if (data.refreshToken?.token) { - localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data.refreshToken?.token); + await setRefreshToken(data.refreshToken?.token); } // Retry the failed request @@ -82,8 +84,8 @@ const queryClient = new QueryClient({ } catch (refreshError: unknown) { console.error('Token refresh failed:', refreshError); // Clear tokens and redirect to login - localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME); - localStorage.removeItem(import.meta.env.VITE_REFRESH_TOKEN_NAME); + await removeToken(); + await removeRefreshToken(); window.location.href = '/auth/login'; } } @@ -106,17 +108,19 @@ const App: FC = () => { const [isLogin, setIsLogin] = useState<'checking' | 'isLogin' | 'isNotLogin'>('checking') useEffect(() => { - - if (localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)) { - setIsLogin('isLogin') - } else { - setIsLogin('isNotLogin') - if (window.location.href.split('auth').length === 1) { - window.location.href = Pages.auth.login + const checkLogin = async () => { + const token = await getToken(); + if (token) { + setIsLogin('isLogin') + } else { + setIsLogin('isNotLogin') + if (window.location.href.split('auth').length === 1) { + window.location.href = Pages.auth.login + } } } - - }, []) + checkLogin(); + }, []); return ( diff --git a/src/config/axios.ts b/src/config/axios.ts index 200d1bd..206a62e 100644 --- a/src/config/axios.ts +++ b/src/config/axios.ts @@ -1,4 +1,5 @@ import axios from "axios"; +import { getToken } from "./func"; // import { Pages } from "./Pages"; const axiosInstance = axios.create({ @@ -8,18 +9,13 @@ const axiosInstance = axios.create({ axiosInstance.interceptors.response.use( (response) => response, (error) => { - // if (error.response.status === 401) { - // localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME); - // window.location.href = Pages.auth.login; - // } return Promise.reject(error); } ); axiosInstance.interceptors.request.use(async function (config) { - const token = localStorage.getItem(import.meta.env.VITE_TOKEN_NAME) - ? localStorage.getItem(import.meta.env.VITE_TOKEN_NAME) - : ""; + const tokenValue = await getToken(); + const token = tokenValue ? tokenValue : ""; config.headers.Authorization = "Bearer " + token; return config; diff --git a/src/config/func.ts b/src/config/func.ts index ffaca05..0566b35 100644 --- a/src/config/func.ts +++ b/src/config/func.ts @@ -1,3 +1,5 @@ +import Cookie from "js-cookie"; + export function isEmail(input: string): boolean { const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; return emailRegex.test(input); @@ -29,3 +31,43 @@ export const timeAgo = (date: string | Date): string => { return "همین الان"; }; + +export const getToken = () => { + return Cookie.get(import.meta.env.VITE_TOKEN_NAME); +}; + +export const getRefreshToken = () => { + return Cookie.get(import.meta.env.VITE_REFRESH_TOKEN_NAME); +}; + +export const setToken = (token: string) => { + Cookie.set(import.meta.env.VITE_TOKEN_NAME, token, { + domain: ".danakcorp.com", + path: "/", + secure: true, // فقط روی HTTPS کار می‌کنه + sameSite: "Strict", // جلوگیری از حملات CSRF + }); +}; + +export const setRefreshToken = (refreshToken: string) => { + Cookie.set(import.meta.env.VITE_REFRESH_TOKEN_NAME, refreshToken, { + domain: ".danakcorp.com", + path: "/", + secure: true, + sameSite: "Strict", + }); +}; + +export const removeToken = () => { + Cookie.remove(import.meta.env.VITE_TOKEN_NAME, { + domain: ".danakcorp.com", + path: "/", + }); +}; + +export const removeRefreshToken = () => { + Cookie.remove(import.meta.env.VITE_REFRESH_TOKEN_NAME, { + domain: ".danakcorp.com", + path: "/", + }); +}; diff --git a/src/pages/auth/components/LoginStep2.tsx b/src/pages/auth/components/LoginStep2.tsx index b1978af..e09d99e 100644 --- a/src/pages/auth/components/LoginStep2.tsx +++ b/src/pages/auth/components/LoginStep2.tsx @@ -12,6 +12,8 @@ import { Pages } from '../../../config/Pages' import { useLoginWithOtp, useOtpVerify } from '../hooks/useAuthData' import { ErrorType } from '../../../helpers/types' import { toast } from 'react-toastify' +import { setRefreshToken } from '../../../config/func' +import { setToken } from '../../../config/func' const LoginStep2: FC = () => { @@ -37,8 +39,8 @@ const LoginStep2: FC = () => { } otpVerify.mutate(params, { onSuccess(data) { - localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token) - localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token) + setToken(data?.data?.accessToken?.token) + setRefreshToken(data?.data?.refreshToken?.token) window.location.href = Pages.dashboard }, onError(error: ErrorType) { diff --git a/src/pages/auth/components/LoginStep3.tsx b/src/pages/auth/components/LoginStep3.tsx index d938437..c6f9dfb 100644 --- a/src/pages/auth/components/LoginStep3.tsx +++ b/src/pages/auth/components/LoginStep3.tsx @@ -13,6 +13,8 @@ import ArrowLeftIcon from '../../../assets/images/arrow-left.svg' import { useLoginWithPassword } from '../hooks/useAuthData' import { toast } from 'react-toastify' import { ErrorType } from '../../../helpers/types' +import { setRefreshToken } from '../../../config/func' +import { setToken } from '../../../config/func' const LoginStep3: FC = () => { @@ -33,8 +35,8 @@ const LoginStep3: FC = () => { onSubmit(values) { loginWithPassword.mutate(values, { onSuccess(data) { - localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token) - localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token) + setToken(data?.data?.accessToken?.token) + setRefreshToken(data?.data?.refreshToken?.token) window.location.href = Pages.dashboard }, onError(error: ErrorType) { diff --git a/src/pages/auth/components/RegisterStep2.tsx b/src/pages/auth/components/RegisterStep2.tsx index 483bec2..b85d319 100644 --- a/src/pages/auth/components/RegisterStep2.tsx +++ b/src/pages/auth/components/RegisterStep2.tsx @@ -11,6 +11,8 @@ import { useRegister } from '../hooks/useAuthData' import { ErrorType } from '../../../helpers/types' import { toast } from 'react-toastify' import { Pages } from '../../../config/Pages' +import { setToken } from '../../../config/func' +import { setRefreshToken } from '../../../config/func' const RegisterStep2: FC = () => { @@ -47,8 +49,8 @@ const RegisterStep2: FC = () => { onSubmit(values) { register.mutate(values, { onSuccess(data) { - localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token) - localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token) + setToken(data?.data?.accessToken?.token) + setRefreshToken(data?.data?.refreshToken?.token) window.location.href = Pages.dashboard }, onError(error: ErrorType) { diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx index e3cc58c..62b91b7 100644 --- a/src/shared/SideBarItem.tsx +++ b/src/shared/SideBarItem.tsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom' import { clx } from '../helpers/utils' import { Pages } from '../config/Pages' import { useLogout } from '../pages/auth/hooks/useAuthData' +import { removeToken } from '../config/func' +import { removeRefreshToken } from '../config/func' type Props = { icon: ReactNode, @@ -19,7 +21,8 @@ const SideBarItem: FC = (props: Props) => { const handleLogout = async () => { await logout.mutateAsync() - localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME) + removeToken() + removeRefreshToken() window.location.href = Pages.auth.login }