Error: "DOMException [InvalidCharacterError]: Invalid character" on fresh install

[ConsM]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

Latest

What version of Remix are you using?

No response

Steps to Reproduce

1. run npm create @shopify/hydrogen@latest
2. "Link to shopify account", after I've chosen that I saw a message "Press any key to login to shopify account". Pressing any key nothing happened so I thought I try with a mock store, back to step 1
3. With mock store
4. Entered my app name
5. Chosen: Typescript, Tailwind
6. install deps, Yes
7. Create global 'h2' , No
8. Scaffold ? Yes, with subfolders

Then run npm run dev, accessed localhost:3001 and got the below error

> {project-name}@1.0.0 dev
> shopify hydrogen dev --codegen


Environment variables injected into MiniOxygen:

SESSION_SECRET        from local .env
PUBLIC_STORE_DOMAIN   from local .env

╭─ success ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                │
│  Initial build: 1611ms                                                                                                                         │
│  MiniOxygen development server running.                                                                                                        │
│                                                                                                                                                │
│  View Hydrogen app: http://localhost:3000                                                                                                      │
│  View GraphiQL API browser: http://localhost:3000/graphiql                                                                                     │
│  View server-side network requests: http://localhost:3000/debug-network                                                                        │
│                                                                                                                                                │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

DOMException [InvalidCharacterError]: Invalid character
    at atob (/{project-path}/node_modules/@miniflare/core/src/standards/encoding.ts:33:13)
    at unsign (/{project-path}/node_modules/@shopify/remix-oxygen/src/crypto.ts:20:38)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at decodeCookieValue (/{project-path}/node_modules/@remix-run/server-runtime/dist/esm/cookies.js:88:27)
    at Object.parse (/{project-path}/node_modules/@remix-run/server-runtime/dist/esm/cookies.js:60:60)
    at Object.getSession (/{project-path}/node_modules/@remix-run/server-runtime/dist/esm/sessions/cookieStorage.js:32:45)
    at Function.init (/{project-path}/server.ts:138:21)
    at async Promise.all (index 1)
    at Object.fetch (/{project-path}/server.ts:36:32)
    at EventTarget.[kDispatchFetch] (/{project-path}}/node_modules/@miniflare/core/src/standards/event.ts:385:13)
    at onRequest (file:///{project-path}/node_modules/@shopify/cli-hydrogen/dist/lib/mini-oxygen/node.js:64:24)
    at file:///{project-path}/node_modules/@shopify/mini-oxygen/dist/mini-oxygen/server.js:146:22
   GET  500  render  /  152ms
   GET  500  render  /favicon.ico  1ms

Have also tried with my shopify credentials in the .env got the same error.

Expected Behavior

Would expect a fresh install to work OOB

Actual Behavior

Server is returning 500

[blittle]

Hi @ConsM. Thank you for reporting these problems. I'm able to reproduce the first issue with logging into Shopify, but I'm unable to reproduce the second 500 error. Could you give some more information about your environment? What version of Node are you using?

[ConsM]

Hi @blittle, thanks for getting back.
Forgot to add the node version, its v16.18.0 . I assume this is fine since I need at least 16.13 right ?

[blittle]

Hmmm, I'm still unable to reproduce the problem. Looking at the stack trace though, it seems as though something is breaking from a signed cookie that is being sent. Try loading localhost:3000 in an incognito window.

[ConsM]

spot on ! What is the actual cause though ?

[blittle]

You probably have a cookie set at localhost:3000 for another app you've been developing. It is signed in a way that is malformed from Remix's cookieSessionStorage perspective. That cookie got set from another app you are building, and it now is shared/sent to Hydrogen when you startup on the same hostname.

Though I think we should probably handle malformed cookies more gracefully with a 400 level error instead of 500.

[blittle]

Assuming there's nothing private in the cookie, would you mind sending me the cookies set on localhost:3000 (maybe as a private gist) so I can nail down exactly why it's failing to parse.

[ConsM]

sure, have created a secret one - how/where should i share it ?

[blittle]

Maybe if you tag my GH user in a comment on the gist it will notify me?

[blittle]

@ConsM got it! Thank you!

[blittle]

The first part of this issue is now resolved in 2023.10.1