Cannot get getAccessToken - cookies() expects to have requestAsyncStorage, none available

[jLynx]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

I am trying to get Auth0 working in our project using the tutorial from the ReadMe. I have it so I can login and log out successfully, but I am now needing to get the AccessToken to pass to an external API. I have tried following the page setup from here
https://auth0.github.io/nextjs-auth0/types/session_get_access_token.GetAccessToken.html

But sadly I am getting the error: Uncaught (in promise) Error: Invariant: cookies() expects to have requestAsyncStorage, none available.

If I follow the example exactly I can get it to output using

// app/my-api/route.js
import { getAccessToken } from "@auth0/nextjs-auth0/edge" // Note the /edge import
import { NextResponse } from "next/server"

export const GET = async () => {
  const { accessToken } = await getAccessToken()
  return NextResponse.json({ accessToken: accessToken })
}

export const runtime = "edge"

But I need to get the accessToken on a page that also uses useState, so when I do
const { accessToken } = await getAccessToken() I get that error above.
Is this a bug, or what can I do to get access to the logged in users accessToken in the example codesandbox.io I have linked?

Thanks for your time!

Reproduction

I have set up a code example here, just change the .env settings with your own: https://codesandbox.io/p/devbox/auth0-login-token-dwl8rj?file=%2Fapp%2Fpage.tsx%3A18%2C27

Additional context

No response

nextjs-auth0 version

^3.5.0

Next.js version

14.0.4

Node.js version

v20.7.0

[jLynx]

A temporary work around I have found is to do this:

// app/api/[...proxy]/route.ts

import { getAccessToken } from "@auth0/nextjs-auth0"
import { NextRequest, NextResponse } from "next/server"

const EXTERNAL_API_URL = "https://myapi.com"

export const handleRequest = async (req: NextRequest) => {
  const res = new NextResponse()
  const { accessToken } = await getAccessToken(req, res)
  const path = req.nextUrl.pathname + req.nextUrl.search

  const response = await fetch(`${EXTERNAL_API_URL}${path}`, {
    method: req.method,
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    body: req.body ? JSON.stringify(await req.json()) : null,
  })

  return new NextResponse(JSON.stringify(await response.json()))
}

export const GET = handleRequest
export const POST = handleRequest
export const PUT = handleRequest
export const DELETE = handleRequest

[Ranguna]

For anyone wondering, @jLynx workaround was to pass req, res to getAccessToken, resulting in getAccessToken(req, res) instead of just getAccessToken().

This fixes the issue because the auth0 package will use the cookies from the req object. If the request object is not provided, the auth0 package will fallback to Auth0NextRequestCookies.

Auth0NextRequestCookies fails because it uses the cookies object from next/headers, and, for some reason, the local storage was not initialised before the call to auth0.

I'm not quite sure where the local storage is initialised in nextjs, so it's a bit unclear if this is an upstream bug on nextjs side or on auth0 side.

[Ranguna]

I've also read that some people "fixed" this issue on their side by setting the runtime to node, I can't remember where I've read this though.

[josh-anderson-ftw]

Which setting is that? The "runtime = node" one @Ranguna mentioned...

[Ranguna]

@josh-anderson-ftw sorry, forgot to link the docs: https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

[Tonyibra]

ISSUE Not solved what a bad package

[RichardD012]

Adding another comment here in hopes that this is addressed. There doesn't seem to be a friendly/standard way to get the session from the client to pass, via frontend, to an external API. This is using a vanilla next.js 14 app with /app routing.

A workaround is to get the session in the SSR component and pass to the page, but by default out of the box, doing getAccessToken on a server component creates this warning: nextjs-auth0 is attempting to set cookies from a server component,see https://github.com/auth0/nextjs-auth0#using-this-sdk-with-react-server-components. The workaround of using the middleware auth solves it but you still get a warning in the server console.

All in all the experience for people trying to make something out of the box with common practices isn't the best. Whether or not these are "good" practices is sort of beside the point since the nextjs-auth0 package isn't suggesting best practices with a default, out of the box, app.