Search code examples
angularfirebase-authenticationionic3angularfire2

Firebase passwordless email authentication within Ionic App


Firebase recently released an update, allowing us the ability to use "magical links" for user sign-in flow. I started playing around with this, but I am not entirely sure how to get this to work on an ionic application because:

We need a URL to redirect the user after they click the link in their email.

Would this work regardless of the URL you input, as long as it has the handleCodeInApp: true set? I have yet to find a solid tutorial on this yet, the closest I've come to is this here. But again, the issue is that he uses just straight Angular instead of ionic which doesn't use the same routing system.


Solution

  • I am assuming you are building a mobile ionic app. Otherwise the web app case is very straightforward.

    For an ionic mobile app, you can treat your app as a mobile app and pass the android package name or iOS bundle ID.

    var actionCodeSettings = {
      // URL you want to redirect back to. The domain (www.example.com) for this
      // URL must be whitelisted in the Firebase Console.
      // You can use Firebase hosting to host this link even though
      // for a mobile app this will not be invoked.
      url: 'https://myapp.firebaseapp.com/finishSignUp?cartId=1234',
      // This must be true.
      handleCodeInApp: true,
      iOS: {
        bundleId: 'com.example.ios'
      },
      android: {
        packageName: 'com.example.android'
      }
    };
    

    You would need to make sure FDL is configured. There are some Cordova plugins to help you intercept incoming FDL links: https://ionicframework.com/docs/native/firebase-dynamic-links/

    Once you intercept the link in your app, you would parse the deep link and pass it to:

    firebase.auth().signInWithEmailLink(email, deepLink)...
    

    If your app is mobile only, you can just use Firebase hosting for you URL (this is the deep link). In the case where the deep link is intercepted by the mobile app, the link is never navigated to. In the case the link is opened and the app is not available (on a desktop computer), you can have that link show a message that the application is mobile only and the user should open it on a mobile device, etc.