crypto is undefined in API routes (Next13 appDir)

[dominictobias]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.2
      npm: 9.6.0
      Yarn: 1.22.19
      pnpm: 7.28.0
    Relevant packages:
      next: 13.2.3
      eslint-config-next: 13.2.3
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

http://plz-make-a-appdir-tpl

To Reproduce

export async function GET(request: Request) {
  console.log('crypto', crypto)
}

Describe the Bug

crypto is undefined in API routes, at least locally when running dev. This impacts a lot of things like auth libraries (e.g. oauth would have to use insecure plain code challenge instead of S256). Crypto is a fundamental module for writing secure apps.

Expected Behavior

Should be able to use crypto, it's a browser (V8) supported object.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[bbsweb]

I think you should add export const runtime = 'edge'

because crypto only work in edge-runtime

[dominictobias]

Thanks that worked! I had no idea Vercel even had a Node runtime. According to the beta docs I put:
export const runtime = 'experimental-edge'

[balazsorban44]

Keep in mind, Vercel and Next.js are different (although the runtime capabilities should match).

Both have however a Node.js runtime, which is the default.

The Web Crypto API in Node.js has been unflagged on globalThis since version 19 (so using Node.js 19+ would work in your case, without setting the runtime to edge), in previous versions, you can run the Node.js process with --experimental-global-webcrypto, or add the following snippet:

import crypto from "node:crypto"
globalThis.crypto ??= crypto.webcrypto

Regarding app repro template, we already have one: https://github.com/vercel/next.js/tree/canary/examples/reproduction-template-app-dir (I'll make sure to add this to the bug report description)

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.