wip

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "request": "launch",
+            "name": "DEBUG",
+            "type": "node",
+            "program": "${workspaceFolder}/main.ts",
+            "cwd": "${workspaceFolder}",
+            "runtimeExecutable": "C:\\Users\\kinso\\.deno\\bin\\deno.EXE",
+            "runtimeArgs": [
+                "run",
+                "--inspect-wait",
+                "--allow-all"
+            ],
+            "attachSimplePort": 9229
+        }
+    ]
+}

.vscode/settings.json

@@ -1,20 +1,26 @@
 {
-  "deno.enable": true,
-  "deno.lint": true,
-  "editor.defaultFormatter": "denoland.vscode-deno",
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
-  },
-  "css.customData": [
-    ".vscode/tailwind.json"
-  ]
+	"deno.enable": true,
+	"deno.lint": true,
+	"editor.defaultFormatter": "denoland.vscode-deno",
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "vscode.typescript-language-features",
+		"editor.insertSpaces": false,
+		"editor.tabSize": 4,
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "vscode.typescript-language-features",
+		"editor.insertSpaces": false,
+		"editor.tabSize": 4,
+	},
+	"[javascript]": {
+		"editor.defaultFormatter": "denoland.vscode-deno"
+	},
+	"[jsonc]": {
+		"editor.insertSpaces": false,
+		"editor.tabSize": 4,
+		"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"css.customData": [
+		".vscode/tailwind.json"
+	]
 }

deno.json

@@ -1,39 +1,41 @@
 {
-  "lock": false,
-  "tasks": {
-    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
-    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
-    "manifest": "deno task cli manifest $(pwd)",
-    "start": "deno run -A --watch=static/,routes/ dev.ts",
-    "build": "deno run -A dev.ts build",
-    "preview": "deno run -A main.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update ."
-  },
-  "lint": {
-    "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
-    }
-  },
-  "exclude": [
-    "**/_fresh/*"
-  ],
-  "imports": {
-    "$fresh/": "https://deno.land/x/[email protected]/",
-    "preact": "https://esm.sh/[email protected]",
-    "preact/": "https://esm.sh/[email protected]/",
-    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
-    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "tailwindcss": "npm:[email protected]",
-    "tailwindcss/": "npm:/[email protected]/",
-    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
-    "$std/": "https://deno.land/[email protected]/"
-  },
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
-  },
-  "nodeModulesDir": true
+    "lock": false,
+    "tasks": {
+        "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+        "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+        "manifest": "deno task cli manifest $(pwd)",
+        "start": "deno run -A --watch=static/,routes/ dev.ts",
+        "build": "deno run -A dev.ts build",
+        "preview": "deno run -A main.ts",
+        "update": "deno run -A -r https://fresh.deno.dev/update ."
+    },
+    "lint": {
+        "rules": {
+            "tags": [
+                "fresh",
+                "recommended"
+            ]
+        }
+    },
+    "exclude": [
+        "**/_fresh/*"
+    ],
+    "imports": {
+        "$fresh/": "https://deno.land/x/[email protected]/",
+        "preact": "https://esm.sh/[email protected]",
+        "preact/": "https://esm.sh/[email protected]/",
+        "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+        "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+        "tailwindcss": "npm:[email protected]",
+        "tailwindcss/": "npm:/[email protected]/",
+        "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+        "$std/": "https://deno.land/[email protected]/",
+        "@supabase": "https://esm.sh/@supabase/supabase-js@2",
+        "@supabase/": "https://esm.sh/@supabase/supabase-js@2/"
+    },
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact"
+    },
+    "nodeModulesDir": true
 }

fresh.gen.ts

@@ -5,9 +5,11 @@
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $about from "./routes/about.tsx";
+import * as $api_auth from "./routes/api/auth.ts";
 import * as $api_joke from "./routes/api/joke.ts";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $index from "./routes/index.tsx";
+import * as $login from "./routes/login.tsx";
 import * as $Counter from "./islands/Counter.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
