shopify.session.getCurrentId() fails to read request headers from Next.js app router

[artooras]

Issue summary

I'm using Next.js 14 (but this applies from 13 onwards) for building an embedded Shopify App. Before migrating to the app router, in my pages/api route I had the following code which was working fine:

export default async function handler(req: NextApiRequest) {
  [...] 
  const sessionId = await shopify.session.getCurrentId({
    isOnline: false,
    rawRequest: req
  })
  [...]
}

Once I migrated to the the app router, I now have a route.ts file in which I execute similar code:

export async function POST(req: Request) {
  [...]
  const sessionId = await shopify.session.getCurrentId({
    isOnline: false,
    rawRequest: req
  })
  [...]
}

but this time, instead of a valid sessionId, I get an error saying [shopify-api/ERROR] Missing Authorization header, was the request made with authenticatedFetch? | {isOnline: false}. Now, the header is actually there, which I am able to access through:

console.log(req.headers.get('Authorization'))

which outputs

Bearer MY_SESSION_TOKEN

However, as the shopify.session.getCurrentId suggests, it expects a rawRequest, while in the route.ts the instance of the req is that of NextRequest. And somehow the shopify function is not able to access the headers properly.

What is the specific request format that the shopify library expects? And how I can convert the NextRequest into that format?

Thanks!

• @shopify/shopify-api version: ^9.3.2
• Node version: v20.11.1
• Operating system: macOS 14.3 (Sonoma)

Expected behavior

The request should be recognized as valid as it contains the authorization header.

Actual behavior

The shopify library fails to read the headers properly.

[ozzyonfire]

when you initialize your shopify context, what adapter are you using?

I've had success with the web-api.

import "@shopify/shopify-api/adapters/web-api";

Also, on the client-side what are you doing to get the session token? are you using AppBridge? If so, which version?

[artooras]

Hi @ozzyonfire, I'm suing the @shopify/shopify-api/adapters/node adapter since I'm initialising shopify on the server (e.g. in a webhook route). And on the client-side I'm using the old authenticatedFetch(). When I manually inspect/log the received request, it does carry the authorization header, so it seems that the request is initiated correctly.

[ozzyonfire]

have you tried the web-api methods? Your api route is getting a NextApiRequest which is just an extension of the native Request object.

This should be compatible with the web-api. I have an example repo with next js app router, verified sessions and hitting a protected api route. It also uses the old AppBridge, but I'm currently working on migrating it to the new one.

https://github.com/ozzyonfire/shopify-next-app

[matteodepalo]

Hi @artooras, I think what @ozzyonfire is saying is right, you could try the web-api methods and see if they work.

[github-actions]

We are closing this issue because we did not hear back regarding additional details we needed to resolve this issue. If the issue persists and you are able to provide the missing clarification we need, feel free to respond and reopen this issue.

We appreciate your understanding as we try to manage our number of open issues.

[artooras]

Hi @ozzyonfire and @matteodepalo, I finally got the chance to come back to this issue. And indeed, switching from node to web-api environment fixed my issue. Thanks you!