Error when creating API Key

[bartvdbraak]

Hi there,

I am testing out this environment locally and getting the following error:

Could not create api Key
Digest method not supported

Browser Console

Here are (some) of the messages I see in my browser's console:

[Vercel Web Analytics] Debug mode is enabled by default in development. No requests will be sent to the server. script.debug.js:1:137
[Vercel Web Analytics] [pageview] http://localhost:3000/onboarding 
Object { o: "http://localhost:3000/onboarding", sv: "0.1.1", sdkn: "@vercel/analytics", sdkv: "1.0.1", ts: 1686094442277, r: "" }
script.debug.js:1:137
Cookie “__client_uat” has been rejected for invalid domain. environment
Cookie “__client_uat” has been rejected for invalid domain. client
Cookie “__client_uat” has been rejected for invalid domain. environment
Cookie “__client_uat” has been rejected for invalid domain. client
The resource at “http://localhost:3000/_next/static/media/162bf645eb375add-s.p.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. onboarding
Cookie “__client_uat” has been rejected for invalid domain. 2 tokens
TRPCClientError: Digest method not supported
    TRPCClientError transformResult-9a244fe7.mjs:23
    from transformResult-9a244fe7.mjs:4
    httpBatchLink httpBatchLink.mjs:201
Caused by: undefined
app-index.js:32:21
TRPCClientError: Digest method not supported
    TRPCClientError transformResult-9a244fe7.mjs:23
    from transformResult-9a244fe7.mjs:4
    httpBatchLink httpBatchLink.mjs:201
Caused by: undefined
app-index.js:32:21
Cookie “__client_uat” has been rejected for invalid domain. 2 tokens
GET
http://localhost:3000/_next/static/media/2aaf0723e720e8b9-s.p.woff2
[HTTP/1.1 200 OK 3ms]

Server logs

This is the output when I start my development server:

.venv ❯ pnpm turbo run dev --filter=web
• Packages in scope: @highstorm/web
• Running dev in 1 packages
• Remote caching disabled
@highstorm/web:dev: cache bypass, force executing ebe7a5a734763a48
@highstorm/web:dev: 
@highstorm/web:dev: > @highstorm/[email protected] dev /Users/bart.vanderbraak/Personal/repositories/Github/highstorm/apps/web
@highstorm/web:dev: > next dev
@highstorm/web:dev: 
@highstorm/web:dev: - ready started server on 0.0.0.0:3000, url: http://localhost:3000
@highstorm/web:dev: - info Loaded env from /Users/bart.vanderbraak/Personal/repositories/Github/highstorm/apps/web/.env
@highstorm/web:dev: - warn You have enabled experimental feature (esmExternals) in next.config.mjs.
@highstorm/web:dev: - warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
@highstorm/web:dev: 
@highstorm/web:dev: - event compiled client and server successfully in 1305 ms (313 modules)
@highstorm/web:dev: - wait compiling...
@highstorm/web:dev: - wait compiling /middleware (client and server)...
@highstorm/web:dev: - warn Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `pnpm dlx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font
@highstorm/web:dev: - event compiled client and server successfully in 567 ms (426 modules)
@highstorm/web:dev: - wait compiling /(authenticated)/(app)/onboarding/page (client and server)...
@highstorm/web:dev: - wait compiling /api/trpc/[trpc] (client and server)...
@highstorm/web:dev: - wait compiling /(authenticated)/(app)/overview/page (client and server)...
@highstorm/web:dev: - event compiled client and server successfully in 8s (2329 modules)
@highstorm/web:dev: 
@highstorm/web:dev: - warn metadata.metadataBase is not set for resolving social open graph or twitter images, fallbacks to "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

Environment variables

Here is the .env file I am using:

# https://planetscale.com/
DATABASE_URL='mysql://<redacted>:<redacted>@aws.connect.psdb.cloud/<redacted>sslaccept=strict'

# https://www.tinybird.co/
TINYBIRD_TOKEN='p.e<redacted>d8'

# https://upstash.com/qstash
QSTASH_TOKEN="eyJ<redacted>In0="
QSTASH_CURRENT_SIGNING_KEY="sig_<redacted>9B"
QSTASH_NEXT_SIGNING_KEY="sig_<redacted>Yv"

# https://upstash.com/redis
UPSTASH_REDIS_REST_URL="https://<redacted>.upstash.io"
UPSTASH_REDIS_REST_TOKEN="AZ<redacted>mM="

NEXT_PUBLIC_APP_URL="http://localhost:3000"

# https://clerk.com/
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_<redacted>"
CLERK_SECRET_KEY="sk_test_<redacted>"
CLERK_WEBHOOK_SECRET=""

System information

❯ neofetch            
                    'c.          <user>@<hostname> 
                 ,xNMM.          ---------------------------------- 
               .OMMMMo           OS: macOS 13.3.1 22E261 x86_64 
               OMMM0,            Host: MacBookPro16,1 
     .;loddo:' loolloddol;.      Kernel: 22.4.0 
   cKMMMMMMMMMMNWMMMMMMMMMM0:    Uptime: 7 days, 16 hours, 28 mins 
 .KMMMMMMMMMMMMMMMMMMMMMMMWd.    Packages: 296 (brew) 
 XMMMMMMMMMMMMMMMMMMMMMMMX.      Shell: zsh 5.9 
;MMMMMMMMMMMMMMMMMMMMMMMM:       Resolution: 2560x1440, 1792x1120, 2560x1440 
:MMMMMMMMMMMMMMMMMMMMMMMM:       DE: Aqua 
.MMMMMMMMMMMMMMMMMMMMMMMMX.      WM: Rectangle 
 kMMMMMMMMMMMMMMMMMMMMMMMMWd.    Terminal: vscode 
 .XMMMMMMMMMMMMMMMMMMMMMMMMMMk   CPU: Intel i9-9880H (16) @ 2.30GHz 
  .XMMMMMMMMMMMMMMMMMMMMMMMMK.   GPU: Intel UHD Graphics 630, AMD Radeon Pro 5500M 
    kMMMMMMMMMMMMMMMMMMMMMMd     Memory: 18871MiB / 32768MiB 
     ;KMMMMMMMWXXWMMMMMMMk.
       .cooc,.    .,coo:.                                                                                    

[chronark]

highstorm/apps/web/lib/trpc/routers/apikey.ts

Line 69 in ecda880

keyHash: crypto.createHash("SHA-256").update(apiKey).digest("base64"),

It appears this needs to be sha256 instead of SHA-256 according to https://nodejs.org/api/crypto.html#cryptocreatehashalgorithm-options

I can fix it on the weekend :) or PRs are welcome of course

[bartvdbraak]

I created a pull request with the fix you mentioned!

[chronark]

so I tried this again and it worked on vercel with both of them, which is pretty weird

what node version do you run locally?

[bartvdbraak]

❯ node --version      
v20.2.0