@@ -16,9 +18,11 @@ const manifest = {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/about.tsx": $about,
+    "./routes/api/auth.ts": $api_auth,
     "./routes/api/joke.ts": $api_joke,
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/index.tsx": $index,
+    "./routes/login.tsx": $login,
   },
   islands: {
     "./islands/Counter.tsx": $Counter,

routes/about.tsx

@@ -1,9 +1,24 @@
 import { Handlers } from "$fresh/server.ts";
 
+type Person = {
+    firstName: string,
+    lastName: string,
+};
+
+type RenderData<T> = {
+    data: T
+};
 
 export const handler: Handlers = {
     async GET(_req, ctx): Promise<Response> {
-        const resp = await ctx.render();
+		console.log("HELLO FROM THE ABOUT PAGE");
+
+        const person:Person = {
+            firstName: "Kinson",
+            lastName: "Digital",
+        };
+
+        const resp = await ctx.render(person);
 
         resp.headers.set("X-Custom-Header", "Hello");
 
@@ -12,11 +27,14 @@ export const handler: Handlers = {
 };
 
 
-export default function AboutPage() {
+export default function AboutPage({ data }: RenderData<Person>) {
     return (
         <main>
             <h1>About</h1>
             <p>This is the about page.</p>
+
+            <div>First Name: {data.firstName}</div>
+            <div>Last Name: {data.lastName}</div>
         </main>
     );
 }

routes/api/auth.ts

@@ -0,0 +1,21 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+
+export const callback: Handlers = {
+	async GET(req, ctx): Promise<Response> {
+		console.log("AUTH CALLBACK INVOKED");
+		const url = new URL(req.url);
+
+		const code = url.searchParams.get("code");
+
+		if (code == undefined) {
+			return new Response("User not authenticated", { status: 403 });
+		}
+
+		return new Response("User authenticated", {
+			status: 302,
+			headers: {
+				"Location": "/"
+			}
+		});
+	}
+};

routes/index.tsx

@@ -1,5 +1,16 @@
 import { useSignal } from "@preact/signals";
 import Counter from "../islands/Counter.tsx";
+import { Handlers } from "$fresh/server.ts";
+
+export const handler: Handlers = {
+    async GET(req, ctx): Promise<Response> {
+        const resp = await ctx.render();
+
+		// console.log("POST INVOKED FROM THE LOGIN");
+
+        return resp;
+    }
+}
 
 export default function Home() {
   const count = useSignal(3);

routes/login.tsx

@@ -0,0 +1,96 @@
+import { Handlers, PageProps } from "$fresh/server.ts";
+import { createClient } from "@supabase";
+import { createServerClient } from "npm:@supabase/ssr";
+
+type AuthResult = {
+	isAuthenticated: boolean;
+};
+
+export const handler: Handlers = {
+	async GET(req, ctx): Promise<Response> {
+		const url = Deno.env.get("SUPABASE_URL") ?? "";
+		const anonKey = Deno.env.get("SUPABASE_ANON_KEY") ?? "";
+
+		if (url === "" || anonKey === "") {
+			const errorMsg = `Server config error: The SUPABASE_URL and/or SUPABASE_ANON_KEY environment variables are not set.`;
+
+			return new Response(errorMsg, { status: 500 });
+		}
+
+		console.log("GET INVOKED WHEN SHOWING LOGIN PAGE");
+
+		return ctx.render();
+	},
+    async POST(req, ctx): Promise<Response> {
+		const url = Deno.env.get("SUPABASE_URL") ?? "";
+		const anonKey = Deno.env.get("SUPABASE_ANON_KEY") ?? "";
+
+		const supabase = createServerClient(url, anonKey, {
+			auth: {
+				detectSessionInUrl: true,
+				flowType: "pkce"
+			},
+			cookies: {}
+		});
+
+		// Google provides the login page when using this
+		const { data, error } = await supabase.auth.signInWithOAuth({
+			provider: "google",
+		});
+
+		const googleAuthPageUrl = data.url ?? "";
+
+		// console.log(`GAuth: ${googleAuthPageUrl}`);
+
+		const authResult: AuthResult = {
+			isAuthenticated: false
+		};
+
+		if (error) {
+			const errorMsg = `"There was an issue with the authentication process."\n${error.message}`;
+
+			return new Response(errorMsg, { status: 500 });
+		} else {
+			// Redirect to the google auth consent page
+			return new Response("Redirecting...", {
+				status: 302,
+				headers: {
+					"Location": googleAuthPageUrl
+				}
+			});
+		}
+    }
+};
+
+export default function LoginForm({ data }: PageProps<AuthResult | undefined>) {
+	const isAuthenticated = data?.isAuthenticated ?? true;
+
+	return (
+		<div class="flex justify-center items-center h-screen">
+			<form method="post">
+				<div class="flex flex-col">
+					<div class="flex flex-row">
+						<label class="mr-4">User Name: </label>
+
+						<input class="border-2 border-gray-400 basis-1/4"
+							type="text"
+							placeholder="Username" />
+					</div>
+
+					<div class="flex flex-row mt-4">
+						<label class="mr-4">Password: </label>
+
+						<input class="border-2 border-gray-400 basis-1/4"
+							type="password"
+							placeholder="Password" />
+					</div>
+
+					<button class="border-2 border-slate-800 mt-4"
+						type="submit">Login</button>
+
+					<label hidden={isAuthenticated} class="text-red-500 font-bold">Incorrect login or password.</label>
+				</div>
+			</form>
+		</div>
+	);
+}