Code confirmation modal not appearing on android

[nadsonfernando]

✅ 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

Only on Android when calling the loginWithMagicLink method, the webView with the confirmation code is not shown on the screen. When inspecting the component tree, I noticed that there is a zINdex: -1000, if I manually change it through devTools to a value of 0 this is shown.

🤔 Expected behavior

The magic link confirmation modal should appear, but on Android it doesn't appear.

💻 Code Sample

const { auth, user, Relayer } = new Magic(Key, {
  extensions: [new OAuthExtension(), new AuthExtension()],
});

export class AuthMagicLinkProvider {
  static Relayer = Relayer;

  static async login(email: string) {
    try {
      const didToken = await auth.loginWithMagicLink({ email, showUI: true });

      return { didToken };
    } catch (error) {
      return { error };
    }
  }

  static isLoggedIn() {
    return user.isLoggedIn();
  }

  static logout() {
    return user.logout();
  }
}

App.tsx
<SafeAreaProvider>
   <AuthMagicLinkProvider.Relayer />
</SafeAreaProvider>

🌎 Environment

Software	Version(s)
@magic-ext/auth	^4.3.2
@magic-ext/react-native-bare-oauth	^25.21.0
@magic-sdk/react-native-bare	^29.21.0
react-native	0.77.1

[RodrigoSarmento]

I'm having the same issue. I can't see any change on the status and modal doesn't show (I have <magic.Relayer /> added).

So for me, it is two issues, modal is not opening, and I can't see any of the handle.on being triggered.

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

        handle
          .on('email-otp-sent', () => setStatus('email-otp-sent'))
          .on('invalid-email-otp', () => {
            handle.emit('cancel');
            setStatus('invalid-email-otp');
          })
          .on('done', () => setStatus('done'))
          .on('error', () => setStatus('error'))
          .on('device-verification-email-sent', () =>
            setStatus('device-verification-email-sent'),
          );
      } catch (error) {
        setStatus('error');
        if (error instanceof RPCError) {
          switch (error.code) {
            case RPCErrorCode.AccessDeniedToUser: {
              break; //TODO: Add error handling
            }
          }
        }
      }
    },
    [magic.auth],
  );


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

[joshuascan]

Hi @nadsonfernando / @RodrigoSarmento ,

Currently looking into this now. I initially was able to reproduce on an android simulator with magic RN bare version 29.21.0, but it's now working correctly again. I've also successfully triggered the modal on version 30.0.0. Has it also been inconsistent for either of you, or is it still happening 100% of the time?

Also, @RodrigoSarmento the events are intended to be used with the whitelabel flow so that might be why you aren't seeing any of them. The whitelabel flow would be triggered via the showUI param like this:

const handle = magic.auth.loginWithEmailOTP({ email: "[email protected]", showUI: false, deviceCheckUI: false }).

I'll keep you both posted on a fix for the modal issue. Thanks!

[RodrigoSarmento]

Hello, I've tried with showUI false as well, although it was working before even with the UI showing. I'm going to try in the sdk 28 and with device check false.

I'm testing on a real device and it was happening 100% of times for sdk 29 and 30(I probably tried 10 times in each)

[RodrigoSarmento]

Hello. I've just tested with SDK 28, and I still have the same issue.

I'm calling the function with showUI false and deviceCheckUI:false as asked, and I still can't see the events logs.

 const handle = magic.auth.loginWithEmailOTP({
          email,
          showUI: false,
          deviceCheckUI: false,
        });

If I call to show the modal, the modal is still not prompt

  const handle = magic.auth.loginWithEmailOTP({
          email,
        });

If there is anything else I could do or more info I could give to you please let me know

[joshuascan]

@RodrigoSarmento would you mind sharing your publishable API key with me? This will allow me to take a closer look at our logs to hopefully see what's going on. Feel free to send it to [email protected] if you prefer.

[joshuascan]

We believe the issue is related to our mobile message relaying service hanging, which is responsible for triggering the zIndex change on the iframe. Could you give @magic-sdk/[email protected] a try and see if that helps to resolve it?

Edit: actually, if you could use @magic-sdk/[email protected], this will include the same fix plus some additional logging that can help us debug further.

[RodrigoSarmento]

Hello. I've tried with ***@***.*** Still not working on android, but on IOS, it is working fine, both the prompt UI and the status changes

…

On Thu, Mar 6, 2025, 18:05 Josh Scanlan ***@***.***> wrote: We believe the issue is related to our mobile message relaying service hanging, which is responsible for triggering the zIndex change on the iframe. Could you give @***@***.*** a try and see if that helps to resolve it? — Reply to this email directly, view it on GitHub <#853 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFLYRAWV4HEIPCGBCWI4AO32TC2CZAVCNFSM6AAAAABX3XOKNKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBUHE2DAMRRGU> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: joshuascan]*joshuascan* left a comment (magiclabs/magic-js#853) <#853 (comment)> We believe the issue is related to our mobile message relaying service hanging, which is responsible for triggering the zIndex change on the iframe. Could you give @***@***.*** a try and see if that helps to resolve it? — Reply to this email directly, view it on GitHub <#853 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFLYRAWV4HEIPCGBCWI4AO32TC2CZAVCNFSM6AAAAABX3XOKNKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBUHE2DAMRRGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>