Web3 auth login fails after redirect from local to ttps://auth.web3auth.io/v9/callback (Twitter login)

Help - Plug n Play PnP Web SDKs
, , ,
1

First step of Sign in does show a pop up that later shows a pop-up that redirects the user to a web3 auth url. However, after that a jwt-related error is shown in the pop-up screen and web3Auth login fails. How can this issue be fixed?

image
image2688×810 134 KB

Some extra info to make it easier to dig into the issue:

  • SDK Version(package.json):
    "@web3auth/auth-adapter": "^9.5.2",
    "@web3auth/base": "^9.5.2",
    "@web3auth/ethereum-provider": "^9.5.2",
    "@web3auth/no-modal": "^9.5.2",

  • Platform:
    Web Application (Next.js)

  • Browser Console Screenshots:

    image
    image2688×810 262 KB

    • Verifier Name:
      web3auth
    • JWKS Endpoint:
"jwtParams": {
            "domain": "http://localhost:3001",
            "connection": "twitter",
            "isVerifierIdCaseSensitive": false,
            "verifierIdField": "sub"
          },
  • Sample idToken (JWT):
    "eyJhbGciOiJSUzI1NiIsImtpZCI6IjBhYmQzYTQzMTc4YzE0MjlkNWE0NDBiYWUzNzM1NDRjMDlmNGUzODciLCJ0eXAiOiJKV1QifQ.eyJuYW1lIjoiU1JMIiwicGljdHVyZSI6Imh0dHBzOi8vcGJzLnR3aW1nLmNvbS9wcm9maWxlX2ltYWdlcy8xNzc4ODY4Nzk3NzQwMzAyMzM2L3lKTlg3cGJJX25vcm1hbC5qcGciLCJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vZmFpcnN3YXAtMjQwMTgiLCJhdWQiOiJmYWlyc3dhcC0yNDAxOCIsImF1dGhfdGltZSI6MTczNzMwNjA4MiwidXNlcl9pZCI6IlFjUldwSTd6enFjOWdxVGptOFU1a0h4REpRQjMiLCJzdWIiOiJRY1JXcEk3enpxYzlncVRqbThVNWtIeERKUUIzIiwiaWF0IjoxNzM3MzA2MDgyLCJleHAiOjE3MzczMDk2ODIsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsidHdpdHRlci5jb20iOlsiMTQ5ODc1NDYyMDk4NTkwNTE1NCJdfSwic2lnbl9pbl9wcm92aWRlciI6InR3aXR0ZXIuY29tIn19.Em1bjf11cKhI1iFGDIwqatCq32yiidEmYfCXCxR8PvUm_Td2rpY0Hk-Sy_J7DbJtwUV1OuhYOA_7zxiY36mY5Bh4AugrPu4ry877dsrG_YNa2Qg2FeLKR_L64-OBvTevVRBHOnata0-QRBeLxGz31yZ7vof38ndqVqXxorHn0Hnr__nK4dBdkdHAQwTESnkLRjHDYLjMIIFMusOz1wVaJRXraW0AFOUcyr_nRrgty4J7kTqwvbKTaNdalNBXUPg6hg-y2nvHGDBwU37Gx1v2pgAtrC55C4duM8uDTkFw2spGdKhEjArVmlZ_GgtIjy7ohJdIYArvnII5ryz-GTlyrw"

Web3Auth initialization and login code snippet

Login code snippet:

 function signInWithTwitter() {
    signInWithPopup(auth, provider)
      .then(async (result) => {
        // User signed in successfully
        const user = result.user;
        const userToken = await user.getIdToken(true);
        console.log("idToken", userToken);

        localStorage.setItem("user", JSON.stringify(user));

        const chainConfig = {
          chainNamespace: CHAIN_NAMESPACES.EIP155,
          chainId: "0x1", // Please use 0x1 for Mainnet
          rpcTarget: "https://rpc.ankr.com/eth",
          displayName: "Ethereum Mainnet",
          blockExplorerUrl: "https://etherscan.io/",
          ticker: "ETH",
          tickerName: "Ethereum",
          logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
        };

        const privateKeyProvider = new EthereumPrivateKeyProvider({
          config: { chainConfig },
        });

        const web3auth = new Web3AuthNoModal({
          clientId: CLIENT_ID,
          chainConfig, // Ensure chainConfig is passed here

          web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
          privateKeyProvider,
        });

        // Add wallet adapter for auth wallet
        console.log("wallet adapter", WALLET_ADAPTERS.AUTH);
        const authAdapter = new AuthAdapter({
          privateKeyProvider,
          adapterSettings: {
            uxMode: UX_MODE.POPUP,
            loginConfig: {
              jwt: {
                verifier: "w3a-fairswap",
                typeOfLogin: "twitter",
                clientId: CLIENT_ID,
              },
            },
          },
        });
        web3auth.configureAdapter(authAdapter);

        await web3auth.init();

        // Save user data to Firestore
        await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
          loginProvider: "twitter",
          extraLoginOptions: {
            id_token: userToken,
            verifierIdField: "sub",
            domain: "http://localhost:3001",
          },
        });
      })
      .catch((error) => {
        // Handle Errors here.
        console.log("Error signing in: " + error.message);
      });
  }

Is any config wrong or any step missing?

2

Hello there! Thanks for sharing all the details. It seems like you’re encountering a JWT-related error during the Web3Auth login flow with Twitter. Let’s see if we can spot any issues in the configuration:

  1. Verifier Name: Ensure that the web3auth verifier is correctly set up in the project’s settings in the Web3Auth dashboard.

  2. JWT Configuration: The JWT parameters in the code snippet need to precisely match the settings used in Web3Auth dashboard. Double-check that the domain, verifierIdField, and other JWT parameters are accurately configured.

  3. Auth Initialization: Confirm that the CLIENT_ID and other dynamic values in your setup are correctly set, as incorrect configuration might lead to token validation issues.

  4. Provider Settings: Check that the loginConfig for the AuthAdapter is correct, especially the verifier and typeOfLogin values.

  5. Testing Environment: Ensure that your local setup (e.g., domain and port) matches the JWT domain parameter.

Everything else seems to be correctly aligned regarding the basic initialization and login steps. If these suggestions don’t help resolve the issue, I recommend reaching out with this detailed information to your Web3Auth support for more personalized assistance.

Additionally, if you’ve recently updated any SDK versions or changed configuration settings, reverting back to a previous working setup might help identify the problem.

Feel free to ask if you have more questions or need further clarifications! :blush:

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

3

Hey @srocalag

From the console logs, looks like you’re using web3auth twitter verifier and some wrong config.

Kindly share the init and login code to better assist you.