[Archive] When using our own authentication infrastructure (OIDC: Authorization Code Flow), which SDK should we choose?

[ogawara_naoki]

Archived Content from Web3Auth Community

This topic was originally posted by ogawara_naoki on 4/6/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

---

Please provide the following details too when asking for help in this category:

• SDK Version: 5.1.0
• Platform: hosts the web3auth-SDK
• Browser Console Screenshots:
• Related to Custom Authentication? Please provide the following info too: (Optional)
  • Verifier Name: custom-sinhto-testnet
  • JWKS Endpoint: jwks endpoint
  • Sample idToken(JWT)

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyOTc5MDAwMDA0MTgwIiwiYXVkIjpbIjY4MDIzODQyNDAyMCJdLCJpc3MiOiJodHRwczovL2F1dGgtZGV2LnN1LXBheS5qcCIsImV4cCI6MTY4MDc3Mzk0MCwiaWF0IjoxNjgwNjg3NTQwfQ.4XvDF3WJLbjfo7uNy_91WC2yth24-bxahd89u-Mon0Y&expires_in=86400

Please provide the Web3Auth initialization and login code snippet below:

useEffect(() => {
    const init = async () => {
      try {
        const web3auth = new Web3AuthNoModal({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x13881",
          },
          web3AuthNetwork: "testnet",
          useCoreKitKey: false,
        });
    const openloginAdapter = new OpenloginAdapter({
      adapterSettings: {
        clientId,
        uxMode: "popup",
        loginConfig: {
          jwt: {
            verifier: "custom-sinhto-testnet",
            typeOfLogin: "jwt",
          },
        },
      },
    });
    web3auth.configureAdapter(openloginAdapter);
    setWeb3auth(web3auth);

    await web3auth.init();
    if (web3auth.provider) {
      setProvider(web3auth.provider);
    }
  } catch (error) {
    console.error(error);
  }
};

init();

}, );

We are considering using our own authentication infrastructure to create a torus wallet.

We are trying to adjust the parameters while referencing Auth0’s SDK.

Own authentication infrastructure → redirect to backend server & get id token → redirect to frontend with id token → web3auth.connectTo

const web3authProvider = await web3auth.connectTo(
      WALLET_ADAPTERS.OPENLOGIN,
      {
        loginProvider: "jwt",
        extraLoginOptions: {
          verifierIdField: "sub",
          id_token: query.get("token"),  // Query parameter when redirecting
          domain: "https://auth-dev.su-pay.jp"
        },
      }
    );

Is our understanding correct that we want to achieve the flow described above?

and I get the following error

スクリーンショット 2023-04-06 17.14.361895×1345 498 KB

[shahbaz]

Hi @ogawara_naoki,

Upon examining the details, I have identified several issues that need to be addressed:

1. The algorithm used in the JWKS is PS256, whereas the provided token sample uses HS256.
2. The kid field is absent in the id_token.
3. The aud field is currently an array, and it needs to be changed to a string.

Please let me know if you have any further questions or concerns regarding this issue.

Screenshot 2023-04-06 at 3.14.12 PM1213×500 46.6 KB

[ogawara_naoki]

As a result of addressing points 1 and 2, the view successfully switched to loggedInView.
We plan to continue trying to create a Torus Wallet.
If we encounter any issues, we will ask for your help again.
Thank you!

screenshot1881×1344 257 KB