68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
|
import { useRouter } from "next/router";
|
||
|
|
import {
|
||
|
|
createContext,
|
||
|
|
useContext,
|
||
|
|
useEffect,
|
||
|
|
type FC,
|
||
|
|
type ReactNode,
|
||
|
|
} from "react";
|
||
|
|
import type { Session } from "~/server/api/trpc";
|
||
|
|
import { api } from "~/utils/api";
|
||
|
|
type SessionStatus = "pending" | "success" | "error";
|
||
|
|
export type SessionContextType = {
|
||
|
|
user: Session | null;
|
||
|
|
status: SessionStatus;
|
||
|
|
};
|
||
|
|
|
||
|
|
const SessionContext = createContext<SessionContextType>({
|
||
|
|
user: null,
|
||
|
|
status: "pending",
|
||
|
|
});
|
||
|
|
|
||
|
|
export const SessionProvider: FC<{ children: ReactNode }> = ({ children }) => {
|
||
|
|
const router = useRouter();
|
||
|
|
const utils = api.useUtils();
|
||
|
|
|
||
|
|
const {
|
||
|
|
data: user,
|
||
|
|
status,
|
||
|
|
isLoading,
|
||
|
|
} = api.auth.getSession.useQuery(undefined, {
|
||
|
|
refetchOnWindowFocus: true,
|
||
|
|
refetchOnReconnect: true,
|
||
|
|
refetchOnMount: true,
|
||
|
|
staleTime: 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
// Invalidate session on route change
|
||
|
|
useEffect(() => {
|
||
|
|
const handleRouteChange = () => {
|
||
|
|
if (isLoading) return;
|
||
|
|
utils.auth.getSession.invalidate().catch((error: Error) => {
|
||
|
|
console.error("Error invalidating session on route change:", error);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
router.events.on("routeChangeComplete", handleRouteChange);
|
||
|
|
return () => {
|
||
|
|
router.events.off("routeChangeComplete", handleRouteChange);
|
||
|
|
};
|
||
|
|
}, [router, utils]);
|
||
|
|
|
||
|
|
// Invalidate session if user is null
|
||
|
|
useEffect(() => {
|
||
|
|
if (!user) {
|
||
|
|
utils.auth.getSession.invalidate().catch((error: Error) => {
|
||
|
|
console.error("Error during session invalidation:", error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [user]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SessionContext.Provider value={{ user: user || null, status }}>
|
||
|
|
{children}
|
||
|
|
</SessionContext.Provider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const useSession = () => useContext(SessionContext);
|