Opening Web Invite Links Directly in the App with Expo Router
This article is an English translation of the original Japanese article. In my club management app, I use the following invite URL for both web and iOS app: https://squad-note.com/invite/{orgId} If the app is installed, Expo Router opens the invite screen in the app. If not, the web page displays. Using Universal Links lets me share a single URL rather than splitting it into web and app versions.…
In the article, the author explains how they utilize Expo Router in their club management app to seamlessly open invite links directly within the app or display a web page when the app is not installed. They create a dynamic route for the invite screen located at apps/mobile/src/app/invite/[orgId]/index.tsx. The screen gathers the orgId from the URL using useLocalSearchParams and employs the api.organization.getPublic.useQuery method to fetch the relevant data.
To handle app-specific URLs, the author configures a Custom Scheme (squadnote://) in the Expo config, allowing them to manage URLs like squadnote://invite/abc during development and authentication callbacks. However, they employ Universal Links as the primary entry point to securely associate web URLs with the app.
For iOS development, they set associated domains in app.config.ts, differentiating between production and development environments. They also serve apple-app-site-association from their web domain, which defines the appID and paths the app should open. In this case, they focus on the invite link path /invite/* for added specificity.
On the mobile app, they share the HTTPS URL along with the openExternalBrowser=1 parameter for LINE's in-app browser. When the app is installed on iOS devices, it opens the app via Universal Link; otherwise, it opens the web invite page. The author clarifies that openExternalBrowser=1 is a separate concern from the Universal Links configuration.
Throughout their explanation, the author emphasizes the importance of verification steps to ensure proper functioning. They highlight the need for an installed app, Apple App Site Association (AASA), and a signed build for Universal Links to work correctly. They also recommend verifying different scenarios, including TestFlight builds, deleted apps, and both production and development domains.
Finally, they point out that, despite the complexity of setting up the domain association, creating the invite screen within the app itself was relatively straightforward due to the matching paths and file structure provided by Expo Router.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
