#Error using getRequestHeaders()

6 messages · Page 1 of 1 (latest)

fervent grove
#

Tech stack:
Tanstack Start
Better Auth
Prisma ORM
Mongodb Database

I have been facing some problems when trying to implement the logout button with server side data. I tried to use the getRequestHeaders function from tanstack/react-start/server to use the headers into auth.api.getSession(), but it shows some weird warning overlays in the frontend.

[plugin:vite:import-analysis] Failed to resolve import "tanstack-start-injected-head-scripts:v" from "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/start-server-core/dist/esm/router-manifest.js?v=7adb03f7". Does the file exist?

# 
// index.tsx

import { ActionButton } from "@/components/ui/action-button";
import { Button } from "@/components/ui/button";
import { auth } from "@/lib/better-auth/auth";
import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { getRequestHeaders } from "@tanstack/react-start/server";
import { toast } from "sonner";

export const Route = createFileRoute("/")({
  component: RouteComponent,
  beforeLoad: async () => {
    const headers = getRequestHeaders();
    const session = await auth.api.getSession({
      headers,
    });
    const user = session?.user;
    return {
      isAuthenticated: !!user,
    };
  },
});

const signUpMock = createServerFn({ method: "POST" }).handler(async () => {
  const res = await auth.api.signUpEmail({
    body: {
      // user mock data
    },
  });
  return res.user;
});

async function handleSignUpMock() {
  const user = await signUpMock();
  if (user) {
    toast.success("Sign up successful");
  }
}

function RouteComponent() {
  const { isAuthenticated } = Route.useRouteContext();
  return (
    <>
      <ActionButton type="button" action={handleSignUpMock}>
        Sign Up Mock
      </ActionButton>
      {isAuthenticated && <Button type="button">Sign Out</Button>}
    </>
  );
}
ruby parcel
#

beforeLoad is run both on client and server

#

so callinggetRequestHeaders in beforeLoad causes the error

#

you can change it to

const customGetHeaders = createIsomorphicFn().server(() => getRequestHeaders()).client(() => ({}))

// route definition
  beforeLoad: async () => {
    const headers = customGetHeaders();
    const session = await auth.api.getSession({
      headers,
    });
    const user = session?.user;
    return {
      isAuthenticated: !!user,
    };
  },
neat axle