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:
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