Better Auth•2w ago

Authentication with Express backend + Next.js frontend

This is my first time using Better Auth, so forgive me if this is obvious 😅 I have an existing backend built with Express, which has Better Auth setup and running. We are creating a new Next.js frontend, on a separate server, which needs to authenticate against this backend. After reading the docs, seems like authenticating on the Next.js client side is fairly simple using the better-auth/react package, but trying to get the session on the Next.js server side requires importing the auth instance, which I cannot access since its on our Express backend. What is the solution if I need to make a server side fetch to our Express backend?

Solution:

Well, I followed this for server-side session:
https://www.better-auth.com/docs/integrations/next#for-nextjs-release-1517-and-below...

Next.js integration | Better Auth

Integrate Better Auth with Next.js.

Jump to solution

5 Replies

Ali Nasir•2w ago

well for server side sessions on nextjs. you can make an api request to the endpoint on express backend like this. BTW i have created a custom hook which gives the session both on client/server side basically checking if window global is defined or not

XirynxOP•2w ago

I tried this as a quick test, and it seems to work. Wondering if this is a valid approach?

import { SignOutButton } from '@/components/sign-out-button';
import { authClient } from '@/lib/auth';
import { headers } from "next/headers";

export default async function Locked() {
    const { data, error } = await authClient.getSession({
        fetchOptions: {
            headers: await headers(),
        }
    });
    
    if (error) {
        // handle error
        return (
            <div className="flex flex-col items-center justify-center h-screen">
                <h1 className="text-2xl font-bold mb-4">Error</h1>
                <p className="text-lg mb-4">{error.message}</p>
            </div>
        );
    }

    if (!data) {
        // handle error
        return (
            <div className="flex flex-col items-center justify-center h-screen">
                <h1 className="text-2xl font-bold mb-4">Error</h1>
                <p className="text-lg mb-4">You are not logged in</p>
            </div>
        );
    }

    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <h1 className="text-2xl font-bold mb-4">This is a protected page</h1>
            <p className="text-lg mb-4">You are logged in as {data.user.name}</p>
            <SignOutButton />
        </div>
    );
}

import { SignOutButton } from '@/components/sign-out-button';
import { authClient } from '@/lib/auth';
import { headers } from "next/headers";

export default async function Locked() {
    const { data, error } = await authClient.getSession({
        fetchOptions: {
            headers: await headers(),
        }
    });
    
    if (error) {
        // handle error
        return (
            <div className="flex flex-col items-center justify-center h-screen">
                <h1 className="text-2xl font-bold mb-4">Error</h1>
                <p className="text-lg mb-4">{error.message}</p>
            </div>
        );
    }

    if (!data) {
        // handle error
        return (
            <div className="flex flex-col items-center justify-center h-screen">
                <h1 className="text-2xl font-bold mb-4">Error</h1>
                <p className="text-lg mb-4">You are not logged in</p>
            </div>
        );
    }

    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <h1 className="text-2xl font-bold mb-4">This is a protected page</h1>
            <p className="text-lg mb-4">You are logged in as {data.user.name}</p>
            <SignOutButton />
        </div>
    );
}

Solution

Ali Nasir•2w ago

Well, I followed this for server-side session:
https://www.better-auth.com/docs/integrations/next#for-nextjs-release-1517-and-below

Next.js integration | Better Auth

Integrate Better Auth with Next.js.

Ping•2w ago

You can make a fetch request to your auth server endpoint with the needed headers/body/etc. I recommend using the OpenAPI plugin to see all endpoints as well as the required headers/body to do the calls.

XirynxOP•7d ago

Thank you @Ali Nasir @Ping

Gaming

Programming

Authentication with Express backend + Next.js frontend

Did you find this page helpful?