[Archive] Unable to get custom JWT verifier flow working

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by githubdiscussions on 10/27/2022.
This content has been migrated from our previous community forum to preserve valuable discussions.

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:

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);

};">

  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: "shahbaz@web3auth.io",
        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



Originally posted by: edwardysun

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/779
2

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",
      },
 });


Originally posted by: shahbaz17