OAuth cookie not found error

[kaitpw]

Hi, I'm quit inexperienced with oauth but I'm trying to get some working in my Fresh project. Unfortunately on both my dev and deployed sites I get this error on the servers console after I've gone through the whole oauth flow. Also if you have better suggestions for how to set up my plugin please tell. I think I may have ended up in this state from troubleshooting reasons but idk.

Error

...
Using redirect URI: http://localhost:8000/callback
An error occurred during route handling or page rendering.

  44 |         const auth = await getAuth();
  45 |         if (!auth) return new Response("Auth not configured", { status: 500 });
> 46 |         const { response } = await auth.handleCallback(req);
     |                                         ^
  47 |         return response;
  48 |       },
  49 |     },

Error: OAuth cookie not found
    at handleCallback (https://jsr.io/@deno/kv-oauth/0.11.0/lib/handle_callback.ts:67:43)
    at Object.handleCallback (https://jsr.io/@deno/kv-oauth/0.11.0/lib/create_helpers.ts:160:20)
    at Object.handler (file:///Users/kai-admin/A/PE/pm-upgrade/qr-repo/plugins/auth.ts:46:37)
    at eventLoopTick (ext:core/01_core.js:177:7)

My fresh Plugin

// plugins/auth.ts
import { createGoogleOAuthConfig, createHelpers, Helpers } from "@deno/kv-oauth";
import type { FreshContext, Plugin } from "$fresh/server.ts";
import { State } from "../types/app.ts";

async function getAuth() {
	try {
		const isProd = Deno.env.get("ENV") === "dev";
		const domain = isProd ? "http://localhost:8000" : "https://xxxx.deno.dev";
		const redirectUri = `${domain}/callback`;
		const oauth2Client = createGoogleOAuthConfig({
			redirectUri,
			scope: "https://www.googleapis.com/auth/userinfo.profile",
		});

		console.log(`Using redirect URI: ${redirectUri}`);

		const authHelpers = createHelpers(oauth2Client);
		return authHelpers;
	} catch (error) {
		throw error;
	}
}

export default {
	name: "auth",
	routes: [
		{
			path: "/callback",
			handler: async (req: Request) => {
				const auth = await getAuth();
				const { response } = await auth.handleCallback(req);
				return response;
			},
		},
		{
			path: "/api/auth",
			handler: async (req: Request) => {
				const auth = await getAuth();
				const { action } = await req.json();
				if (action === "signin") {
					const response = await auth.signIn(req);
					const url = response.headers.get("Location");
					return new Response(JSON.stringify({ url }), {
						headers: { "Content-Type": "application/json" },
					});
				}
				if (action === "signout") return await auth.signOut(req);
				return new Response("Invalid action", { status: 400 });
			},
		},
	],
	async handler(req: Request, ctx: FreshContext<State>) {
		const auth = await getAuth();

		if (!ctx.state.auth) {
			ctx.state.auth = { sessionId: undefined };
		}

		if (auth) {
			ctx.state.auth.sessionId = await auth.getSessionId(req);
		}

		return await ctx.next();
	},
} as Plugin;

[kaitpw]

Nevermind I figured it out. I feel like I might be missing something since noone else seems to have this problem so please tell me what you know anyways. For others with similar problems:

// plugins/auth.ts
import { createGoogleOAuthConfig, createHelpers, Helpers } from "@deno/kv-oauth";
import type { Plugin } from "$fresh/server.ts";
import { State } from "../types/app.ts";

// This seems to only be necessary in prod but not dev.
let authHelpers: Helpers;

// The Helpers must be wrapped in a function otherwise they cause build problems when deploying.
// createGoogleOAuthConfig won't be able to find its env variables.
function makeAuthHelpers() {
	if (authHelpers) return authHelpers;
	const isProd = Deno.env.get("ENV") !== "dev";
	const domain = isProd ? "https://positiveenergy.deno.dev" : "http://localhost:8000";
	console.log("Using Redirect URI:", domain);

	authHelpers = createHelpers(
		createGoogleOAuthConfig({
			redirectUri: `${domain}/callback`,
			scope: "https://www.googleapis.com/auth/userinfo.profile",
		}),
	);

	return authHelpers;
}

export default {
	name: "auth",
	routes: [
		{
			path: "/callback",
			handler: async (req) => {
				const { response } = await makeAuthHelpers().handleCallback(req);
				return response;
			},
		},
		{
			path: "/api/auth",
			handler: async (req) => {
				const { action } = await req.json();
				switch (action) {
					// CURCIAL!!! CORS is not allowed, **only page navigation**. When the original
					// response is simply forwarded through, it carries a 302, causing immediate
					// client redirect, and therefor CORS issue.
					case "signin": {
						const response = await makeAuthHelpers().signIn(req);
						const url = response.headers.get("Location");
						return new Response(JSON.stringify({ url }), {
							headers: response.headers,
						});
					}
					case "signout": {
						const response = await makeAuthHelpers().signOut(req);
						const url = response.headers.get("Location");
						return new Response(JSON.stringify({ url }));
					}
					default:
						return new Response("Invalid action", { status: 400 });
				}
			},
		},
	],
	middlewares: [
		{
			middleware: {
				handler: async (req, ctx) => {
					ctx.state.auth ??= { sessionId: undefined };
					ctx.state.auth.sessionId = await makeAuthHelpers().getSessionId(req);
					return await ctx.next();
				},
			},
			path: "/",
		},
	],
} as Plugin<State>;