Firebase dynamic link plugin on Capacitor

Capacitor
1

I’ve been using Firebase passwordless email link for authentication for the webapp, now with Capacitor, I’m trying to use the '@ionic-native/firebase-dynamic-links' . When clicking on the link it does open up the app but the sign in event is not triggered. Since I’m using Vue, I included this code on mount:

document.addEventListener('deviceready', () => {
      FirebaseDynamicLinks.onDynamicLink().subscribe((res) => {
        firebase.auth()
          .signInWithEmailLink(email, res.deepLink)
          .then(() => this.$router.push('/'))
          .catch(function(error) {
            console.log('err', error)
          })
      })
    })

my actionCodeSettings option sent with firebase.auth().sendSignInLinkToEmail:

const actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be whitelisted in the Firebase Console.
        url: 'https://myapp.com/login'
        // This must be true.
        handleCodeInApp: true,
        android: {
          packageName: 'com.myapp.mobile',
          installApp: true
        },
        dynamicLinkDomain: 'myapp.page.link'
      }

I do see the subscribe method when I debug on browser but not with AVD… Have anyone tried using these plugins with Vue or have any idea why the event is not fired? Thanks in advance!

2

Did you ever get this working? I’m having the same issue and can’t find an answer.

3

Use the capacitor community plugin

With this, I have the dynamic links working successfully in the app, both for ios and android devices. This is with Capacitor v2.4.2, I am yet to implement this for v3

4

Hi,

Can you share your code that’s handling the dynamic link? I’m using Vuejs and have this in my App.vue created hook:
CapacitorFirebaseDynamicLinks.addListener(‘deepLinkOpen’, (data) => {
alert(Read dynamic link data on app start: ${data.deepLinkq 1}))
console.log(Read dynamic link data on app start: ${data.deepLinkq 1}))
})

When I click on the link on my iPhone it opens the app but doesn’t fire the deepLinkOpen event and I’m getting this message when the app launches:
[error] - [Vue warn]: Error in created hook: "ReferenceError: Can’t find variable: CapacitorFirebaseDynamicLinks"

Thanks

5

I’ve tried this but it’s still not working on iOS for me :frowning: Dynamic link opens the app but doesn’t get handled further…

6

I got it working on android but not iOS, from what I’ve found online, @ionic-native/firebase-dynamic-links would not work on capacitor, as for the community plugin I’ve seen people having success with it but I personally haven’t had any luck with it so far…

7

@jrhopkins83
Well, I just followed the steps mentioned in the plugin and using the same method that you are using…
I was also logging the launch URL for better insight.

    let ret = await App.getLaunchUrl();
    console.log(ret);
    CapacitorFirebaseDynamicLinks.addListener('deepLinkOpen', (data: { url: any }) => {})

Check the configuration and whether the plugin is synced on the native side or not. Also, check the native configurations mentioned in the plugin… you have to import Firebase there… Also, try looking at the code debug console when you click on the dynamic link.

@karen25 the ionic-native plugin will not work in iOS. It failed for me as well, i did manage to get it working temporarily by tweaking the native code, but not a good fix. I would suggest that you switch to the capacitor plugin. Make sure you follow all the steps for iOS configuration. Receive Dynamic Links on iOS  |  Firebase

On the native side, debug AppDelegate.swift at return CAPBridge.handleOpenUrl(url, options) this might help you.

8

Thanks @chetanbansal. I’ll give that a try.

I did get both iOS and Android using the Capacitor Deep Link plugin: Capacitor - build cross platform apps with the web

The only issue with this method is that when I build for SPA, the build breaks because Webpack doesn’t recognize @capacitor/core since it’s in the src-capacitor folder.

I plan on using dynamic links for other purposes and I’d prefer not to have two separate code bases for SPA and Capacitor so hopefully I can get the Clibboardhealth plugin to work for all.

Here’s the code that I implemented:

import { Plugins } from ‘@capacitor/core’
const { App } = Plugins

			try {
				const that = this
				App.addListener('appUrlOpen', (data) => {
					that.deepLink = data.url
					if (firebaseAuth.isSignInWithEmailLink(that.deepLink)) {
						that.signInWithEmailLink()
					} else {
						alert('url is not SignInWithEmailLink')
					}
				})
			} catch (error) {
				showMessage('Error', `Error reading link: ${error.message})`)
			}
1 Like
9

Thanks for the advice!
I’m trying the capacitor plugin (@turnoutt/capacitor-firebase-dynamic-links - npm) but the event listener is not triggered upon opening the link. However in XCode console I’m seeing CapacitorFirebaseDynamicLinks.handleLink() - url: https://xxxxx.firebaseapp.com/__/auth/action?apiKey=xxx&mode=signIn&oobCode=xxxxx&continueUrl=https://xxxx.page.link&lang=en which seems to be the right link I want to get. When I debug at return CAPBridge.handleOpenUrl(url, options) the debugger is triggered on initial app opening.
I followed the firebase guide (Receive Dynamic Links on iOS  |  Firebase) until adding FirebaseApp.configure() since the ones beyond seem to be for handling the link with my own native implementation which I suppose the plugin is doing? Am I missing any steps that are crucial??
Thanks in advance!

10

I seeing the same thing with both the @turnout & @clipboardhealth forks.

I’m also still getting the [error] - [Vue warn]: Error in created hook: “ReferenceError: Can’t find variable: CapacitorFirebaseDynamicLinks” at run time.

11

Hey, did you implement this on capacitor v3?, Please

12

I am sorry, but I didn’t get time to implement it in v3 capacitor… but it should work if you follow the instructions… in case you get stuck, you can post your query here…