Using client side js (React, SolidJS) with different url not working

[roshangm1]

First of all, many thanks for this amazing library. I tried the example todos app and it worked like charm. I am trying to use client side library instead of using the EJS. They will have two different urls. When trying to do signup, I get the challenge but register is never triggered as a result of which I am not able to store the public key.

I always get 403 forbidden because of this reason. Do you think I am doing something wrong here ?

[alessiomason]

Same here, did you find any solutions?

[matthiasprieth]

Hi @roshangm1 @alessiomason, I had the same problem with NextJs/React & lost 2 hours because of this "403 forbidden" error. I was comparing my project with the example project(https://github.com/passport/todos-express-webauthn) & at some point I realized that my "challenge" post request was being send twice from the client to the server. After changing the useEffect from:

    useEffect(() => {
        if (typeof window !== 'undefined') {
            // Dynamically create script element
            const script1 = document.createElement('script');
            script1.src = '/static/scripts/base64url.js';
            script1.async = true;

            const script2 = document.createElement('script');
            script2.src = '/static/scripts/signup.js';
            script2.async = true;
      
            document.body.appendChild(script1);
            document.body.appendChild(script2);
      
            return () => {
                document.body.removeChild(script1);
                document.body.removeChild(script2);
            };
        }
    }, [router.isReady])

to this (removing the router.isReady) it works, because the scripts are being added only once:

    useEffect(() => {
        //same as above
    }, [])

I dont know how you include those scripts in your React or SolidJs project, but you need to be careful when you rerender your page so that you don't bind the submit function several times. Also I added a ID to the form, just in case you have several forms on the page:

document.querySelector('form#passport-signup').addEventListener('submit', function(event) {
....

After fixing it looked like that in my dev tools: