Better Auth•2mo ago

Authclient SSR

I'm very confused, can you help me? I have a Hono backend application and I use nextjs for frontend purposes. I query the session in SSR with authClient.getSession. I solved the issue of the session not coming without adding headers to the fetchOptions section. However, when I publish it, the SSR session query that works locally stops working. What could be the potential cause?

13 Replies

Furkan ÖzayOP•2mo ago

@Ping can you help me ? I'm very sorry, but I'm trying to deliver a product to my customer. Would you be able to provide any information on this matter? @Ping @bekacru can you help me ? anyone help ? @bekacru @Ping please help

bekacru•2mo ago

Locally cookies are shared between different ports which isn't a case in production sorry for the late response here

Furkan ÖzayOP•2mo ago

How can I fix this problem? Can't we work with server-side components?

bekacru•2mo ago

You'd have to forward the headers from the nextjs server to hono with fetch options

Furkan ÖzayOP•2mo ago

const session = await authClient.getSession({ headers: await headers(); }) Isn't that right? hono auth.ts

 session: {
    expiresIn: 60 * 60 * 24 * 7, // 7 days
    updateAge: 60 * 60 * 24, // 1 day
    additionalFields: {
      plan: {
        type: "string",
        defaultValue: null,
        input: false,
        returned: true,
      },
      permissions: {
        type: "string[]",
        defaultValue: [],
        input: false,
        returned: true,
      },
    },
  },
  user: {
    additionalFields: {
      notificationToken: {
        type: "string",
        defaultValue: null,
        input: false,
        returned: false,
      },
      privacyPolicyAccepted: {
        type: "date",
        defaultValue: null,
        input: false,
        returned: false,
      },
      termsOfServiceAccepted: {
        type: "date",
        defaultValue: null,
        input: false,
        returned: false,
      },
      marketingConsentGiven: {
        type: "date",
        defaultValue: null,
        input: false,
        returned: false,
      },
      identity: {
        type: "string",
        defaultValue: null,
        input: false,
        returned: false,
      },
    },
  },
  advanced: {
    cookies: {
      session_token: {
        attributes: {
          sameSite: "none",
          secure: true,
          httpOnly: true,
          partitioned: true,
        },
      },
    },
    defaultCookieAttributes: {
      sameSite: "none",
      secure: process.env.NODE_ENV === "production",
      partitioned: true,
    },
    crossSubDomainCookies: {
      enabled: process.env.NODE_ENV === "production",
      domain:
        process.env.NODE_ENV === "production" ? ".example.com" : "localhost",
    },
    useSecureCookies: process.env.NODE_ENV === "production",
  },

 session: {
    expiresIn: 60 * 60 * 24 * 7, // 7 days
    updateAge: 60 * 60 * 24, // 1 day
    additionalFields: {
      plan: {
        type: "string",
        defaultValue: null,
        input: false,
        returned: true,
      },
      permissions: {
        type: "string[]",
        defaultValue: [],
        input: false,
        returned: true,
      },
    },
  },
  user: {
    additionalFields: {
      notificationToken: {
        type: "string",
        defaultValue: null,
        input: false,
        returned: false,
      },
      privacyPolicyAccepted: {
        type: "date",
        defaultValue: null,
        input: false,
        returned: false,
      },
      termsOfServiceAccepted: {
        type: "date",
        defaultValue: null,
        input: false,
        returned: false,
      },
      marketingConsentGiven: {
        type: "date",
        defaultValue: null,
        input: false,
        returned: false,
      },
      identity: {
        type: "string",
        defaultValue: null,
        input: false,
        returned: false,
      },
    },
  },
  advanced: {
    cookies: {
      session_token: {
        attributes: {
          sameSite: "none",
          secure: true,
          httpOnly: true,
          partitioned: true,
        },
      },
    },
    defaultCookieAttributes: {
      sameSite: "none",
      secure: process.env.NODE_ENV === "production",
      partitioned: true,
    },
    crossSubDomainCookies: {
      enabled: process.env.NODE_ENV === "production",
      domain:
        process.env.NODE_ENV === "production" ? ".example.com" : "localhost",
    },
    useSecureCookies: process.env.NODE_ENV === "production",
  },

bekacru•2mo ago

const session = await authClient.getSession({
  fetchOptions:  { headers: await headers() }
})

const session = await authClient.getSession({
  fetchOptions:  { headers: await headers() }
})

Furkan ÖzayOP•2mo ago

I wrote it manually, sorry. Yes, that's what I'm doing. It works locally, but it doesn't work in production. CORS MIDDLEWARE

app.use(
    "*",
    cors({
        origin: process.env.TRUSTED_ORIGINS?.split(",") || [],
        allowHeaders: ["Content-Type", "Authorization", "Cookie"],
        allowMethods: ["POST", "GET", "PUT", "DELETE", "OPTIONS"],
        exposeHeaders: ["Content-Length"],
        maxAge: 600,
        credentials: true,
    })
);

