AuthClient is not working in production.

[bytemuck]

In the docs, doing

export const adminAuthClient = new AuthClient('admin')

and then using adminAuthClient in a client component works in a development environment, but seize to work once in production because it reads directly from process.env.NEXT_PUBLIC_PAYLOAD_AUTH_URL.

It appears like process environment are injected in the browser when in development?

[bytemuck]

I further read about the problem, and I found this: https://payloadcms.com/docs/configuration/environment-vars#client-side-environments. Prefixing environment variables with NEXT_PUBLIC_ should make them available to the Admin Panel, which makes me think it may or may not be a problem on my end?

[ahuvafreeman]

I further read about the problem, and I found this: https://payloadcms.com/docs/configuration/environment-vars#client-side-environments. Prefixing environment variables with NEXT_PUBLIC_ should make them available to the Admin Panel, which makes me think it may or may not be a problem on my end?

How are you deploying your app?
I had a similar problem where once deployed, it seemed like NEXT_PUBLIC_SERVER_URL was never set.
The solution was to define it as an arg when the docker image builds.

[bytemuck]

I further read about the problem, and I found this: https://payloadcms.com/docs/configuration/environment-vars#client-side-environments. Prefixing environment variables with NEXT_PUBLIC_ should make them available to the Admin Panel, which makes me think it may or may not be a problem on my end?

How are you deploying your app? I had a similar problem where once deployed, it seemed like NEXT_PUBLIC_SERVER_URL was never set. The solution was to define it as an arg when the docker image builds.

This could help to understand: https://nextjs.org/docs/app/guides/environment-variables#bundling-environment-variables-for-the-browser.

I did not find a good solution yet.

What I did is, I created the AuthClient on each component (AuthComponent) by passing the payloadBaseURL, which I passed to the Client Component by props from the Server Component.

[ahuvafreeman]

I further read about the problem, and I found this: https://payloadcms.com/docs/configuration/environment-vars#client-side-environments. Prefixing environment variables with NEXT_PUBLIC_ should make them available to the Admin Panel, which makes me think it may or may not be a problem on my end?

How are you deploying your app? I had a similar problem where once deployed, it seemed like NEXT_PUBLIC_SERVER_URL was never set. The solution was to define it as an arg when the docker image builds.

This could help to understand: https://nextjs.org/docs/app/guides/environment-variables#bundling-environment-variables-for-the-browser.

I did not find a good solution yet.

What I did is, I created the AuthClient on each component (AuthComponent) by passing the payloadBaseURL, which I passed to the Client Component by props from the Server Component.

I'm going to make some assumptions here

1. You are using an .env file to set your vars locally/for development
2. You're not using an .env file to set your vars for your deployed instance
   If that's the case, how are you setting your env vars on the server?
   I mentioned setting arg when Docker image builds previously because although I was setting my env vars for the server, NEXT_PUBLIC was not available at build time.

[bytemuck]

I further read about the problem, and I found this: https://payloadcms.com/docs/configuration/environment-vars#client-side-environments. Prefixing environment variables with NEXT_PUBLIC_ should make them available to the Admin Panel, which makes me think it may or may not be a problem on my end?

How are you deploying your app? I had a similar problem where once deployed, it seemed like NEXT_PUBLIC_SERVER_URL was never set. The solution was to define it as an arg when the docker image builds.

This could help to understand: https://nextjs.org/docs/app/guides/environment-variables#bundling-environment-variables-for-the-browser.
I did not find a good solution yet.
What I did is, I created the AuthClient on each component (AuthComponent) by passing the payloadBaseURL, which I passed to the Client Component by props from the Server Component.

I'm going to make some assumptions here

1. You are using an .env file to set your vars locally/for development

2. You're not using an .env file to set your vars for your deployed instance
   If that's the case, how are you setting your env vars on the server?
   I mentioned setting arg when Docker image builds previously because although I was setting my env vars for the server, NEXT_PUBLIC was not available at build time.

1. I am using and .env file on my local setup.
2. There is no .env when building our app, and even if there was, we build once for both staging (we even have multiple staging branches) and production, meaning staging and production would have the same payloadBaseURL (each environment must have their own auth url).

That being said, the question is how can I build my project once, while having my AuthClient constructed with the right arguments? Note that their is no context whatsoever when creating the AuthClient:

• process.env cannot be used, since the file is only loaded on the Client.
• useContext hooks cannot be used, since it's not part of the DOM yet.

[sourabpramanik]

@bytemuck Are you using docker based CI/CD or deploying directly by connecting your repository?

[bytemuck]

@bytemuck Are you using docker based CI/CD or deploying directly by connecting your repository?

We have a CI/CD.

Reading the docs, we'll either need to find a way to read at runtime from the server (with a REST API), or to build for each environment.

Note: After being built, [...] NEXT_PUBLIC_ variables will be frozen with the value evaluated at build time, so these values need to be set appropriately when the project is built. If you need access to runtime environment values, you'll have to setup your own API to provide them to the client (either on demand or during initialization).

[sourabpramanik]

@bytemuck You can pass the env as an argument in your CI so that it can be used by the Dockerfile to build the app. Let me know if you need an example for the same.

[bytemuck]

@bytemuck You can pass the env as an argument in your CI so that it can be used by the Dockerfile to build the app. Let me know if you need an example for the same.

I get what you are saying, but we do not build multiple instances, we build it once and reused it for each environment. We will instead read from the server at runtime.

As I said, the problem is that we do not have any context when creating the AuthClient instance. It's limited to using environment variables, which force us to build each instances separately.

[lukasschinninger]

for a quick and dirty fix i did this in my react Login Button component:

export function createFrontendAdminAuthClient(url: string) {
return new AuthClient('admin', {
payloadBaseURL: url,
})
}

---

const adminAuthClient = createFrontendAdminAuthClient(window.location.origin)

[shamimevatix]

Where does it work actually? I tried to run their example and it doesn't work. Tried to add the auth plugin by reading their documentation, after a series of nightmare, I was able to complete the authentication finally. As usual the example is incomplete. In the admin dashboard, it can't load the user with the error
The following path cannot be queried: user.relationTo