I'm trying to use WebAuthn on my site, which I've changed from https://localhost:3000 to https://testsite.com:3000. When I attempt to register a new passkey using simplewebauthn in the browser, I get the error: "NotAllowedError: WebAuthn is not supported on sites with TLS certificate errors." I created a self-signed SSL certificate using OpenSSL, and my server's rp_id is set to testsite.com, and rp_origin is set to https://testsite.com:3000. I'm puzzled about why it only works when I include the port number in the rp_id. Does anyone have suggestions for fixing this issue?
3 Answers
Your self-signed certificate is likely the problem here. Browsers are strict about WebAuthn only functioning in secure contexts, and if your certificate isn't recognized as trusted, it won't work. You can add your self-signed cert to your trust store—try using Keychain Access on macOS, the certificate manager on Windows, or relevant tools for your Linux distribution.
To make this work, you need to ensure the browser trusts your self-signed certificate. Simply clicking through warnings won’t cut it. Keep your self-signed certificate as the CA and generate a new certificate that is signed by the root for your domain. After that, import the root CA into the system trust store or browser trust store, depending on what you're using.
The port number is crucial! Browsers usually default to port 443 for SSL if no other port is specified, so including the port number in your rp_id helps resolve issues related to that.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads