CODEWITHSUNDEEP
firebasereact-nativeexpofirebase-dynamic-links
Sahil Tyagi
Sahil Tyagi

Reputation: 147

Is there a way to integrate an Expo app with firebase dynamic links without detaching?

Is there a way to integrate an Expo app with firebase dynamic links without detaching.

Upvotes: 9

Views: 7893

Answers (3)

Pedro Andrade
Pedro Andrade

Reputation: 4644

If you need to create new dynamic links on the fly you could use REST API to do it. In the much more likely scenario that you only need your app to open Firebase's dynamic links, you don't need to do anything other than configuring your Expo App to handle universal links (ie: deeplinks using http/https).

The checklist is something like this:

1. Configure your app.json

For Android, add the intentFilters property to your android property:

"android": {
  "intentFilters": [
    {
      "action": "VIEW",
      "data": [
        {
          "scheme": "https",
          "host": "<your-domain>",
          "pathPrefix": "/"
        },
      ],
      "category": [
        "BROWSABLE",
        "DEFAULT"
      ],
      "autoVerify": true // required to work on newer android versions
    }
  ]
]

For iOS, add the associatedDomains property to ios:

"ios": {
  "associatedDomains": ["applinks:<your-domain>"]
}

2. Configure your domain to allow links from it to be handled by the apps

Android and iOS will allow your app to open links from your domain if you serve a configuration file from a specific location:

Android: https://<your-domain>/.well-known/assetlinks.json

iOS: https://<your-domain>/.well-known/apple-app-site-association

assetlinks.json will look something like this:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "<android-package-name>",
    "sha256_cert_fingerprints":
    ["<your-sha256-certificate-fingerprints>"]
  }
}]

And the apple-app-site-association like this:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "<your-team-id>.<ios-bundle-identifier>",
                "paths": [ "*" ]
            }
        ]
    }
}

You can read more about these files here and here.

To obtain the SHA256 fingerprints of your app’s signing certificate you can use the keytool:

keytool -list -v -keystore <your-key-file>

After you enter your keystore password, it will print many of the keystore information including the SHA256 fingerprints.

If your site is hosted on Firebase both assetlinks.json and apple-app-site-association can be generated automatically if you create the Apps on your Firebase's project. Otherwise, just put these files on the root of your domain.

3. Create a Firebase dynamic link

I think this is step is mostly self explanatory but just a few notes:

  1. Set up your short URL link: in the end you will have / that you send to your users
  2. Set up your Dynamic Link: here you define your deelink (the link you want your app to handle)
  3. Define link behavior for iOS: you mostly likely want to click on 'Open the deep link in your iOS App' and select your App from the list (if you haven't yet, create one App for each platform on your project)
  4. Define link behavior for Android: same as previous but with a few more options to select
  5. Configure (or not) campaign tracking and you're done.

Remember that you always should test your deeplinks by clicking instead of by entering directly on the browser. You may send the link to yourself on the WhatsApp or put on some notes app, for example.

Others resources that might be helpful:

Upvotes: 14

Alessandro Antoniolli
Alessandro Antoniolli

Reputation: 31

Pedro Andrade's solution works! Partially...

Explaining:

  1. You must NOT add your dynamic link domain in intentFilters and associatedDomains, because it makes the app to open the link directly in the app, so, the dynamic link is not processed and you don't have access to the link generated by the dynamic link.
  2. It works partially because of this: the dynamic link needs to be opened by the browser (chrome or safari) before being opened in the app.

Example: Open "<your-domain>.page.link/XLSj" in browser, browser will direct to generated link: "<your-domain>.com/params/54" to configured deep link.

I don't know any other way to 'read' the dynamic link by expo in managed workflow.

Upvotes: 1

Max Hudson
Max Hudson

Reputation: 10226

In addition to Pedro Andrade's instructions:

1.) Firebase requires the following details under your app > project settings for dynamic links to work.

  • Android: SHA 256 (App signing key certificate fingerprint) - this can be retrieved via play store > your app > App Integrity > SHA 256

  • iOS: App ID Prefix (Team ID): developer.apple.com > Certificates, Identifiers & Profiles > your app id > App ID Prefix

Surprisingly, these are mentioned almost nowhere in the docs, but do come up in stackoverflow results and other answers when googling errors that debugging preview links result in:

Android app '<bundle id>' lacks SHA256. AppLinks is not enabled for the app. Learn more.
iOS app '<bundle id>' lacks App ID Prefix. UniversalLinks is not enabled for the app. Learn more.

You can view debugging preview links by adding ?d=1 to your dynamic links.

https://firebase.google.com/docs/dynamic-links/debug

2.) Even if you use a page.link-style domain provided by firebase for your dynamic links, your associatedDomain/intentFilter domains in app.json should still be your actual domain

i.e if you're generating my-app.page.link shortLinks, that are dynamic links to my-app.com, you should use my-app.com in app.json

Upvotes: 1

Related Questions