Example of email passwordless using Web No Modal SDK

haydar · April 18, 2023, 2:23am

Hi, I seem to be struggling to find the documentation or an example if I have a textbox and a login button and I want to invoke the email passwordless login using the email inputted in the textbox. All the examples I can find in the documentation will make a new window popup instead. Most of the documentation for this that I can find is for other SDKs but not the Web No Modal SDK. Is anyone available to help me with this? Thanks!

shahbaz · April 18, 2023, 3:44am

Hey @haydar

Please check out this section of this example app.

github.com

Web3Auth/web3auth-pnp-examples/blob/main/web-no-modal-sdk/blockchain-connection-examples/evm-no-modal-example/src/App.tsx#L160-L175


      
          const loginWithEmail = async () => {
            if (!web3auth) {
              uiConsole("web3auth not initialized yet");
              return;
            }
            const web3authProvider = await web3auth.connectTo(
              WALLET_ADAPTERS.OPENLOGIN,
              {
                loginProvider: "email_passwordless",
                extraLoginOptions: {
                  login_hint: "hello@web3auth.io",
                },
              }
            );
            setProvider(web3authProvider);
          };

Download this project manually and try it yourself:

npx degit Web3Auth/web3auth-pnp-examples/web-no-modal-sdk/evm/react-evm-no-modal-example w3a-nomodal-evm-react && cd w3a-nomodal-evm-react && npm install && npm run start

haydar · April 18, 2023, 4:00am

Thanks @shahbaz! however, that example invokes a web modal that will have a text input for the email. I want to avoid having a textbox in a popup modal. Is there any example where we have the email text input in our own page and pass the value of that textbox to web3auth?

shahbaz · April 18, 2023, 4:06am

Hey @haydar

Have you tried the code? This code doesn’t open the web modal.

Here the email text input logic is not available. Instead, email is directly passed to the function. You can take care of that and pass the email from a text input.

Clicking on the Email Login button will open the below screen asking to confirm the sent email.

haydar · May 8, 2023, 3:25am

Sorry for the late reply as I was on vacation for a while! now I noticed what I did wrong, apparently I have to provide the email address to the login_hint which I thought it was gonna fill in the textbox placeholder and nothing to do with the email inputted by user. Works now, thank you!

shashankkp02 · February 20, 2024, 2:04pm

@shahbaz I want to know if login_hint parameter, you can streamline the login process by prefilling the email input field based on the provided user ID. This means that when a user inputs their ID, you can use this ID to fetch the corresponding email from the database and automatically populate the email input field with it. As a result, the user won’t have to input their email again, saving them time and effort.

Once the email field is prefilled, you can proceed directly to the step of obtaining the OTP (One-Time Password) for logging in. This makes the login process smoother and more user-friendly, as the user only needs to provide their ID and then proceed with obtaining the OTP, without having to redundantly enter their email.

In summary, by utilizing the login_hint parameter to prefill the email input field, you can simplify the login process and enhance user experience by reducing unnecessary steps.

shahbaz · February 23, 2024, 4:37am

Hey @shashankkp02

Could you please clarify whose database this is and which user ID is linked to it? Just to clarify here, Web3auth doesn’t store userInfo on its end.

What if the user has to enter a different email?

shashankkp02 · February 23, 2024, 1:57pm

@shahbaz
1)Well the database is seperate entity which wont be linked to web3auth login prior to access some other data . Its simply saying a form earlier is provided for the user for his/her user id and email. When the user tries to login through the different portal we would run fucntion to finding mathcing email to the user id based on use id input . This email id could it be sent to the web 3 auth login to login using password and otp for signing further transactions.
2) The user woudlnt have to or is restricted to the use of a single email to login as its is e voting dapp.It also helps securing anonymity of the users email