ENG-1762 Rewrite all supabase access as server-side components (#1042)

Author: maparent

apps/website/app/(home)/auth/error/page.tsx

@@ -0,0 +1,43 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@repo/ui/components/ui/card";
+
+const Page = async ({
+  searchParams,
+}: {
+  searchParams: Promise<{ error: string }>;
+}) => {
+  const params = await searchParams;
+
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-2xl">
+                Sorry, something went wrong.
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {params?.error ? (
+                <p className="text-muted-foreground text-sm">
+                  Code error: {params.error}
+                </p>
+              ) : (
+                <p className="text-muted-foreground text-sm">
+                  An unspecified error occurred.
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

apps/website/app/(home)/auth/token/page.tsx

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "~/utils/supabase/server";
+import internalError from "~/utils/internalErrorSsr";
+
+export const GET = async (request: NextRequest): Promise<NextResponse> => {
+  const params = request.nextUrl.searchParams;
+  const token = params.get("t");
+  const url = params.get("url");
+  try {
+    if (typeof token !== "string") throw new Error("Please provide a token");
+    if (typeof url !== "string") throw new Error("Please provide a single URL");
+    if (
+      url.indexOf("://") >= 0 &&
+      !url.startsWith(request.nextUrl.origin + "/")
+    )
+      throw new Error("Absolute URLs should be within the application");
+
+    const client = await createClient();
+    const result = await client.rpc("get_secret_token", {
+      token,
+    });
+    if (result.error) {
+      internalError({ error: result.error, type: "get-secret-token" });
+      throw new Error("Could not connect to DiscourseGraphs");
+    }
+    if (result.data == null) {
+      internalError({ error: "missing token", type: "get-secret-token" });
+      throw new Error("Could not retrieve information, please try again.");
+    }
+    if (typeof result.data !== "string") {
+      internalError({
+        error: "payload-not-string",
+        type: "get-secret-token",
+      });
+      throw new Error(
+        "DiscourseGraphs configuration error, the team has been warned",
+      );
+    }
+    const data = JSON.parse(result.data) as {
+      /* eslint-disable @typescript-eslint/naming-convention */
+      access_token: string;
+      refresh_token: string;
+      /* eslint-enable @typescript-eslint/naming-convention */
+    };
+    if (
+      !data ||
+      typeof data !== "object" ||
+      !data.access_token ||
+      !data.refresh_token
+    ) {
+      internalError({ error: "misshaped-payload", type: "get-secret-token" });
+      throw new Error(
+        "DiscourseGraphs configuration error, the team has been warned",
+      );
+    }
+    const response = await client.auth.setSession(data);
+    if (response.error) {
+      throw response.error;
+    }
+  } catch (error) {
+    return NextResponse.redirect(
+      new URL(
+        "/auth/error?error=" +
+          encodeURIComponent(
+            error instanceof Error
+              ? error.message
+              : "Unkown error while logging you in.",
+          ),
+        request.nextUrl,
+      ),
+    );
+  }
+  return NextResponse.redirect(
+    new URL(url, url.startsWith("http") ? undefined : request.nextUrl),
+  );
+};

apps/website/app/(home)/auth/token/route.ts

@@ -3,25 +3,24 @@ import { NextResponse, type NextRequest } from "next/server";
 import { envContents } from "@repo/database/dbDotEnv";
 
 // This would allow to create Next pages gated by a login middleware,
-// as described here: https://nextjs.org/docs/app/api-reference/file-conventions/middleware
-// Not usable yet, waiting for ENG-373
-// Inspired by https://supabase.com/ui/docs/nextjs/password-based-auth
+// as described here: https://supabase.com/docs/guides/auth/server-side/creating-a-client
 
 export const updateSession = async (request: NextRequest) => {
+  let supabaseResponse = NextResponse.next({
+    request,
+  });
   const dbEnv = envContents();
   const supabaseUrl = dbEnv.SUPABASE_URL;
   const supabaseKey = dbEnv.SUPABASE_PUBLISHABLE_KEY;
+  if (supabaseUrl === undefined || supabaseKey === undefined)
+    throw new Error("Configuration error: supabase variables not configured.");
 
-  if (!supabaseUrl || !supabaseKey) {
-    throw new Error("Missing required Supabase environment variables");
-  }
-
-  let supabaseResponse = NextResponse.next({ request });
-
+  // With Fluid compute, don't put this client in a global environment
+  // variable. Always create a new one on each request.
   const supabase = createServerClient(supabaseUrl, supabaseKey, {
     cookies: {
       getAll: () => request.cookies.getAll(),
-      setAll: (cookiesToSet) => {
+      setAll: (cookiesToSet, headers) => {
         cookiesToSet.forEach(({ name, value }) =>
           request.cookies.set(name, value),
         );
@@ -31,33 +30,39 @@ export const updateSession = async (request: NextRequest) => {
         cookiesToSet.forEach(({ name, value, options }) =>
           supabaseResponse.cookies.set(name, value, options),
         );
+        Object.entries(headers).forEach(([key, value]) =>
+          supabaseResponse.headers.set(key, value),
+        );
       },
     },
   });
 
   // Do not run code between createServerClient and
-  // supabase.auth.getUser(). A simple mistake could make it very hard to debug
+  // supabase.auth.getClaims(). A simple mistake could make it very hard to debug
   // issues with users being randomly logged out.
 
-  // IMPORTANT: DO NOT REMOVE auth.getUser()
+  // IMPORTANT: If you remove getClaims() and you use server-side rendering
+  // with the Supabase client, your users may be randomly logged out.
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data } = await supabase.auth.getClaims();
 
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  /* Wait on this until we have login
+  const user = data?.claims;
 
   if (
     !user &&
-    !request.nextUrl.pathname.startsWith("/login") &&
     !request.nextUrl.pathname.startsWith("/auth")
   ) {
     // no user, potentially respond by redirecting the user to the login page
     const url = request.nextUrl.clone();
     url.pathname = "/auth/login";
     return NextResponse.redirect(url);
   }
+  */
 
-  // IMPORTANT: You *must* return the supabaseResponse object as it is.
-  // If you're creating a new response object with NextResponse.next() make sure to:
+  // IMPORTANT: You *must* return the supabaseResponse object as it is. If you're
+  // creating a new response object with NextResponse.next() make sure to:
   // 1. Pass the request in it, like so:
   //    const myNewResponse = NextResponse.next({ request })
   // 2. Copy over the cookies, like so:

apps/website/app/components/auth/LoginWithToken.tsx

@@ -0,0 +1,12 @@
+import { type NextRequest } from "next/server";
+import { updateSession } from "~/utils/supabase/proxy";
+
+export const proxy = async (request: NextRequest) =>
+  await updateSession(request);
+
+export const config = {
+  matcher: [
+    /* Only apply to /auth paths */
+    "/(auth/.*)",
+  ],
+};