From 0888df153f4e649606ff25dbf4954de8d87ba17d Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Sun, 7 Jun 2026 22:44:31 +0200
Subject: [PATCH] check callback from lichess server

---
 src/components/LichessButton.tsx | 10 ++++-----
 src/hooks/useLichess.ts          | 31 ++++++++++++++++++++++++++++
 src/hooks/useLichessCallback.ts  | 17 ++++++++++++++++
 src/lib/encodeDecode.ts          | 12 +++++++++++
 src/pages/Callback.tsx           | 13 ++++++++++++
 src/pages/Chessboard.tsx         |  2 +-
 src/routeTree.gen.ts             | 24 +++++++++++++++++++---
 src/routes/callback.tsx          | 19 +++++++++++++++++
 src/server/lichess.ts            | 35 ++++++++++++++++++++++++++++++++
 9 files changed, 154 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/useLichess.ts
 create mode 100644 src/hooks/useLichessCallback.ts
 create mode 100644 src/lib/encodeDecode.ts
 create mode 100644 src/pages/Callback.tsx
 create mode 100644 src/routes/callback.tsx
 create mode 100644 src/server/lichess.ts

diff --git a/src/components/LichessButton.tsx b/src/components/LichessButton.tsx
index c4cab01..31a1c52 100644
--- a/src/components/LichessButton.tsx
+++ b/src/components/LichessButton.tsx
@@ -1,12 +1,12 @@
-interface IProps {
-	onClickHandler: () => void;
-}
+import { useLichess } from "#/hooks/useLichess.ts";
+
+const LichessButton = () => {
+	const { lichessLogin, lichessLogout } = useLichess();
 
-const LichessButton = ({ onClickHandler }: IProps) => {
 	return (
 		<button
 			className="text-(--accent) border rounded-xl px-6 py-3 cursor-pointer flex items-center gap-2 p-2 hover:bg-(--accent) hover:text-(--header-bg) transition-colors duration-300 ease-in-out"
-			onClick={onClickHandler}
+			onClick={lichessLogin}
 			type="button"
 		>
 			<div className="w-6 h-6">
diff --git a/src/hooks/useLichess.ts b/src/hooks/useLichess.ts
new file mode 100644
index 0000000..5a9a8c3
--- /dev/null
+++ b/src/hooks/useLichess.ts
@@ -0,0 +1,31 @@
+import { useServerFn } from "@tanstack/react-start";
+import { useState } from "react";
+import { getToken, login } from "#/server/lichess.ts";
+
+export const useLichess = () => {
+	const [lichessUser, setLichessUser] = useState();
+
+	const triggerLogin = useServerFn(login);
+	const trigggerGetToken = useServerFn(getToken);
+
+	console.log("Lichess User:", lichessUser);
+
+	const lichessTokenVerification = async ({ code }) => {
+		await trigggerGetToken();
+	};
+
+	const lichessLogin = async () => {
+		// TODO add try/catch with toast
+		await triggerLogin();
+	};
+
+	const lichessLogout = () => {
+		console.log("Lichess Logout");
+	};
+
+	return {
+		lichessLogin,
+		lichessLogout,
+		lichessTokenVerification,
+	};
+};
diff --git a/src/hooks/useLichessCallback.ts b/src/hooks/useLichessCallback.ts
new file mode 100644
index 0000000..cd29550
--- /dev/null
+++ b/src/hooks/useLichessCallback.ts
@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { useLichess } from "#/hooks/useLichess.ts";
+
+interface IProps {
+	code: string;
+}
+
+export const useLichessCallback = ({ code }: IProps) => {
+	const { lichessTokenVerification } = useLichess();
+
+	useEffect(() => {
+		if (!code) return;
+
+		const response = lichessTokenVerification({ code });
+		console.log("Response:", response);
+	}, [code, lichessTokenVerification]);
+};
diff --git a/src/lib/encodeDecode.ts b/src/lib/encodeDecode.ts
new file mode 100644
index 0000000..3343db3
--- /dev/null
+++ b/src/lib/encodeDecode.ts
@@ -0,0 +1,12 @@
+import { createHash } from "node:crypto";
+
+export const base64UrlEncode = (str: Buffer) => {
+	return str
+		.toString("base64")
+		.replace(/\+/g, "-")
+		.replace(/\//g, "_")
+		.replace(/=/g, "");
+};
+
+export const sha256 = (buffer: string) =>
+	createHash("sha256").update(buffer).digest();
diff --git a/src/pages/Callback.tsx b/src/pages/Callback.tsx
new file mode 100644
index 0000000..607abee
--- /dev/null
+++ b/src/pages/Callback.tsx
@@ -0,0 +1,13 @@
+import { getRouteApi } from "@tanstack/react-router";
+import { useLichessCallback } from "#/hooks/useLichessCallback.ts";
+
+const routeApi = getRouteApi("/callback");
+
+const Callback = () => {
+	const { code } = routeApi.useSearch();
+	useLichessCallback({ code });
+
+	return <div>{code}</div>;
+};
+
+export default Callback;
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index ffa0c75..e0fc36d 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -36,7 +36,7 @@ const Chessboard = () => {
 	return (
 		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
 			<Section title="Convert PGN to PDF">
-				<LichessButton onClickHandler={() => console.log("Lichess Login")} /> or{" "}
+				<LichessButton /> or{" "}
 				<input
 					type="file"
 					id="file-input"
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index fdc42b8..1456544 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as ContactRouteImport } from './routes/contact'
 import { Route as ChessboardRouteImport } from './routes/chessboard'
+import { Route as CallbackRouteImport } from './routes/callback'
 import { Route as IndexRouteImport } from './routes/index'
 
 const ContactRoute = ContactRouteImport.update({
@@ -23,6 +24,11 @@ const ChessboardRoute = ChessboardRouteImport.update({
   path: '/chessboard',
   getParentRoute: () => rootRouteImport,
 } as any)
+const CallbackRoute = CallbackRouteImport.update({
+  id: '/callback',
+  path: '/callback',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -31,30 +37,34 @@ const IndexRoute = IndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/callback': typeof CallbackRoute
   '/chessboard': typeof ChessboardRoute
   '/contact': typeof ContactRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/callback': typeof CallbackRoute
   '/chessboard': typeof ChessboardRoute
   '/contact': typeof ContactRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/callback': typeof CallbackRoute
   '/chessboard': typeof ChessboardRoute
   '/contact': typeof ContactRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/chessboard' | '/contact'
+  fullPaths: '/' | '/callback' | '/chessboard' | '/contact'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/chessboard' | '/contact'
-  id: '__root__' | '/' | '/chessboard' | '/contact'
+  to: '/' | '/callback' | '/chessboard' | '/contact'
+  id: '__root__' | '/' | '/callback' | '/chessboard' | '/contact'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  CallbackRoute: typeof CallbackRoute
   ChessboardRoute: typeof ChessboardRoute
   ContactRoute: typeof ContactRoute
 }
@@ -75,6 +85,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ChessboardRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/callback': {
+      id: '/callback'
+      path: '/callback'
+      fullPath: '/callback'
+      preLoaderRoute: typeof CallbackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -87,6 +104,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  CallbackRoute: CallbackRoute,
   ChessboardRoute: ChessboardRoute,
   ContactRoute: ContactRoute,
 }
diff --git a/src/routes/callback.tsx b/src/routes/callback.tsx
new file mode 100644
index 0000000..8d7b7b6
--- /dev/null
+++ b/src/routes/callback.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import Callback from "#/pages/Callback.tsx";
+
+const callbackSchema = z.object({
+	code: z.string(),
+	state: z.string(),
+});
+
+// type CallbackProps = z.infer<typeof callbackSchema>;
+
+export const Route = createFileRoute("/callback")({
+	validateSearch: (search) => callbackSchema.parse(search),
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <Callback />;
+}
diff --git a/src/server/lichess.ts b/src/server/lichess.ts
new file mode 100644
index 0000000..de4bed4
--- /dev/null
+++ b/src/server/lichess.ts
@@ -0,0 +1,35 @@
+import { randomBytes } from "node:crypto";
+import { redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { env } from "#/env.ts";
+import { base64UrlEncode, sha256 } from "#/lib/encodeDecode.ts";
+
+export const getToken = createServerFn({ method: "POST" }).handler(async () => {
+	console.log("getTokens");
+});
+
+export const login = createServerFn({ method: "POST" }).handler(async () => {
+	const createVerifier = () => base64UrlEncode(randomBytes(32));
+	const createChallenge = (verifier: string) =>
+		base64UrlEncode(sha256(verifier));
+
+	const verifier = createVerifier();
+	const challenge = createChallenge(verifier);
+
+	const params = new URLSearchParams({
+		response_type: "code",
+		client_id: env.LICHESS_CLIENT_ID || "",
+		redirect_uri: `${process.env.NODE_ENV === "production" ? `https://${env.LICHESS_CLIENT_ID}/callback` : "http://localhost:3000/callback"}`,
+		scope: "study:read",
+		code_challenge_method: "S256",
+		code_challenge: challenge,
+	});
+
+	throw redirect({
+		href: `https://lichess.org/oauth?${params.toString()}`,
+		statusCode: 302,
+		headers: {
+			"Set-Cookie": `lichess_oauth_verifier=${verifier}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=600`, // Expires in 10 mins
+		},
+	});
+});