basic login / logout lichess user

src/hooks/useLichess.ts

@@ -1,33 +0,0 @@
-import { useServerFn } from "@tanstack/react-start";
-import { useLichessUser } from "#/context/LichessUserContext.tsx";
-import { getToken, login } from "#/server/lichess.ts";
-
-export const useLichess = () => {
-	const { user, setUser, logout } = useLichessUser();
-
-	const triggerLogin = useServerFn(login);
-	const trigggerGetToken = useServerFn(getToken);
-
-	console.log("Lichess User:", user);
-
-	const lichessTokenVerification = async ({ code }) => {
-		await trigggerGetToken();
-	};
-
-	const lichessLogin = async () => {
-		// TODO add try/catch with toast
-		await triggerLogin();
-	};
-
-	const lichessLogout = () => {
-		console.log("Lichess Logout");
-		// TODO remove cookies
-		logout();
-	};
-
-	return {
-		lichessLogin,
-		lichessLogout,
-		lichessTokenVerification,
-	};
-};

src/hooks/useLichessCallback.ts

@@ -1,17 +1,26 @@
+import { useNavigate } from "@tanstack/react-router";
 import { useEffect } from "react";
-import { useLichess } from "#/hooks/useLichess.ts";
+import { useLichessOAuth } from "#/hooks/useLichessOAuth.ts";
 
 interface IProps {
 	code: string;
 }
 
 export const useLichessCallback = ({ code }: IProps) => {
-	const { lichessTokenVerification } = useLichess();
+	const navigate = useNavigate();
+
+	const { lichessAccessToken, getLichessUser, setLichessUser } =
+		useLichessOAuth();
 
 	useEffect(() => {
 		if (!code) return;
 
-		const response = lichessTokenVerification({ code });
-		console.log("Response:", response);
-	}, [code, lichessTokenVerification]);
+		(async () => {
+			const tokenData = await lichessAccessToken({ code });
+			const userData = await getLichessUser({ tokenData });
+			await setLichessUser({ username: userData.username, id: userData.id });
+			await navigate({ to: "/chessboard" });
+			// TODO set logging in state then redirect
+		})();
+	}, [code, lichessAccessToken, getLichessUser, setLichessUser, navigate]);
 };

src/hooks/useLichessOAuth.ts

@@ -0,0 +1,60 @@
+import { useServerFn } from "@tanstack/react-start";
+import { useLichessUser } from "#/context/LichessUserContext.tsx";
+import { getToken, getUser, login, setSession, logout } from "#/server/lichess.ts";
+
+interface ITokenData {
+	access_token: string;
+	expires_in: number;
+	token_type: string;
+}
+
+export const useLichessOAuth = () => {
+	const { setUser } = useLichessUser();
+
+	const loginFn = useServerFn(login);
+	const logoutFn = useServerFn(logout)
+	const accessTokenFn = useServerFn(getToken);
+	const getUserFn = useServerFn(getUser);
+	const setSessionFn = useServerFn(setSession);
+
+	const lichessAccessToken = async ({ code }: { code: string }) => {
+		return accessTokenFn({ data: { code } });
+	};
+
+	const setLichessUser = async ({
+		username,
+		id,
+	}: {
+		username: string;
+		id: string;
+	}) => {
+		await setSessionFn({ data: { username, id } });
+		setUser({ username, id, isLoggedIn: true });
+	};
+
+	const getLichessUser = async ({ tokenData }: { tokenData: ITokenData }) => {
+		return getUserFn({
+			data: { access_token: tokenData.access_token },
+		});
+	};
+
+	const lichessLogin = async () => {
+		// TODO add try/catch with toast
+		await loginFn();
+	};
+
+	const lichessLogout = async () => {
+		console.log("Lichess Logout");
+		// TODO remove cookies
+		await logoutFn();
+		setUser(null);
+	};
+
+	return {
+		lichessLogin,
+		lichessLogout,
+		lichessAccessToken,
+		getLichessUser,
+		setLichessUser,
+	};
+};