src/app/page.tsx

@@ -4,6 +4,7 @@ import { HydrateClient } from "~/trpc/server";
 import FileGrid from "~/app/_components/FileGrid";
 import UploadForm from "~/app/_components/UploadForm";
 import { Toaster } from "react-hot-toast";
+import { signIn, signOut } from "next-auth/react";
 
 export default async function Home() {
   const session = await auth();
@@ -42,14 +43,12 @@ export default async function Home() {
           )}
           {!session?.user && (
           <div className="flex flex-col items-center gap-2">
-            <div className="flex flex-col items-center justify-center gap-4">
-              <Link
-                href={session ? "/api/auth/signout" : "/api/auth/signin"}
-                className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
-              >
-                {session ? "Sign out" : "Sign in"}
-              </Link>
-            </div>
+            <button
+              onClick={() => (session ? signOut() : signIn())}
+              className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
+            >
+              {session ? "Sign out" : "Sign in"}
+            </button>
           </div>
           )}
         </div>

src/env.js

@@ -19,6 +19,7 @@ export const env = createEnv({
     NODE_ENV: z
       .enum(["development", "test", "production"])
       .default("development"),
+    URL: z.string().url().optional(),
   },
 
   /**
@@ -40,6 +41,7 @@ export const env = createEnv({
     AUTH_DISCORD_SECRET: process.env.AUTH_DISCORD_SECRET,
     DATABASE_URL: process.env.DATABASE_URL,
     NODE_ENV: process.env.NODE_ENV,
+    URL: process.env.NEXT_PUBLIC_URL,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

src/trpc/react.tsx

@@ -74,5 +74,7 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
 function getBaseUrl() {
   if (typeof window !== "undefined") return window.location.origin;
   if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
-  return `http://localhost:${process.env.PORT ?? 3000}`;
+  if (process.env.REVALIDATE_URL) return `https://${process.env.REVALIDATE_URL}`;
+  if (process.env.URL) return process.env.URL;
+  return `http://:${process.env.PORT ?? 3000}`;
 }

src/trpc/server.ts

@@ -8,6 +8,7 @@ import { createCaller, type AppRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/trpc";
 import { createQueryClient } from "./query-client";
 
+
 /**
  * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
  * handling a tRPC call from a React Server Component.