BA
Better Auth•16h ago
invocation97

Using authClient in nextjs server components / actions

Hello everyone! I am working on a side project, and I have set up a turborepo monorepo with a hono backend and a nextjs frontend. I have set up better auth in hono, and the client library in nextjs, and I can successfuly communicate. However, I have found a note that we shouldn't call the authClient on the server. However, I was wondering if it was okay to call it on the server if we're using a separate backend? My reasoning for calling it on the server is to utilize the RSC an SSR. For instance, is this a safe thing to do on a route handler level in nextjs? 
import { headers } from "next/headers";
import { notFound, redirect } from "next/navigation";

import { authClient } from "@/lib/auth-client";
import { verifySession } from "@/lib/session";

import ApiKeysTemplate from "./api-keys-template";

export default async function ApiKeys() {
  const { isAuthenticated } = await verifySession();

  if (!isAuthenticated) {
    return redirect("/sign-in");
  }

  const { data: apiKeys, error } = await authClient.apiKey.list({
    fetchOptions: {
      headers: await headers(),
    },
  });

  if (error) {
    return notFound();
  }

  return (
    <ApiKeysTemplate initialApiKeys={apiKeys} />
  );
}
import { headers } from "next/headers";
import { notFound, redirect } from "next/navigation";

import { authClient } from "@/lib/auth-client";
import { verifySession } from "@/lib/session";

import ApiKeysTemplate from "./api-keys-template";

export default async function ApiKeys() {
  const { isAuthenticated } = await verifySession();

  if (!isAuthenticated) {
    return redirect("/sign-in");
  }

  const { data: apiKeys, error } = await authClient.apiKey.list({
    fetchOptions: {
      headers: await headers(),
    },
  });

  if (error) {
    return notFound();
  }

  return (
    <ApiKeysTemplate initialApiKeys={apiKeys} />
  );
}
Could somebody explain? 😕 Also, for checking the auth state on the next server, is this a safe thing to do? 
export const getSession = cache(async (): Promise<Session | null> => {
  try {
    const { data, error } = await authClient.getSession({
      fetchOptions: {
        headers: await headers(),
      },
    });

    if (error || !data) {
      return null;
    }

    return data as Session;
  }
  catch (error) {
    console.error("Error fetching session:", error);
    return null;
  }
});

export async function verifySession() {
  const session = await getSession();

  return {
    isAuthenticated: !!session,
    session,
    user: session?.user || null,
  };
}
export const getSession = cache(async (): Promise<Session | null> => {
  try {
    const { data, error } = await authClient.getSession({
      fetchOptions: {
        headers: await headers(),
      },
    });

    if (error || !data) {
      return null;
    }

    return data as Session;
  }
  catch (error) {
    console.error("Error fetching session:", error);
    return null;
  }
});

export async function verifySession() {
  const session = await getSession();

  return {
    isAuthenticated: !!session,
    session,
    user: session?.user || null,
  };
}
1 Reply
Ping
Ping•14h ago
Yeah just make sure that you're using the auth client imported from better-auth/client not better-auth/react

Did you find this page helpful?