app.use(
    "*",
    cors({
        origin: process.env.TRUSTED_ORIGINS?.split(",") || [],
        allowHeaders: ["Content-Type", "Authorization", "Cookie"],
        allowMethods: ["POST", "GET", "PUT", "DELETE", "OPTIONS"],
        exposeHeaders: ["Content-Length"],
        maxAge: 600,
        credentials: true,
    })
);

Is there an error in the cookie settings? I am sharing this for informational purposes api.example.com (hono) example.com(next.js) Thank you very much for your interest. We use authclient in client-side components with the better-auth/react import, and better-auth/client in server-side components, but while the client-side components work fine, the server-side ones do not work properly. I saw this in the FAQ section of the documentation. @bekacru I also have another question: do I need to use the nextCookies plugin in auth.ts in the Hono backend, or is it only for Next.js full-stack development? I apologize, my intention is definitely not to be rude. I have reviewed all the old help posts and studied the documentation in detail to solve the problem, but I cannot reach a solution. @bekacru

bekacru•2mo ago

 cookies: {
      session_token: {
        attributes: {
          sameSite: "none",
          secure: true,
          httpOnly: true,
          partitioned: true,
        },
      },
    },
    defaultCookieAttributes: {
      sameSite: "none",
      secure: process.env.NODE_ENV === "production",
      partitioned: true,
    },

 cookies: {
      session_token: {
        attributes: {
          sameSite: "none",
          secure: true,
          httpOnly: true,
          partitioned: true,
        },
      },
    },
    defaultCookieAttributes: {
      sameSite: "none",
      secure: process.env.NODE_ENV === "production",
      partitioned: true,
    },

remove this from ur config its only for full nextjs app no worries at all. feel free to use the ai chatbot sometimes it tends to get the answers right

Furkan ÖzayOP•2mo ago

When I made these settings, the response received by the frontend was { status: 0 , statusText: ‘’ }. I'm not using you as artificial intelligence, I felt a little bad about myself. I actively use Better Auth in most of my projects, but as a NextJS full stack, this separation of honor is new to me, so I'm inexperienced. I'm sorry.

bekacru•2mo ago

make sure the base url is set properly. And when I say ai chat bot I meant @Better Auth

Better Auth•2mo ago

Hey there! To ensure your base URL is set properly, make sure you define the full URL in your Better Auth config. As noted in the documentation, configuring baseURL correctly is essential since if you include a path, it will override the default basePath (see [12]). This means your baseURL should reflect the exact deployment endpoint where your backend is running. Also, in scenarios like using an AI chat bot, confirming that your environment variables (like BETTER_AUTH_URL) are correctly set can help prevent unexpected behavior [1]. And thanks for clarifying the context—when referring to the AI chat bot, I understand you're addressing @Better Auth! If you need further assistance on setting up your base URL or any related issues, feel free to ask. Happy coding! Sources: 12. Options | Better Auth 1. docs: baseURL option in auth config

Options | Better Auth

Better Auth configuration options reference.

Furkan ÖzayOP•2mo ago

@Better Auth The base URL appears to be defined correctly, but I am still receiving a status:0 error.

Better Auth•2mo ago

It sounds like you’re encountering a network error (status: 0) even though the baseURL looks correct. This can happen when the request never reaches the server properly. For example, if you’re using a framework like Express with React, make sure that your Better Auth endpoints are mounted before any JSON-parsing middleware so that the raw request body can be read correctly [7]. Also, even when the baseURL is defined, if it isn’t merged correctly into the final API call URL (or if a fallback relative URL is used), you may run into issues like an invalid URL error that could result in a status: 0 error [13]. Double-check your middleware order and that all environment variables (like your NEXT_PUBLIC_SERVER_URL or similar) are set as expected. This should help prevent your client from receiving an empty or failed response. Sources: 7. React fetch OPTIONS Fails on /api/auth (Status 0) 13. TypeError: Invalid URL

GitHub

better-auth/better-auth

The most comprehensive authentication framework for TypeScript - better-auth/better-auth

GitHub

better-auth/better-auth

The most comprehensive authentication framework for TypeScript - better-auth/better-auth

GitHub

React fetch OPTIONS Fails on /api/auth (Status 0) · Issue #2145 ·...

Is this suited for github? Yes, this is suited for github To Reproduce I'm experiencing an issue with better‑auth on an Express.js API when accessed from a React client. Although the setup work...

GitHub

TypeError: Invalid URL · Issue #1560 · better-auth/better-auth

Is this suited for github? Yes, this is suited for github To Reproduce I have a very simple starter project with Remix & Cloudflare. Current vs. Expected behavior I have this client code: impor...

Gaming

Programming

Authclient SSR

Did you find this page helpful?