check for existing user on remount

src/components/LichessButton.tsx

@@ -3,7 +3,7 @@ import { useLichessOAuth } from "#/hooks/useLichessOAuth.ts";
 
 const LichessButton = () => {
 	const { lichessLogin, lichessLogout } = useLichessOAuth();
-	const { user, setUser, logout } = useLichessUser();
+	const { user } = useLichessUser();
 
 	const onClickHandler = () => {
 		return user?.isLoggedIn ? lichessLogout() : lichessLogin();

src/context/LichessUserContext.tsx

@@ -1,12 +1,17 @@
+import { useServerFn } from "@tanstack/react-start";
+
 import {
 	createContext,
 	type Dispatch,
 	type ReactNode,
 	type SetStateAction,
 	useContext,
+	useEffect,
 	useState,
 } from "react";
 
+import { getSession } from "#/server/lichess.ts";
+
 interface ILichessUser {
 	username: string;
 	id: string;
@@ -15,7 +20,7 @@ interface ILichessUser {
 
 interface ILichessUserContextType {
 	user: ILichessUser | null;
-	setUser: Dispatch<SetStateAction<ILichessUser | null>>
+	setUser: Dispatch<SetStateAction<ILichessUser | null>>;
 }
 
 const LichessUserContext = createContext<ILichessUserContextType | undefined>(
@@ -24,8 +29,20 @@ const LichessUserContext = createContext<ILichessUserContextType | undefined>(
 
 export const LichessUserProvider = ({ children }: { children: ReactNode }) => {
 	const [user, setUser] = useState<ILichessUser | null>(null);
+	const getSessionFn = useServerFn(getSession);
 
-	// TODO useEffect to check and login user on mount
+	useEffect(() => {
+		(async () => {
+			const session = await getSessionFn();
+			if (session) {
+				setUser({
+					username: session.username,
+					id: session.id,
+					isLoggedIn: true,
+				});
+			}
+		})();
+	}, [getSessionFn]);
 
 	return (
 		<LichessUserContext.Provider value={{ user, setUser }}>

src/hooks/useLichessOAuth.ts

@@ -1,6 +1,13 @@
 import { useServerFn } from "@tanstack/react-start";
 import { useLichessUser } from "#/context/LichessUserContext.tsx";
-import { getToken, getUser, login, setSession, logout } from "#/server/lichess.ts";
+import {
+	getSession,
+	getToken,
+	getUser,
+	login,
+	logout,
+	setSession,
+} from "#/server/lichess.ts";
 
 interface ITokenData {
 	access_token: string;
@@ -12,10 +19,11 @@ export const useLichessOAuth = () => {
 	const { setUser } = useLichessUser();
 
 	const loginFn = useServerFn(login);
-	const logoutFn = useServerFn(logout)
+	const logoutFn = useServerFn(logout);
 	const accessTokenFn = useServerFn(getToken);
 	const getUserFn = useServerFn(getUser);
 	const setSessionFn = useServerFn(setSession);
+	const getSessionFn = useServerFn(getSession);
 
 	const lichessAccessToken = async ({ code }: { code: string }) => {
 		return accessTokenFn({ data: { code } });
@@ -50,11 +58,16 @@ export const useLichessOAuth = () => {
 		setUser(null);
 	};
 
+	const getLichessSession = async () => {
+		return getSessionFn();
+	};
+
 	return {
 		lichessLogin,
 		lichessLogout,
 		lichessAccessToken,
 		getLichessUser,
 		setLichessUser,
+		getLichessSession,
 	};
 };

src/server/lichess.ts

@@ -1,7 +1,11 @@
 import { randomBytes } from "node:crypto";
 import { redirect } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
-import { getCookie, setCookie, deleteCookie } from "@tanstack/react-start/server";
+import {
+	deleteCookie,
+	getCookie,
+	setCookie,
+} from "@tanstack/react-start/server";
 import { env } from "#/env.ts";
 import { base64UrlEncode, sha256 } from "#/lib/encodeDecode.ts";
 
@@ -13,13 +17,12 @@ const getRedirectUri = () =>
 		? `https://${env.LICHESS_CLIENT_ID}/callback`
 		: "http://localhost:3000/callback";
 
-// TODO fix and check
 export const getSession = createServerFn({ method: "GET" }).handler(
 	async () => {
 		const session = getCookie("lichess-session");
 		if (!session) return null;
 		try {
-			return JSON.parse(session) as { username: string };
+			return JSON.parse(session) as { username: string; id: string };
 		} catch {
 			return null;
 		}