Authentication not redirecting back to application after error

[silver]

I’m using Auth0 login. On ANY error (such as “Please verify your email before continuing” thrown by Auth0 flow I set up myself, or “Could not get result from torus nodes could not validate field email_verified, token false, expected true” thrown by web3auth itself) the flow stops at Web3Auth. It does not redirect back to my web application.

This is a major issue for me… I can do any number of automated steps or ask the user do steps to mitigate any issue IF web3auth just forwarded (redirected) the user to me with the error. The users become stuck at web3auth with some confusing technical error. Not to mention seeing some UI (web3auth UI) which is not my application or Auth0 UI. How can I avoid this screen altogether?? Just give me the error!

Using this to connect (tried to also add redirect_uri: “https://localhost” with no improvement):

await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
    loginProvider: "jwt",
    extraLoginOptions: {
        domain: "https://MY_APP.eu.auth0.com",
        verifierIdField: "sub",
        login_hint: "my@email.com"
    },
});

PS. BTW, if someone can remove the email_verification requireiment inside web3auth that would be awesome as well - I can do these things myself. But it does not change the fact that there might me other errors - so in general i would like to avoid that custom web3auth error screen.

[vjgee]

@silver Welcome Aboard!

Could you please provide the below details:

1. SDK and version
2. Dapp URL(if applicable)
3. Which environment is your app setup on Mainnet, testnet , cyan, etc?
4. Your implmentation code

[silver]

Glad to give more details! But I think my question is more general, not related to specific implementation. My question is if ANY error occurs, why is it not redirecting back to web app. If my authentication is successful (no error) then it redirects back to my website - all ok. But not in case of errors. There are even no buttons on the web3auth error page (screenshot above), such as “Back” or “Retry” or “Cancel” so the user is left totally stuck and confused.

My depedencies →

"@web3auth/base": "^7.2.0",
"@web3auth/ethereum-provider": "^7.2.0",
"@web3auth/metamask-adapter": "^7.2.0",
"@web3auth/no-modal": "^7.2.0",
"@web3auth/openlogin-adapter": "^7.2.0",
"ethers": "^6.9.0",

Dapp URL → not yet published
Network → sapphire_devnet

      import { WALLET_ADAPTERS, CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
      import { Web3AuthNoModal } from "@web3auth/no-modal";
      import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
      import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
      import { MetamaskAdapter } from "@web3auth/metamask-adapter";
      import * as ethers from 'ethers';
      
      const web3auth = new Web3AuthNoModal({
          clientId: "MY CLIENT ID IS HERE",
          web3AuthNetwork: "sapphire_devnet",
          chainConfig,
      });
      
      const chainConfig = {
          chainNamespace: CHAIN_NAMESPACES.EIP155,
          chainId: "0x1",
          rpcTarget: "https://rpc.ankr.com/eth",
          displayName: "Ethereum Mainnet",
          blockExplorer: "https://etherscan.io",
          ticker: "ETH",
          tickerName: "Ethereum",
      };
      
      const privateKeyProvider = new EthereumPrivateKeyProvider({
          config: { chainConfig },
      });
      
      const openloginAdapter = new OpenloginAdapter({
          adapterSettings: {
              uxMode: "redirect",
              loginConfig: {
                  jwt: {
                      verifier: "MY VERIFIER ID IS HERE",
                      typeOfLogin: "jwt",
                      clientId: "MY CLIENT ID IS HERE",
                  },
              },
          },
          privateKeyProvider,
      });
      
      export async function LoginWeb3Auth() {
          web3auth.configureAdapter(openloginAdapter);
          await web3auth.init();
          if (!web3auth.connected) {
      	//ISSUE OCCURS HERE
          	await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
              	loginProvider: "jwt",
              	extraLoginOptions: {
                  		domain: "MY DOMAIN IS HERE",
                  		verifierIdField: "sub"
                	},
          	});
          }
          const token = await web3auth.authenticateUser();
          return token.idToken;
      }
    `

[vjgee]

@silver Thanks for your reply.

@silver

My question is if ANY error occurs, why is it not redirecting back to web app. If my authentication is successful (no error) then it redirects back to my website

This is the default flow that has been setup while authenticating.

@silver

BTW, if someone can remove the email_verification requireiment inside web3auth

What is the authentication type you have selected in the Dashboard when setting up the verifier? The authentication type that you have chosen is adding the checks for the email_verified field. Can you choose Google as the authentication type instead?

Could you take a look at this example for auth0 here and let me know if works for you.

You can refer to our Auth0 guide as well:

Using Auth0 with Web3Auth

[silver]

Hei, I am not using Google social login in Auth0. I am using “email + password” login in Auth0. It otherwise works well, except when there is an error returned from Auth0, then the flow stops mid way. I assume that it would also behave the same if there is an error during passwordless auth or social auth in Auth0 or any custom error that is returned from Auth0 actions ( Auth0 Actions), like I was able to do.

Can I turn off this error screen?

[silver]

Ok I managed to solve it on my own by choosing JWT provider instead ( Bring your own custom JWT Providers | Documentation | Web3Auth). It allows to add custom verifiers, so I can bypass adding email_verified which is causing issues with Social Provider: Auth0.

But I dont think that is the best solution, because still, if there is any new error from Auth0 side - then again the custom Web3Auth Error screen is displayed with messy debug info and user can not go anywhere.

Please fix this screen. Make it possible with a variable (passThroughError:true or something) so that any error would be logged and flow immediately redirected back to the issuer application. I can in the application show any course of action to my user.

Is there some uservoice or feature request I can do?

[vjgee]

We will review this and get back to you with an update.

[silver]

thank you! keep us posted

[silver]

What a bummer it seems the “Custom Social Provider” is available only on higher tiers. So to bypass/fix the issue mentioned in this thread I need to pay more.

Is there any way to make Auth0 work? I guess I could use the pop-up version so when people have issue inside web3auth they can close the pop-up? Because, as I mentioned when they have an issue in the redirect version, web3auth never redirects back to original app in case there is an error.

[silver]

For this particular error:

Note: For Email Password and Email Passwordless authentication, the email_verified = true condition is added to the JWT verification. To avoid JWT params mismatch error, you can use any other Authentication Type.

From: Federated / Identity Providers | Documentation | Web3Auth

So choose Login provider: Auth0 and Authentication type: Google (even though you are not using Google).