Better Auth•4w ago

Authenticate Next.js app against Express backend.

Hi! I'm trying to setup Better-Auth API in my express app and have it linked to my next.js app, so I can make authenticated requests from client and server components. I got it somehow working but I have my Next.js app with a different url using nginx (local.dev.com), so that way I can test locally Riot Games OAuth. When I try to log in from localhost it works fine (I can get the session from both client and server components), but when I use the local.dev.com url it doesn't work on server components. Any help is appreciated. I honestly don't know if it is a good idea to setup authentication like this (a fullstack app with another backend). This is my config:

export const auth = betterAuth({
    baseURL: `http://localhost:${env.APP_PORT}`,
    database: drizzleAdapter(db, {
        provider: "pg",
        schema,
        usePlural: true,
    }),
    advanced: {
        database: { generateId: false },
        crossSubDomainCookies: {
            enabled: true,
        },
        cookie: {
            sameSite: "none",
            secure: true,
            path: "/",
        },
        defaultCookieAttributes: {
            secure: true,
            sameSite: "none",
        },
    },
    socialProviders: {
        discord: {
            clientId: env.DISCORD_CLIENT_ID,
            clientSecret: env.DISCORD_CLIENT_SECRET,
            redirectURI: "http://localhost:3000/api/auth/callback/discord",
        },
    },
    trustedOrigins: ["https://local.dev.com", "http://localhost:5000"],
});

export const auth = betterAuth({
    baseURL: `http://localhost:${env.APP_PORT}`,
    database: drizzleAdapter(db, {
        provider: "pg",
        schema,
        usePlural: true,
    }),
    advanced: {
        database: { generateId: false },
        crossSubDomainCookies: {
            enabled: true,
        },
        cookie: {
            sameSite: "none",
            secure: true,
            path: "/",
        },
        defaultCookieAttributes: {
            secure: true,
            sameSite: "none",
        },
    },
    socialProviders: {
        discord: {
            clientId: env.DISCORD_CLIENT_ID,
            clientSecret: env.DISCORD_CLIENT_SECRET,
            redirectURI: "http://localhost:3000/api/auth/callback/discord",
        },
    },
    trustedOrigins: ["https://local.dev.com", "http://localhost:5000"],
});

15 Replies

Timur•4w ago

The baseURL looks suspicious. Shouldn't it be a live URL? Your better-auth endpoints will live in whatever baseURL you provide Also you can use Next.js with a dedicated API without any problems nothing is hindering you from doing that. Even with better-auth you might need JWT plugin (haven't tried with cookie setup) but it works.

nerophaseOP•4w ago

@Timur thanks for the response! For now I'm testing the app locally so I set the baseURL to localhost. I think the issue is the cross site cookies config. When I try with the localhost URL it works fine but with the local.dev.com URL the cookie isn't set. Also I'm going to read the JWT and Bearer plugins docs. Maybe that can solve my problem. Thanks!

Timur•4w ago

Can you inspect the request being sent that doesn't work towards local.dev.com and see whether there is a request header called credentials and whether it is set to include?

nerophaseOP•4w ago

@Timur I don't see that header in the request made by better-auth to get the session in a client component but I have fetchOptions: { credentials: "include" } in the authClient config. The Next.js app is going thru local.compesn.com, and the Express backend is hosted on localhost:3000. When I try to log in using discord the user is created in the db but the session cookie (better-auth.session_token) is not created until I call useSession each time I refresh the page.

Timur•4w ago

Well, the cookie is being set which is good. What I don't understand is that https://local.compesn.com initiated the request (a live URL) trying to hit something on localhost? That would mean whatever hosts https://local.compesn.com also runs the express server locally? But honestly, the JWT plugin is maybe your best bet for cross-domain auth.

nerophaseOP•4w ago

@Timur That https://local.compesn.com URL is a proxy a have set up with Nginx to be able to test Riot Sign On on my local machine. RSO doesn't let you put localhost as a redirect URL after the user logs in with their account. About the JWT plugin I also think is the best option I have. I already had set up Auth.js (previously NextAuth.js) with JWTs and it was working fine so I'm going to try that with Better-Auth. Thanks for the help! 🙌

Timur•4w ago

No worries, and I see, now I understand your setup lol. Try to do that and ping me if you need help.

nerophaseOP•4w ago

haha thanks.. really appreciate it.

Eren©•4w ago

Having a similar kind of problem where everything will work on dev but cookies just don't set on production. No solutions sound as of yet

nerophaseOP•4w ago

Maybe is just how cookies work.. or that Better-Auth is not oriented to this kind of setup with an external API on a different URL.

Ankit•4w ago

Hey I'm facing the same issue with tanstackstart, using a separate server but session is. not validating due to the cookie issue

Timur•4w ago

Which versions are you running? Perhaps, it is an issue with the newest version of BA.. but i'm just guessing.

Ankit•4w ago

I don't think there might be any issue, I guess I might be missing some setups because cookie is being set in the browser but the tanstack ssr calls it before without cookie being set up and in next calls too its not taking up the cookies https://github.com/Shinchan3102/tanstack-start-auth-sample here is the sample code of what i am doing currently

GitHub

GitHub - Shinchan3102/tanstack-start-auth-sample

Contribute to Shinchan3102/tanstack-start-auth-sample development by creating an account on GitHub.

nerophaseOP•4w ago

I'm on the latest version.. just installed the package the other day

Eren©•4w ago

"better-auth": "^1.3.4"

"better-auth": "^1.3.4"

Gaming

Programming

Authenticate Next.js app against Express backend.

Did you find this page helpful?