not being able to use auth() function in the client side

[a0m0rajab]

Environment

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Xeon(R) W-2223 CPU @ 3.60GHz
    Memory: 6.21 GB / 15.69 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.5 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (124.0.2478.51)
    Internet Explorer: 11.0.22621.1
  Packages: 
    "next": "^14.1.1",
    "next-auth": "5.0.0-beta.15",
    "react": "^18.2.0",

Reproduction URL

ayasofyazilim-clomerce/ayasofyazilim-core-project#67

Describe the issue

Implementing authjs with credentials provider in my app created the next issue when i used beta.16, I was expecting to use the auth() function immediately and work with it:

Uncaught MissingSecret: Missing secret, please set AUTH_SECRET or config.secret. Read more at https://errors.authjs.dev#missingsecret

Even though I had the secret provided in my .env file it did not detect it.

.env file: has the next variables (I removed them for security reasons)

BASE_URL=
PROJECT_SERVICE_URL=
APP_NAME=
# ----- Auth.js -----
AUTH_SECRET=
NEXTAUTH_SECRET=
# ---- Credentials ----
PASSWORD= 
USERNAME= 

trial 1:

When I tried to downgrade the version of the library I got a different error:

Error: Invariant: headers() expects to have requestAsyncStorage, none available. #9192

src\app\[lang]\[auth]\page.tsx (20:26) @ auth

  18 |
  19 | async function getSession(){
> 20 |   session = await auth();
     |                      ^
  21 |   console.log("session ",session)
  22 | }
  23 | getSession();

How to reproduce

1. implement the authjs library
2. use auth() function in client side.

Expected behavior

I am expecting the auth() function to work on client side.

[khobiziilyes]

As mentioned in the official docs, I think your problem is that your AUTH_SECRET environment variable is empty. Use the npx auth secret command to generate one and things should work smoothly for you

[a0m0rajab]

The variable is not empty.

[khobiziilyes]

Is it possible to check whether the environment variables are accessible correctly by the code? A simple console.log in auth.js should be enough

[a0m0rajab]

Thanks for the suggestion; I went through that path, but the env variable was not accessible since I needed to define it in the next.config file.

I solved the issue by looking at the following links:

• Stack Overflow question
• Next Official Docs

As for the second problem, looking into the previous discussion. I read that the functions i tried to use are server-side functions and needed to use the client side ones: #9192 (comment)

After doing that, I needed to change the baseURL of the session provider to make it work with my project since we had i18n configurations.

I think keeping this open for the maintainers to notice the issue would be helpful. I opened an issue for documentation improvements as well: #10720

@khobiziilyes thank you for the help!

[borzaka]

Using await auth() in client component is not yet supported.
I followed the docs here:
https://authjs.dev/getting-started/session-management/get-session

I ended up using SessionProvider instead.

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

next 14.2.3
next-auth 5.0.0-beta.17

[a0m0rajab]

@borzaka can you provide an example of the provider that you had?
for me I did use the examples from v4 to run that.

[borzaka]

@a0m0rajab I used the official example repo: https://github.com/nextauthjs/next-auth-example/tree/main
You can test it here: https://next-auth-example.vercel.app/client-example

[ndom91]

auth() is not meant to be used client-side. The underlying issue is that your AUTH_SECRET is empty (on the client), which is the way it shuold be.

We highly recommend you get the session server-side (with auth()) and then pass it down to client-components via props, btu if you need to do somethign like that client-side you can still use the getSession method from next-auth/react and wrap your client tree in a <SessionProvider />. For example, see our client page example: https://github.com/nextauthjs/next-auth-example/blob/main/app/client-example/page.tsx

EDIT: Looks like you already figured out a lot of this haha. I'll close the issue then 🙏

[a0m0rajab]

@ndom91 thanks for the information, yeah it was not clear from the first sight in the docs. took some time haha. But thanks again for letting me know how things works here.

Here is another old issue with the same concept though: #7981