Error: `headers` was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo #11076

cogb-jclaney · 2024-06-05T04:36:38Z

Environment

  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
    Memory: 5.33 GB / 15.47 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.0.0 - ~/.nvm/versions/node/v22.0.0/bin/node
    npm: 10.5.1 - ~/.nvm/versions/node/v22.0.0/bin/npm
  npmPackages:
    @auth/drizzle-adapter: ^1.2.0 => 1.2.0 
    next: ^14.2.3 => 14.2.3 
    next-auth: ^5.0.0-beta.18 => 5.0.0-beta.19 
    react: ^18.3.1 => 18.3.1

Reproduction URL

https://github.com/cogb-jclaney/authjs-issue

Describe the issue

When running a Next JS site using Authjs v5.0.0-beta.19 and next dev --turbo, I get the following error - "Error: headers was called outside a request scope", running next dev without the --turbo flag works as previous.

Authjs v5.0.0-beta.18
next dev (works)
next dev --turbo (works)

Authjs v5.0.0-beta.19
next dev (works)
next dev --turbo (causes the error)

How to reproduce

Running the command "npm run dev" when "--turbo" is enabled cause the application to error.
Running the command without "--turbo" works normally and both with and without work on the previous version (v5.0.0-beta.18).

Credential provider has been configured for the example, no inputs actually needed, user has been hardcoded.

Expected behavior

The session from "await auth()" should be returned.

The text was updated successfully, but these errors were encountered:

Qodestackr · 2024-06-05T12:40:14Z

I am getting this:
Error: Invariant: headers() expects to have requestAsyncStorage, none available.

"use client";

import { SessionProvider } from "next-auth/react";
import { getServerSession } from "next-auth";

import React, { ReactNode } from "react";
import { Toaster } from "react-hot-toast";

export default function Providers({ children }: { children: ReactNode }) {
  const session = getServerSession();

  console.log('straight from providers,,', session)

  return (
    <SessionProvider session={session}>
      <Toaster position="top-center" reverseOrder={false} />
      {children}
    </SessionProvider>
  );
}

What am I doing wrong? I need this to access useSession in client components but it does not work.

EDIT: I dont know how to do this in Next14 layouts:

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Ali-Raza764 · 2024-06-08T05:23:30Z

@Qodestackr I would like to point out that wrapping your app directly with sessionprovider doesnot work instead import it in a client component and then wrap that component around your app LIKE THIS:

  return (
    <html lang="en">
      <body className={inter.className}>
        <AuthProvider>
          <Toaster />
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

And for the component

"use client";
import { SessionProvider } from "next-auth/react";

export default function AuthProvider({ children }) {
  return <SessionProvider>{children}</SessionProvider>;
}

Ali-Raza764 · 2024-06-08T05:31:34Z

First thing first why did you write "use server" on the server component By default it was server component by marking you have made it a server action that works like a post request

"use server";

import { auth } from "@/lib/auth";

export async function User() {
  const session = await auth();
  return <h1>{session?.user?.name}</h1>;
}```

Ali-Raza764 · 2024-06-08T05:33:10Z

const session = getServerSession();
In a client marked component ? @Qodestackr

matbrgz · 2024-06-10T04:54:35Z

import xior from "xior"
import { auth } from "@/auth"

const iApi = xior.create({
	baseURL: API_URL,
	headers: {
		"Content-Type": "application/json",
		"Accept": "application/json",
		"Cache-Control": "no-store",
	},
})

iApi.interceptors.request.use(
	async (config) => {
		try {
			const session = await auth()
			console.log("🚀 ~ session:", session)
			config.headers.Authorization = `Bearer ${session?.user.access_token}`
			return config
		} catch (_) {
			toast.error("Erro de Autenticação. Não foi possível obter o token de acesso. Tente novamente mais tarde.")
			return Promise.reject(_)
		}
	}
)

Same error here, in any beta version of next-auth

cogb-jclaney · 2024-06-10T23:41:15Z

First thing first why did you write "use server" on the server component By default it was server component by marking you have made it a server action that works like a post request

Thanks, I think I just overlooked that when I was trying different things in hope, I've removed it now and still get the issue.

bilalesi · 2024-06-11T15:34:25Z

I just have the same issue

"use client";

const Parent = ({component}: {component: ReactNode}) => {
   // ---- other work
   return (
     <div>
        {component}
    </div>
   )
}

const ServerComponent= ({id}: {id: string})=> {
    const session = await auth();
    return (
        // ----
    )
}

const X = () => {
    const id = "xxxx";
    return (
       <Parent
          component={<ServerComponent id={id}/>}
       />
    )
}

this cause the issue:

Uncaught (in promise) Error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

matbrgz · 2024-06-12T00:58:22Z

I create a file get-session.tsx

"use server"
import { auth } from "@/auth"

export async function getCurrentUser() {
	const session = await auth()
	return session
}

and it finally works.

Ali-Raza764 · 2024-06-12T09:59:08Z

I tried cloning and running the repository but it does not seen to work even after installing all the modules.

$ npm run dev

[email protected] dev
next dev
'next' is not recognized as an internal or external command,
operable program or batch file.

Ali-Raza764 · 2024-06-12T10:03:12Z

I have myself implemented basic authentication using authjs and mongo db along with credentials and oauth providers and also implemented basic stripe payment . Take a look at the repository Here Next-auth-toolkit

Ali-Raza764 · 2024-06-12T10:05:28Z

Also the official documentation suggests to create the auth.js file in the root of the directory. Docs

cogb-jclaney · 2024-06-14T00:03:33Z

Hey @Ali-Raza764 thanks, odd it doesn't work for you, works for me doing the below

git clone https://github.com/cogb-jclaney/authjs-issue.git authtest
npm i
npm run dev

My app/auth works when running 'npm run dev' (next dev)
The issue is when I try use the --turbo flag 'npm run dev' (next dev --turbo) it crashes with the error above which only happens on beta.19 worked fine on beta.18

cogb-jclaney added bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. labels Jun 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error: `headers` was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo #11076

Error: `headers` was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo #11076

cogb-jclaney commented Jun 5, 2024

Qodestackr commented Jun 5, 2024 •

edited

Loading

Ali-Raza764 commented Jun 8, 2024

Ali-Raza764 commented Jun 8, 2024

Ali-Raza764 commented Jun 8, 2024

matbrgz commented Jun 10, 2024 •

edited

Loading

cogb-jclaney commented Jun 10, 2024

bilalesi commented Jun 11, 2024 •

edited

Loading

matbrgz commented Jun 12, 2024

Ali-Raza764 commented Jun 12, 2024 •

edited

Loading

Ali-Raza764 commented Jun 12, 2024

Ali-Raza764 commented Jun 12, 2024

cogb-jclaney commented Jun 14, 2024

Error: headers was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo #11076

Error: headers was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo #11076

Comments

cogb-jclaney commented Jun 5, 2024

Environment

Reproduction URL

Describe the issue

How to reproduce

Expected behavior

Qodestackr commented Jun 5, 2024 • edited Loading

Ali-Raza764 commented Jun 8, 2024

Ali-Raza764 commented Jun 8, 2024

Ali-Raza764 commented Jun 8, 2024

matbrgz commented Jun 10, 2024 • edited Loading

cogb-jclaney commented Jun 10, 2024

bilalesi commented Jun 11, 2024 • edited Loading

matbrgz commented Jun 12, 2024

Ali-Raza764 commented Jun 12, 2024 • edited Loading

Ali-Raza764 commented Jun 12, 2024

Ali-Raza764 commented Jun 12, 2024

cogb-jclaney commented Jun 14, 2024

Error: `headers` was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo #11076

Error: `headers` was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo #11076

Qodestackr commented Jun 5, 2024 •

edited

Loading

matbrgz commented Jun 10, 2024 •

edited

Loading

bilalesi commented Jun 11, 2024 •

edited

Loading

Ali-Raza764 commented Jun 12, 2024 •

edited

Loading