Aggregate-Verifier with passwordless email is not working

[hadeath03]

Edit: It’s solved by adding connection: "email" in the extraLoginOptions object. But I didn’t find this info from any articles. I will create a new question for that.

Dependencies

    "@web3auth/base": "^8.0.0",
    "@web3auth/ethereum-provider": "^8.0.1",
    "@web3auth/metamask-adapter": "^8.0.1",
    "@web3auth/modal": "^8.0.1",
    "@web3auth/wallet-connect-v2-adapter": "^8.0.1",
    "@web3auth/wallet-services-plugin": "^8.0.1",
    "@web3modal/wagmi": "^3.5.5",

Current situation

I am trying to use Aggregate-Verifier. My target is Google, Github and Email Passwordless.
Google and Github work well and create a same wallet address.

Email Passwordless is challenging for me.
I have been reading a couple of articles on that but I cannot find a clue.

1. Using Auth0 with Web3Auth Plug and Play No Modal SDK | Web3Auth
2. Creating Aggregate Verifier on the Web3Auth Dashboard | Documentation | Web3Auth
3. Passwordless Connections
4. Configure Email or SMS for Passwordless Authentication

Working thing

On the Auth0 Dashboard > Authentication > Passwordless, click ‘Email’ > ‘Try’ tab > I can test the email passwordless feature and it works well. And this is what I want.

Not working thing

I implemented on my app (NextJs) and when I click a button, it redirects to email page but it’s different than what I expect.

When I type my email the page moves to pass word page. Note that it requires password instead of code.

And my code is

...
loginConfig: {
  // google setup
  // github setup
 // email passwordless
  auth0emailpasswordless: {
    verifier: AGGREGATE_VERIFIER_NAME, // Pass the Verifier name here. eg. w3a-agg-example
    verifierSubIdentifier: AGGREGATE_SUB_VERIFIER_EMAIL_PW_LESS, // Pass the Sub-Verifier here. eg w3a-a0-email-passwordless
    typeOfLogin: "jwt", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
    clientId: "<AUTH0-MY-PROJECT-CLIENT-ID>", // Pass the `Client ID` of your Auth0 Application.
  },
}

// when a button is clicked
const loginAuth0EmailPasswordless = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
      loginProvider: "auth0emailpasswordless",
      extraLoginOptions: {
        domain: "https://<MY-AUTH0-DOMAIN>.us.auth0.com",
        verifierIdField: "email",
        isVerifierIdCaseSensitive: false,
      },
    });
    setProvider(web3authProvider);
  };

I assume it’s some configuration thing but not sure where do look at it.
Can you please help?
Thanks in advance.

Additional question:

I checked already the working example from web3auth-pnp-examples, I see the clientId on auth0github and auth0emailpasswordless are different. Do they must be different?

[TomTom]

Hi @hadeath03

Nice to see that you solved your issue.
Thanks for helping us improve the documentation.

[hadeath03]

Hi @TomTom
Thanks for your reply.

Actually my question is not solved yet.
Yes, I solved my issue but in an undocumented way as far as I know.

const loginAuth0EmailPasswordless = async () => {
    ...
    const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
      loginProvider: "auth0emailpasswordless",
      extraLoginOptions: {
        domain: AUTH0_DOMAIIN,
        verifierIdField: "email",
        isVerifierIdCaseSensitive: false,
        connection: "email",  // <- This is what I do not understand
      },
    });
    ...
  };

That connection: "email" doesn’t exist on the web3-auth-pnp-examples-aggregate-verifier-examples.
I’d like to understand clearly why my app needs connection: "email" while web3Auth-pnp-example doesn’t. It can be a critical issue when I deploy the app to the production server.
Could it be related something like Auth0? Or it’s related purely to Web3Auth config?

Thanks TomTom.

[maharshi]

Hey @hadeath03,

@hadeath03

Yes, I solved my issue but in an undocumented way as far as I know

Actually, the method you’ve discovered is covered in our documentation. Here’s a link to the relevant section and a screenshot for quick reference: Custom Authentication Extra Login Options.

Additionally, Auth0 allows the use of a connection parameter in authentication request configurations. This parameter enables you to direct users to a specific identity provider’s login page, such as “google” or “github”, effectively bypassing the default Auth0 Lock screen. This mechanism explains your direct navigation to the email passwordless type of login when you set the connection as email. For more detailed insights, I recommend exploring the Auth0 documentation and quickstarts.

@hadeath03

Additional question:

I checked already the working example from web3auth-pnp-examples, I see the clientId on auth0github and auth0emailpasswordless are different. Do they must be different?

Regarding your query about the clientId values: if you have a single application that supports multiple connections, you can indeed use the same client id for all connections. In our examples, we often create different applications for different connections as a matter of choice. It’s entirely discretionary and not a hidden requirement.

The different clientIDs you observed for email passwordless and GitHub in Auth0 reflect this approach.

Let me know if you need any more help.