diff --git a/src/components/auth/AccountSwitcherModal.tsx b/src/components/auth/AccountSwitcherModal.tsx index ecbbf8d..71cfecd 100644 --- a/src/components/auth/AccountSwitcherModal.tsx +++ b/src/components/auth/AccountSwitcherModal.tsx @@ -12,6 +12,7 @@ import { AiOutlineClose } from "react-icons/ai"; import { Avatar } from "../../features/profile"; import getUserById from "../../hooks/getUserById"; +import useCrossDomainStorage from "../../hooks/useCrossDomainStorage"; import styles from "./styles/account-switcher-modal.module.css"; @@ -34,13 +35,15 @@ export const AccountSwitcherModal = forwardRef< >((props, ref) => { const { onClose } = props; const { session } = useOxySession(); + const { get, set } = useCrossDomainStorage(); const [user, setUser] = useState(null); const [error, setError] = useState(null); useEffect(() => { const fetchUser = async () => { try { - const fetchedUser = await getUserById(session?.user?.id); + const clientKey = get("clientKey"); + const fetchedUser = await getUserById(clientKey); setUser(fetchedUser); } catch (error) { if (error instanceof Error) { @@ -54,13 +57,14 @@ export const AccountSwitcherModal = forwardRef< if (session) { fetchUser(); } - }, [session]); + }, [session, get]); if (!session) return null; const handleBackdropClick = (e: React.MouseEvent) => { e.stopPropagation(); if (e.currentTarget === e.target) { + set("clientKey", ""); onClose(); } }; diff --git a/src/components/auth/SignInButton.tsx b/src/components/auth/SignInButton.tsx index 97fb285..d258c3c 100644 --- a/src/components/auth/SignInButton.tsx +++ b/src/components/auth/SignInButton.tsx @@ -1,6 +1,7 @@ import React from "react"; import styles from "./styles/sign-in-button.module.css"; import { OxyLogo } from "../assets/oxy-logo"; +import useCrossDomainStorage from "../../hooks/useCrossDomainStorage"; export const SignInButton = ({ icon = , @@ -11,11 +12,14 @@ export const SignInButton = ({ text?: string; callback?: string; }) => { + const { set } = useCrossDomainStorage(); + const onClick = () => { if (typeof window !== "undefined") { const redirectUrl = `https://auth.oxy.so/?callback=${encodeURIComponent( callback )}`; + set("clientKey", ""); // Clear the clientKey before redirecting window.location.href = redirectUrl; } }; diff --git a/src/hooks/useCrossDomainStorage.ts b/src/hooks/useCrossDomainStorage.ts new file mode 100644 index 0000000..a5b5e3a --- /dev/null +++ b/src/hooks/useCrossDomainStorage.ts @@ -0,0 +1,30 @@ +import { useEffect } from "react"; + +const useCrossDomainStorage = () => { + const set = (key: string, value: string) => { + localStorage.setItem(key, value); + window.postMessage({ key, value }, "*"); + }; + + const get = (key: string) => { + return localStorage.getItem(key); + }; + + const handlePostMessage = (event: MessageEvent) => { + if (event.origin !== window.location.origin) { + const { key, value } = event.data; + localStorage.setItem(key, value); + } + }; + + useEffect(() => { + window.addEventListener("message", handlePostMessage); + return () => { + window.removeEventListener("message", handlePostMessage); + }; + }, []); + + return { set, get }; +}; + +export default useCrossDomainStorage; diff --git a/src/hooks/useOxySession.ts b/src/hooks/useOxySession.ts index 1d0203e..e9f9021 100644 --- a/src/hooks/useOxySession.ts +++ b/src/hooks/useOxySession.ts @@ -5,6 +5,7 @@ import localforage from "localforage"; import { OXY_AUTH_URL } from "../config"; import { UserRole } from "../types"; +import useCrossDomainStorage from "./useCrossDomainStorage"; interface SessionModel { user: { @@ -49,10 +50,12 @@ export const useSessionStore = create((set) => { // If the session ID was not found in the URL parameters, get it from local storage if (!clientKey) { - clientKey = await localforage.getItem("clientKey"); + const { get } = useCrossDomainStorage(); + clientKey = get("clientKey"); } else { // If the session ID was found in the URL parameters, set it in local storage - await localforage.setItem("clientKey", clientKey); + const { set } = useCrossDomainStorage(); + set("clientKey", clientKey); } const response = await axios.get(