What is the expected formatting for Dynamic Links for Email Link Authentication?

[tomskopek]

I'm trying to implement Email Link Authentication in my app and having some difficulty.

My confusion stems from the format of the urls that are generated when sending an email authentication link, and my questions are:

• What is the expected format for Email Authentication urls?
  • I am receiving quite different links from the firebase auth emulator vs production. Emulator version works, prod does not.
• Am I doing something wrong in my code where I listen for deeplinks?

Details

I've followed all the setup instructions for Firebase Dynamic Links.

[1] My code for auth().sendSignInLinkToEmail:

export default async function signInWithEmail(email: string, deepLink: string) {
  const actionCodeSettings = {
    handleCodeInApp: true,
    url: deepLink, // <------ this looks like "https://piedpiper.com/auth/confirm-email?email=tom%40gmail.com".       piedpiper.com has been added as an authorized domain
    iOS: { bundleId: 'com.piedpiper.ios' },
    android: {
      packageName: 'com.piedpiper.android',
      installApp: true,
      minimumVersion: '1.66.2',
    },
    dynamicLinkDomain: 'pdpip.er',
  };
  await auth().sendSignInLinkToEmail(email, actionCodeSettings);
}

When I send a signin email while using the firebase auth emulator, the link I am asked to open looks like this:

http://localhost:9099/emulator/action\?mode\=signIn\&lang\=en\&oobCode\=xyz123\&apiKey\=fake-api-key\&continueUrl\=https%3A%2F%2Fpiedpiper.com%2Fauth%2Fconfirm-email%3Femail%3Dtom%2540gmail.com

Full output from firebase emulator:

⚠  canHandleCodeInApp is unsupported in Auth Emulator. All OOB operations will complete via web.
i  To sign in as [email protected], follow this link: http://localhost:9099/emulator/action?mode=signIn&lang=en&oobCode=xyz123&apiKey=fake-api-key&continueUrl=https%3A%2F%2Fpiedpiper.com%2Fauth%2Fconfirm-email%3Femail%3Dtom%2540gmail.com

[2] In App.tsx, I am configured to listen for Deep Links like so. My react-navigation config looks like this:

// App.tsx

const linking = {
  prefixes: ['https://piedpiper.com'],
  config: {
    screens: {
      ...,
      EmailSigninConfirmation: '/auth/confirm-email'
    }
  },
  async getInitialURL() {
    const { isAvailable } = utils().playServicesAvailability;

    if (isAvailable) {
      const initialLink = await dynamicLinks().getInitialLink();
      if (initialLink) {
        return initialLink.url;
      }
    }

    const url = await Linking.getInitialURL();

    return url;
  },

  subscribe(listener) {
    // Listen to incoming links from Firebase Dynamic Links
    const unsubscribeFirebase = dynamicLinks().onLink(({ url }) => {  // <---- [2b]
      listener(url);
    });

    // Listen to incoming links from deep linking
    const linkingSubscription = Linking.addEventListener('url', ({ url }) => {  // <---- [2a]
      listener(url);
    });

    return () => {
      // Clean up the event listeners
      unsubscribeFirebase();
      linkingSubscription.remove();
    };
  },

};

Opening the sign-in link generated by the auth emulator using npx uri-scheme open http://localhost:9099/.... --ios works:

• My iOS Simulator opens Safari, I am asked if I want to Open in "PiedPiper"?.
• I click Open
• The url I see in my Regular Link Listener [2a] is the same as the url I added when creating my actionCodeSettings [1]: https://piedpiper.com/auth/confirm-email?email=tom%40gmail.com.
• I am redirected to the right screen, where I handle the last part of login (using await auth().signInWithEmailLink(email, route.path))
• The onAuthStateChanged listener fires, and everything is working as expected.
• One thing to note is that the url is received by the Regular Link Listener [2a], not the Firebase Link Listener [2b]. Is this expected?

However, when I try this in my iOS simulator and it's disconnected from the firebase auth emulator, the link sent to my actual email looks like this:

https://pdpip.er/?link=https://piedpiper-c3xa9.firebaseapp.com/__/auth/action?apiKey%SOME_API_KEY%26mode%3DsignIn%26oobCode%3DSOME_OOB_CODE%26continueUrl%3Dhttps://piedpiper.com/auth/confirm-email?email%253Dtom%2540gmail.com%26lang%3Den&apn=com.piedpiper&amv=1.66.2&ibi=com.piedpiper.ios&ifl=https://piedpiper-c3xa9.firebaseapp.com/__/auth/action?apiKey%SOME_API_KEY%26mode%3DsignIn%26oobCode%3DSOME_OOB_CODE%26continueUrl%3Dhttps://piedpiper.com/auth/confirm-email?email%253Dtom%2540gmail.com%26lang%3Den

Note that pdpip.er is a short domain I've bought and configured with Firebase Dynamic Links:

• I have added: ^https{0,1}:\/\/piedpiper\.com([\/#\?].*){0,1}$ to the allowlist.
• And by default: ^https{0,1}:\/\/piedpiper-c3xa9\.firebaseapp\.com([\/#\?].*){0,1}$ is also on my allowlist.
• I have also added applinks:pdpip.er to Xcode Associated Domains.

Clicking on this pdpip.er/?link=https://piedpiper-c3x... link from within my Simulator:

• I am directed directly to my app
• I do not see the safari page in between asking me if I want to: Open in "PiedPiper"?
• When the app opens, I see that I am receiving the same url as above ☝️ in the Regular Link Listener [2a].
• And I receive the following url in the Firebase Link Listener [2b]:

https://piedpiper-c3xa9.firebaseapp.com/__/auth/action?apiKey=SOME_API_KEY&mode=signIn&oobCode=SOME_OOB_CODE&continueUrl=https://piedpiper.com/auth/confirm-email?email%3Dtom%2540gmail.com&lang=en

This does not redirect me anywhere (since this domain does not match my prefixes).

What is interesting to me is that this url looks very similar in format to the original link sent from the emulator.

In summary:

Mode	Link generated by sign in	Link received by Link Listener	Works?
Emulator	http://localhost:9099/emulator/action\?mode\=signIn...	https://piedpiper.com/auth/confirm-email?email=tom%40gmail.com	✅
Production	https://pdpip.er/?link=https://piedpiper-c3xa9.firebaseapp.com/__/auth/action?...	https://piedpiper-c3xa9.firebaseapp.com/__/auth/action?apiKey=SOME_API_KEY&mode=signIn...	❌

Once again, my questions are:

• What is the expected format for Email Authentication urls?
• Am I doing something wrong in my code where I listen for deeplinks?

Thanks!