WebAuthn cryptically not working in production but works perfectly in development

[arimendelow]

Hi! For some reason, WebAuthn isn’t working with my webapp once I deploy it. The most information I’m able to get is as follows:

Error while registering: Could not complete registration: Unexpected token e in JSON at position 0
    at Object.register

The Auth payloads look exactly the same. This happens in both Chrome and Safari.

Any ideas how to get more info on this? I’m digging through the @redwoodjs/dist/webAuthn files but to no avail.

Thanks!

[arimendelow]

(and yes, I’ve configured it for production via Self-hosted Authentication (dbAuth) | RedwoodJS Docs)

[arimendelow]

The error is specifically thrown here, on line 163 in webAuthn/index.js:

[rob]

That classic “Unexpected token e in JSON at position 0” message sounds like text or HTML is being sent in the payload instead of JSON. But if you inspect the network request you can see that indeed, JSON data is going up? And the Content-Type header is actually application/json?

[arimendelow]

Hey @rob,

Yup

[arimendelow]

As far as I can tell, the exact same thing is happening in my dev environment, but I have no such errors - is there anything different happening there?

[rob]

Only that the browser will sometimes make security exceptions for localhost and let you get away with things it wouldn’t from a real domain.

What’s inside that collapsed response key in the payload?

[arimendelow]

Right. Just this - I did think it was weird that clientDataJSON is just the bearer token, and isn’t actually JSON. Maybe that’s the issue? Would explain that it’s specifically complaining about token e

[rob]

Interesting…what does clientDataJSON look like in local dev, where it does work? No idea why that key would contain different data in development vs. production though!

[arimendelow]

Looks the exact same

[rob]

Hmmmm…that object is created/handled by the simplewebauthn lib that we use, Redwood’s not creating that or messing with the contents at all. Is there a previous request to that, one that retrieves the registration options? The URL will be something like /auth?method=webAuthnRegOptions … what’s the payload/response of that one look like?

[rob]

Here’s the source for the WebAuthn code if you’re interested: redwood/webAuthn.ts at main · redwoodjs/redwood · GitHub You can see there are four main functions there, one to get registration options, one to register, one to get auth options, one to auth. That’s the web side code, the api side is here: redwood/DbAuthHandler.ts at main · redwoodjs/redwood · GitHub

[rob]

It looks like clientDataJSON is supposed to be a base64-encoded string so maybe that’s okay: SimpleWebAuthn/decodeClientDataJSON.ts at master · MasterKale/SimpleWebAuthn · GitHub

[arimendelow]

yes! the response looks like this -

[arimendelow]

I’ve also confirmed that it’s not an issue with the JSON stringification that’s being passed into send:

[rob]

Can you try adding a host entry in /etc/hosts so that you have a “real” domain name and access the site that way? Something like:

127.0.0.1 home.test

You’ll need to make a couple of config changes so that you can access the dev server from there.

In redwood.toml you’ll have to add the hosts line:

[web]
  title = "Redwood App"
  port = 8910
+ host = '0.0.0.0'

And then start the dev server with:

yarn redwood dev --fwd="--allowed-hosts all"

Then see if stuff still works going to http://home.test:8910

[IAmKale]

Hello, author of SimpleWebAuthn here. @arimendelow linked me here via an issue on the project’s repo. I figured I’d try and contribute here since there’s already an existing conversation.

There’s talk of a broken “production” environment here; is that publicly available? I want to throw in some breakpoints in the browser and see if something looks wonky on that environment.

And I apologize in advance if I ask some “dumb” RedwoodJS questions, I’m flattered the project uses my stuff but I’ve not yet used RedwoodJS myself

[rob]

Dude Kale, welcome! Thanks for coming over and offering to help!

[arimendelow]

Welcome, @IAmKale! Thanks for taking the time to join us here

I haven’t yet gotten to try out @rob’s latest suggestion, but yes that production environment is public at https://spoonjoy.app/

Steps to repro:

1. Login here with the username tester1 and password test
2. When you get the following screen, hit turn on. During that flow is where the error is thrown.
   
   

Thanks so much for your help and let me know if there’s any other info I can provide!

[IAmKale]

I found it, looks like http://spoonjoy(dot)co (I have to mangle this because I’m a “new user” and can’t post more than two links ) is the site? I’ll bet you what we’re dealing with here is a non-HTTPS website trying to use WebAuthn, and the WebAuthn call throws an error because WebAuthn needs to be used in a “Secure Context”: Secure contexts - Web security | MDN