title: WebAuthn Relaying Party ID for various Setups
body: <p>I have an Angular 11 Project, which implements a WebAuthn registration. The backend is SpringBoot 2.4</p>
  <p>WebAuthn Login should work in two parts of the project, the &quot;main&quot; and the &quot;viewer&quot;
  The domain setup is rather complicated:</p>
  <h3>Main Project</h3>
  <p><em>Urls</em></p>
  <ul>
  <li>Local: https://localhost:4202</li>
  <li>Staging: <a href="https://company.com" rel="nofollow noreferrer">https://company.com</a> (local Kubernetes Server)</li>
  <li>Prod: <a href="https://company-project.com" rel="nofollow noreferrer">https://company-project.com</a></li>
  </ul>
  <h3>Viewer Project</h3>
  <p><em>Urls</em></p>
  <ul>
  <li>Local: https://localhost:4200</li>
  <li>Staging: <a href="https://viewer.develop.plattform.intra.company.com" rel="nofollow noreferrer">https://viewer.develop.plattform.intra.company.com</a> (local Kubernetes Server)</li>
  <li>Prod: <a href="https://viewer.company-project.com" rel="nofollow noreferrer">https://viewer.company-project.com</a></li>
  </ul>
  <h3>Code</h3>
  <p><em>environment.ts</em></p>
  <pre><code>prodUrls: ['company-project.com'],
  webauthn: {
    name: &quot;Company DEV&quot;,
    rpId: &quot;localhost&quot;
  }
  </code></pre>
  <p><em>environment.prod.ts</em> (replace in build)</p>
  <pre><code>prodUrls: ['company-project.com'],
  webauthn: {
    name: &quot;Company Prod&quot;,
    rpId: &quot;plattform.intra.company.com&quot; // gets overridden by values in &quot;prodUrls&quot;
  }
  </code></pre>
  <p><em>webauthn.service.ts</em></p>
  <pre><code>private _getRelyingPartyInfo(): RelyingParty {
  
    let rpId = environment.webauthn.rpId;
  
    /**
     * Check if the Hostname matches one of our Prod Hostnames
     * and use this instead
     */
    environment.prodUrls.forEach((url, index) =&gt; {
      if (location.hostname.indexOf(url) &gt; -1) {
        rpId = environment.prodUrls[index];
      }
    });
  
    const rp = {
      id: rpId,
      name: environment.webauthn.name
    };
  
    return rp;
  }
  </code></pre>
  <h3>The Issues</h3>
  <ul>
  <li>It works locally, using the rpId <code>localhost</code> (both Backend and Frontend locally)</li>
  <li>It does NOT work on staging --&gt; Backend throws</li>
  </ul>
  <blockquote>
  <p>WebAuthnException message: rpIdHash doesn't match the hash of preconfigured rpId.</p>
  </blockquote>
  <ul>
  <li>It <em>should</em> work on Prod using <code>company-project.com</code> as rpId (scared to deploy as it does not work on staging)</li>
  </ul>
  <h3>What I tried</h3>
  <p>For staging, I changed the rpId to <code>develop.plattform.intra.company.com</code> and I can register and login in &quot;main&quot;. Logging in on &quot;viewer&quot; throws an error as well</p>
  <p>The spec is not very specific about what should work: <a href="https://www.w3.org/TR/webauthn/#relying-party-identifier" rel="nofollow noreferrer">https://www.w3.org/TR/webauthn/#relying-party-identifier</a>, it only says what shouldn't work. I assume, that the multiple subdomains complicate things on staging?</p>
  <p>What would be the correct rpId for staging and is the assumption that <code>company-project.com</code> as rpId should work on prod correct?</p>