-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Error: headers
was called outside a request scope, when using Authjs v5.0.0-beta.19 and next dev --turbo
#11076
Comments
I am getting this: "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>
)
} |
@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:
And for the component
|
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
|
|
import xior from "xior"
Same error here, in any beta version of next-auth |
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. |
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:
|
I create a file get-session.tsx
and it finally works. |
I tried cloning and running the repository but it does not seen to work even after installing all the modules.
|
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 |
Also the official documentation suggests to create the auth.js file in the root of the directory. Docs |
Hey @Ali-Raza764 thanks, odd it doesn't work for you, works for me doing the below
My app/auth works when running 'npm run dev' (next dev) |
Interesting... I'm getting the same error only when I have the --turbo flag |
Well then do not use turbo! ?? |
For now yes I removed the turbo flag... but development without it is a lot slower so it's not ideal |
Any update here? Local dev sucks without using turbo. |
Spoke too soon lol. Using versions
and working |
@sbassalian I tried using those versions but the problem remains. |
having the same problem with turbo: "next": "14.2.6" |
worke just fine for me 👍 |
I am getting the same but with |
@wilfreud That's odd, if it's working for some people and others not, I don't think it's a version problem. |
I got the same issue just random problem |
Same issue, I found migrating the pages/api routes to be app router api routes solved the problem initially. That is a lot more work, the documentation appears to say I should be able to use |
Same issue
I have also tried with |
@wilfreud I don't think the version is the variable here, you are probably doing something different than us for it to work, could you share a snippet of your code of how you are configuring |
I actually found the solution and forgot to share it here. Hey, I may have found the issue. It appears "use server";
import { auth } from "./auth";
export async function getAuth() {
return await auth();
}
Update (ref): https://stackoverflow.com/a/78501195/19987002 |
This does not work for me. I get headers error in "return await auth();" |
@wilfreud this was mentioned before in this issue by @matbrgz, although it might work, I don't see it as an definitive fix, just a workaround, but it's better than nothing. Thanks for sharing.
|
This solution does not work for me either... Still getting How is there no official fix for this yet... it's been months! |
This tip worked for me |
Getting the same error on standalone build of next.js with next-auth Edit: "use server";
import NextAuth, { Session } from "next-auth";
import { VerificationToken } from "next-auth/adapters";
import { NextRequest, NextResponse } from "next/server";
import { config } from "@/config";
import { authConfig } from "./config";
const { auth: getSession } = NextAuth({
...authConfig,
adapter: {
createVerificationToken: (_: VerificationToken) => undefined,
useVerificationToken: (_: { identifier: string; token: string }) => null,
getUserByEmail: (_: string) => null,
},
trustHost: true,
});
export async function attachSession() {
try {
return getSession();
} catch (_) {}
}
async function getIsUserOnboarded(session: Session) {
const session = await getSession();
return Boolean(session?.user.onboarded);
}
export async function authenticatedUserRedirectionRules(
request: NextRequest,
) {
const route = request.nextUrl.pathname;
// Check if authenticated user is onboarded
const isUserOnboarded = await getIsUserOnboarded();
if (isUserOnboarded && route === "/onboarding") {
return NextResponse.redirect(
new URL(config.routes.default.AUTH, request.url),
);
} else if (!isUserOnboarded && route !== "/onboarding") {
return NextResponse.redirect(new URL("onboarding", request.url));
}
} the call to |
This creates a server, action and an extra request. On top of that, server actions should not be used to fetch data as they are blocking. I don't believe this is a great solution. |
Honestly I was in an emergency when I wrote this garbage. |
Did anyone checked if it works with next15? |
I just created a new Nextjs 14.2.6 and Next Auth 5.0.0-beta.25 project and now it is working |
The latest beta works |
Seeing this issue as well... Is this where the issue lies? https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/lib/actions.ts#L18 "next": "^15.0.1",
"next-auth": "5.0.0-beta.25", |
I was hoping that it will be resolved in |
I confirmed the issue with a minimal repo: https://github.com/JulianKingman/next-auth-5-nex-15-issue It looks like NextJS doesn't approve of next/auth being used in a function that's not a page. I suspect that it might have to do with client components not being allowed to call the header function. Because the signIn function is called from the client, and it contains a call to nextHeaders(), it's erroring out. I'm not sure what the solution is, are there any auth.js maintainers here that can either shed some light on the correct way to handle this, or look into fixing the behavior with next 15? |
@JulianKingman it works in the latest version: |
@lacymorrow unfortunately not, I'm using 5.0.0-beta.25 and used it in the repro above as well |
My rather ugly workaround is to make the auth functions (signIn and signOut) server actions, and create a clear distinction from client-side components. It's pretty fiddly though, and would be great if it worked client-side as well. The above repro is very minimal, let me know if there's something I should try. |
I'm seeing this issue too but only when deploying my NextJS project on Bolt.new. Versions:
If anyone has any clue on why it could possibly be breaking in Bolt, I'd appreciate the help. But in any case, this is how I have my working setup on local dev if anyone wants to give it a go:
import { AuthForm } from "@/components/auth/auth-form";
import { login } from "@/app/actions/auth-actions";
export default function SignInPage() {
return <AuthForm type="signin" action={login} />;
}
"use server";
import { signIn, signOut } from "@/auth";
export const login = async (values: z.infer<typeof SignInSchema>) => {
//... more code
try {
await signIn("credentials", {
email,
password,
redirectTo: DEFAULT_LOGIN_REDIRECT(existingUser.defaultWorkspaceId!),
});
return { success: "Logged in!" };
} catch (error) {
//... more code
};
"use client";
//... more code
export function AuthForm({ type, action }: AuthFormProps) {
//... more code
function onSubmit(values: z.infer<typeof schema>) {
setError("");
setSuccess("");
startTransition(() => {
action(values).then((data) => {
setError(data?.error);
setSuccess(data?.success);
});
});
}
return (
...
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
...
</form>
</Form>
);
}
export const {
handlers: { GET, POST },
auth,
signIn,
signOut,
} = NextAuth({
pages: {
signIn: "/auth/signin",
error: "/auth/error",
},
//... more code
callbacks: {
async signIn({ user, account }) {
// Allow OAuth without email verification
if (account?.provider !== "credentials") return true;
const existingUser = await getUserById(user.id!);
// Prevent sign-in if user does not exist or email is not verified
if (!existingUser || !existingUser?.emailVerified) return false;
// TODO: Add any additional sign-in checks here if needed
return true;
},
//... more code
}); |
For me, I was binding server action for extra params in client component. 'use client';
export default function TestPage() {
const action = testAction.bind(null, "extra param"); // for extra param to the action
return (
<form action={action}>
<input type="submit" />
</form>
);
} import { auth } from "@/auth";
export async function testAction(extraParam: string, data: FormData) {
const session = await auth();
console.log({ extraParam, test });
} But this causes the error.. You can bind action in server component, |
Works without issues on: "next": "15.0.4",
"next-auth": "5.0.0-beta.25", But fails on: "next": "15.1.0",
"next-auth": "5.0.0-beta.25", Looks like something in next.js 15.1.0 broke things again 😩 Used within a server component (throws error on button click): import React from "react";
import { signIn } from "~/server/auth";
const PublicPage = async () => {
return (
<form
action={async () => {
"use server";
await signIn("google", { redirectTo: "/dashboard" });
}}
>
<button type="submit">Sign In</button>
</form>
);
};
export default PublicPage; Error: index.js:635 Uncaught Error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context
at getExpectedRequestStore (file:///home/bryce/www/oe5/node_modules/next/dist/server/app-render/work-unit-async-storage.external.js:48:11)
at headers (webpack-internal:///(rsc)/./node_modules/next/dist/server/request/headers.js:67:84)
at signIn (webpack-internal:///(rsc)/./node_modules/next-auth/lib/actions.js:16:92)
at signIn (webpack-internal:///(rsc)/./node_modules/next-auth/index.js:148:75)
at action (webpack-internal:///(rsc)/./src/app/(landing)/page.tsx:35:63)
at <unknown> (file:///home/bryce/www/oe5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:157:1030)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async handleAction (file:///home/bryce/www/oe5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:156:21940)
at async renderToHTMLOrFlightImpl (file:///home/bryce/www/oe5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:161:22192)
at async doRender (file:///home/bryce/www/oe5/node_modules/next/dist/server/base-server.js:1565:34)
at async responseGenerator (file:///home/bryce/www/oe5/node_modules/next/dist/server/base-server.js:1813:28)
at async DevServer.renderToResponseWithComponentsImpl (file:///home/bryce/www/oe5/node_modules/next/dist/server/base-server.js:1823:28)
at async DevServer.renderPageComponent (file:///home/bryce/www/oe5/node_modules/next/dist/server/base-server.js:2250:24)
at async DevServer.renderToResponseImpl (file:///home/bryce/www/oe5/node_modules/next/dist/server/base-server.js:2288:32)
at async DevServer.pipeImpl (file:///home/bryce/www/oe5/node_modules/next/dist/server/base-server.js:959:25)
at async NextNodeServer.handleCatchallRenderRequest (file:///home/bryce/www/oe5/node_modules/next/dist/server/next-server.js:281:17)
at async DevServer.handleRequestImpl (file:///home/bryce/www/oe5/node_modules/next/dist/server/base-server.js:853:17)
at async (file:///home/bryce/www/oe5/node_modules/next/dist/server/dev/next-dev-server.js:371:20)
at async Span.traceAsyncFn (file:///home/bryce/www/oe5/node_modules/next/dist/trace/trace.js:153:20)
at async DevServer.handleRequest (file:///home/bryce/www/oe5/node_modules/next/dist/server/dev/next-dev-server.js:368:24)
at async invokeRender (file:///home/bryce/www/oe5/node_modules/next/dist/server/lib/router-server.js:230:21)
at async handleRequest (file:///home/bryce/www/oe5/node_modules/next/dist/server/lib/router-server.js:408:24)
at async requestHandlerImpl (file:///home/bryce/www/oe5/node_modules/next/dist/server/lib/router-server.js:432:13)
at async Server.requestListener (file:///home/bryce/www/oe5/node_modules/next/dist/server/lib/start-server.js:146:13) This error occurs with or without the |
any updates @brycefranzen |
Environment
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: