Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prompt for login does not show, and status doesn't change on Android React-Native #858

Open
RodrigoSarmento opened this issue Mar 3, 2025 · 1 comment

Comments

@RodrigoSarmento
Copy link

RodrigoSarmento commented Mar 3, 2025

✅ Prerequisites

  • [✅ ] Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
  • [✅ ] Are you running the latest SDK version?
  • [ ✅] Are you reporting to the correct repository (magic-sdk)?

🐛 Description

This was working fine the first time I implemented it one month ago. I've upgraded to the latest RN version from that time, this was the only code change. I'm still receiving the email with the OTP code, but I can't see the status changing neither the modal if I pass showUI as true

🧩 Steps to Reproduce

  1. Create a new magic instance on RN android
  2. Call magic.auth.loginWithEmailOTP
  3. Debug all status, see that they don't change.

🤔 Expected behavior

Prompt being triggered if showUI is true, and email-otp-sent event being triggered

😮 Actual behavior

Nothing happens

💻 Code Sample

  const magic = useMemo(() => new Magic('MY_API_KEY'), []);

  const handleLoginWithEmailOTP = useCallback(
    async (email: string) => {
      try {
        const handle = magic.auth.loginWithEmailOTP({ email });

        handle
          .on('email-otp-sent', () => {
            console.log('[Event] email-otp-sent');
            setStatus('email-otp-sent');
          })
          .on('invalid-email-otp', () => {
            console.log('[Event] invalid-email-otp');
            handle.emit('cancel');
            setStatus('invalid-email-otp');
          })
          .on('done', () => {
            console.log('[Event] done');
            setStatus('done');
          })
          .on('error', () => {
            console.log('[Event] error');
            setStatus('error');
          })
          .on('device-verification-email-sent', () => {
            console.log('[Event] device-verification-email-sent');
            setStatus('device-verification-email-sent');
          })
          .on('invalid-mfa-otp', () => {
            console.log('[Event] invalid-mfa-otp');
          })
          .on('expired-email-otp', () => {
            console.log('[Event] expired-email-otp');
          })
          .on('mfa-sent-handle', () => {
            console.log('[Event] mfa-sent-handle');
          })
          .on('recovery-code-sent-handle', () => {
            console.log('[Event] recovery-code-sent-handle');
          })
          .on('invalid-recovery-code', () => {
            console.log('[Event] invalid-recovery-code');
          })
          .on('recovery-code-success', () => {
            console.log('[Event] recovery-code-success');
          })
          .on('Auth/id-token-created', (idToken: string) => {
            console.log('[Event] Auth/id-token-created:', idToken);
          })
          .on('Wallet/wallet-info-fetched', () => {
            console.log('[Event] Wallet/wallet-info-fetched');
          })
          .on('verify-email-otp', (otp: string) => {
            console.log('[Event] verify-email-otp:', otp);
          })
          .on('verify-mfa-code', (mfa: string) => {
            console.log('[Event] verify-mfa-code:', mfa);
          })
          .on('lost-device', () => {
            console.log('[Event] lost-device');
          })
          .on('verify-recovery-code', (recoveryCode: string) => {
            console.log('[Event] verify-recovery-code:', recoveryCode);
          });
      } catch (error) {
        setStatus('error');
        if (error instanceof RPCError) {
          switch (error.code) {
            case RPCErrorCode.AccessDeniedToUser: {
              break; //TODO: Add error handling
            }
          }
        }
      }
    },
    [magic.auth],
  );

🌎 Environment

Samsung S23 Android Version 14

"@magic-sdk/react-native-bare": "^30.0.0",
"react-native": "0.77.1",

BTW, I have on my code, so it is not due to not using the Relayer

return (
<>
<magic.Relayer />

</>
);

@RodrigoSarmento
Copy link
Author

I've made this video as well showing that the modal is not being triggered

Screen_Recording_2025-03-04_at_16.25.23.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant