feat: complete login, logout flow

Author: betich

apps/web/src/app/auth/callback/page.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { env } from "@/env";
+import { client } from "@/lib/client";
 
 export default function AuthCallback() {
 	const router = useRouter();
@@ -40,22 +40,22 @@ export default function AuthCallback() {
 					return;
 				}
 
-				// Send tokens to backend
-				const response = await fetch(`${env.NEXT_PUBLIC_BACKEND_URL}/api/auth/callback`, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify({
+				const response = await client.api.auth.callback.post(
+					{
 						access_token: accessToken,
 						refresh_token: refreshToken,
-					}),
-					credentials: "include", // Important for cookies
-				});
+					},
+					{
+						headers: {
+							"Content-Type": "application/json",
+							credentials: "include",
+						},
+					}
+				);
 
-				const result = await response.json();
+				const result = response.data;
 
-				if (response.ok && result.success) {
+				if (response.status === 200 && result?.user) {
 					setStatus("success");
 					setMessage("Authentication successful!");
 					setUserInfo(result.user);
@@ -68,11 +68,11 @@ export default function AuthCallback() {
 
 					// Redirect to your desired page after a delay
 					setTimeout(() => {
-						router.push("/test");
+						router.push("/dashboard");
 					}, 3000);
 				} else {
 					setStatus("error");
-					setMessage(result.error || "Authentication failed");
+					setMessage(response.error?.value?.summary || "Authentication failed");
 				}
 			} catch (error) {
 				console.error("Auth callback error:", error);

apps/web/src/app/auth/login/page.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { SIGN_IN_LINK } from "@/config/link";
 import { env } from "@/env";
+import { client } from "@/lib/client";
 
 interface UserInfo {
 	id: string;
@@ -13,6 +16,7 @@ interface UserInfo {
 
 export default function TestPage() {
 	const [user, setUser] = useState<UserInfo | null>(null);
+	const router = useRouter();
 
 	useEffect(() => {
 		// Check if user is logged in
@@ -24,17 +28,25 @@ export default function TestPage() {
 
 	const handleGoogleSignIn = () => {
 		// Redirect to your backend's Google auth endpoint
-		window.location.href = `${env.NEXT_PUBLIC_BACKEND_URL}/api/auth/google`;
+		router.push(SIGN_IN_LINK);
 	};
 
 	const handleSignOut = () => {
 		localStorage.removeItem("user");
 		setUser(null);
-		// Optionally, also clear the backend session
-		fetch(`${env.NEXT_PUBLIC_BACKEND_URL}api/auth/logout`, {
-			method: "POST",
-			credentials: "include",
-		}).catch(console.error);
+
+		client.api.auth.logout
+			.post(
+				{},
+				{
+					headers: {
+						credentials: "include",
+					},
+				}
+			)
+			.catch((error) => {
+				console.error("Logout failed:", error);
+			});
 	};
 
 	if (user) {

apps/web/src/app/dashboard/layout.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+// Auth Guard for Dashboard Page
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { client } from "@/lib/client";
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+	const [isAuthenticated, setIsAuthenticated] = useState(false);
+	const router = useRouter();
+
+	useEffect(() => {
+		// Check if user is logged in
+		const storedUser = localStorage.getItem("user");
+		if (storedUser) {
+			setIsAuthenticated(true);
+		} else {
+			// Redirect to login page if not authenticated
+			router.push("/auth/login");
+		}
+	}, [router]);
+
+	if (!isAuthenticated) {
+		return <div>Loading...</div>; // or a loading spinner
+	}
+
+	const handleLogout = () => {
+		client.api.auth.logout
+			.post(
+				{},
+				{
+					headers: {
+						credentials: "include",
+					},
+				}
+			)
+			.then(() => {
+				localStorage.removeItem("user");
+				setIsAuthenticated(false);
+				router.push("/auth/login");
+			})
+			.catch((error) => {
+				console.error("Logout failed:", error);
+			});
+	};
+
+	return (
+		<div className="min-h-screen flex flex-col">
+			<header className="bg-gray-800 text-white flex justify-between p-4">
+				<h1 className="text-xl">Dashboard</h1>
+				<button
+					type="button"
+					onClick={() => handleLogout()}
+					className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+				>
+					Logout
+				</button>
+			</header>
+			<main className="flex-1 p-6 bg-gray-100">{children}</main>
+		</div>
+	);
+}

apps/web/src/app/dashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function DashBoardPage() {
+	return <div>Hello fellow traveller.</div>;
+}

apps/web/src/config/link.ts

@@ -0,0 +1,5 @@
+import { env } from "@/env";
+
+const REDIRDCT_URI = encodeURIComponent(`${env.NEXT_PUBLIC_APP_URL}/auth/callback`);
+
+export const SIGN_IN_LINK = `https://qtrkroiyvtnwdpjscyvp.supabase.co/auth/v1/authorize?provider=google&redirect_to=${REDIRDCT_URI}&scopes=email%20profile`;