Unable to get custom JWT verifier flow working

[edwardysun]

Hi there, I'm trying to use your Custom JWT Login demo. I've set up the Custom Verifier (on testnet) on Dashboard. The verifier is fully deployed. I updated the client ID and the backend key ID (when signing). I continue to get the error "WalletLoginError: Failed to connect with walletFailed to login with openlogin" when calling "await web3auth.connectTo". Could someone let me know what I may be missing?

Client-side code:

  useEffect(() => {
    const init = async () => {
      try {
        const web3auth = new Web3AuthCore({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x5",
          },
        });

        console.log("web3auth is ", web3auth);
        const openloginAdapter = new OpenloginAdapter({
          adapterSettings: {
            clientId,
            network: "testnet",
            uxMode: "redirect",
            loginConfig: {
              jwt: {
                name: "Custom JWT Login",
                verifier: "web3auth-core-custom-jwt-2",
                typeOfLogin: "jwt",
                clientId,
              },
            },
          },
        });

        console.log("openloginAdapter is ", openloginAdapter);
        web3auth.configureAdapter(openloginAdapter);
        setWeb3auth(web3auth);

        await web3auth.init();
        console.log("completed init");
        if (web3auth.provider) {
          setProvider(web3auth.provider);
          console.log("set provider", web3auth.provider);
        } else {
          console.log("no provider");
        }
      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);

  const getIdToken = async () => {
    // Get idToken from server
    const res = await fetch("http://localhost:8080/api/token", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const data = await res.json();
    return data?.token;
  };

  const login = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }

    const web3authProvider = await web3auth.connectTo("openlogin", {
      loginProvider: "jwt",
      extraLoginOptions: {
        id_token: await getIdToken(),
        verifierIdField: "sub",
        domain: "http://localhost:3000",
        response_type: "token",
        //   scope: "", // e.g. email openid
      },
    });
    setProvider(web3authProvider);
  };

Server-side:

app.post("/api/token", async (req, res) => {
  try {
    var privateKey = fs.readFileSync("privateKey.pem");
    var token = jwt.sign(
      {
        sub: "Custom JWT for Web3Auth Custom Auth",
        name: "Mohammad Shahbaz Alam",
        email: "[email protected]",
        aud: "urn:my-resource-server", // -> to be used in Custom Authentication as JWT Field
        iss: "https://my-authz-server", // -> to be used in Custom Authentication as JWT Field
        iat: Math.floor(Date.now() / 1000),
        exp: Math.floor(Date.now() / 1000) + 60 * 60,
      },
      privateKey,
      { algorithm: "RS256", keyid: "8ecf465e-4b3d-4acf-97eb-d409489de39c" } // keyid here matches the public JWK kid value
    );
    res.status(200).json({ token });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

A few other notes on what I did:

• Followed the steps to generate my public key and private key pair and converted the public key pem file to JWK. My JWKS is as follows:

{
    keys: [
      {
        alg: "RS256",
        kty: "RSA",
        use: "sig",
        e: "AQAB",
        kid: "8ecf465e-4b3d-4acf-97eb-d409489de39c",
        n: "ui_JLIjshmH36tL8EYdzrd36r6skNENhw2prZABbRX7kg06FEIMCAsHKpROnnEDMXz4mwR1Cxn-ReCPQukTmXw"
      }
    ]
  }

Thank you for your help

[shahbaz17]

Hey @edwardysun

Can you try to run this in a different browser or try removing the local & session storage from the Application tab of the developer menu inside the browser?

Also, please update this in your code:

const web3authProvider = await web3auth.connectTo("openlogin", {
      loginProvider: "jwt",
      extraLoginOptions: {
        id_token: await getIdToken(),
        verifierIdField: "sub",
        domain: "http://localhost:3000",
        response_type: "token",
        //   scope: "", // e.g. email openid
      },
    });

With the below code:

const web3authProvider = await web3auth.connectTo("openlogin", {
      loginProvider: "jwt",
      extraLoginOptions: {
        id_token: await getIdToken(),
        verifierIdField: "sub",
        domain: "http://localhost:3000",
      },
 });