Email_passwordless login on React Native on iOS gives Invalid authentication url error

[nishitsuji.ryosuke.r]

This time, I referred to the following site to create my project.
(Using Web3Auth React Native SDK in Expo Workflow | Web3Auth)

I tried to implement email_passwordless login on iOS using react native SDK(@web3auth/react-native-sdk v5.1.0).

I was able to login with google or Line, but failed with email.
I just changed from GOOGLE to EMAIL_PASSWORDLESS in the following code.

const login = async () => {
    try {
      if (!web3auth) {
        setConsole("Web3auth not initialized");
        return;
      }

      setConsole("Logging in");
      await web3auth.login({
        loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, // GOOGLE
        redirectUrl: resolvedRedirectUrl,
        mfaLevel: "default",
        curve: "secp256k1",
      });
      setConsole(`Logged in ${web3auth.privKey}`);
      if (web3auth.privKey) {
        setUserInfo(web3auth.userInfo());
        setKey(web3auth.privKey);
        uiConsole("Logged In");
      }
    } catch (e) {
      setConsole(e.message);
    }
  };

• Screenshots of error:
  
  

What would be the problem for email_passwordless login?

• SDK Version: 5.1.0 (lastest)
• Platform: Xcode (iPhone 15 (iOS 17.4))

[vjgee]

@nishitsuji.ryosuke.r Welcome Aboard!

Could you please refer to our Integration Builder example on how to use Email Passwordless:

Integration Builder

Replace

@nishitsuji.ryosuke.r

      const login = async () => {
    try {
      if (!web3auth) {
        setConsole("Web3auth not initialized");
        return;
      }
     setConsole("Logging in");
      await web3auth.login({
        loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, // GOOGLE
        redirectUrl: resolvedRedirectUrl,
        mfaLevel: "default",
        curve: "secp256k1",

With

const login = async () => {
    try {
      if (!web3auth.ready) {
        setConsole('Web3auth not initialized');
        return;
      }
      if (!email) {
        setConsole('Enter email first');
        return;
      }

      setConsole('Logging in');
      await web3auth.login({
        loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
        redirectUrl: resolvedRedirectUrl,
        extraLoginOptions: {
          login_hint: email,
        },
      });  

[nishitsuji.ryosuke.r]

@vjgee

const login = async () => {
    try {
      if (!web3auth.ready) {
        setConsole('Web3auth not initialized');
        return;
      }
      if (!email) {
        setConsole('Enter email first');
        return;
      }

      setConsole('Logging in');
      await web3auth.login({
        loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
        redirectUrl: resolvedRedirectUrl,
        extraLoginOptions: {
          login_hint: email,
        },
      });  

I modified my code with reference to this code, but the following notation appeared in the console.
[Property ‘email’ doesn’t exit]

I used [react-native/rn-expo-example] to create my project.
The guide you referred me to uses [rn-bare-quick-start].

Is this difference causing this error?

[vjgee]

Can you replace ‘email’ with the actual email address of the user trying to login?

[nishitsuji.ryosuke.r]

When I replaced ‘email’ with the actual email address, I was able to login.
I think there is actually a field to enter an email address, but it is not showing up. What is wrong with the code?
As I wrote before I only changed the “LOGIN_PROVIDER.GOOGLE” part of rn-expo-example.

[vjgee]

Could you take a look at this example on how the email field is dynamic and implement the same for your code:

Integration Builder

[nishitsuji.ryosuke.r]

I have successfully logged in with the email address I entered. Thank you very much.