How to get Expo static deep link for development?

user_93212 0
Viewed 4919

I need an Expo static deep link for development to use for Oauth redirect with a 3rd party ( Cognito )

I have used Linking.makeUrl() but this returns a deep link with a dynamic local ipaddress exp://10.0.0.107:19000 that will not be consistent for other developers on the team.

The documentation at: https://docs.expo.io/versions/latest/workflow/linking/#linking-module

Says the various environment links look like

  • Published app in Expo client : exp://exp.host/@community/with-webbrowser-redirect

  • Published app in standalone : myapp://

  • Development : exp://wg-qka.community.app.exp.direct:80

I have tried that Development link but it fails to open.

amazon-cognito expo react-native deep-linking
2 Answers

I have the similar issue too, here is my solution Also post in https://github.com/aws-amplify/amplify-js/issues/4244#issuecomment-586845322

In case anyone still needs help for expo+amplify+social logins

app.json 
{
  "expo": {
    "scheme": "exposchemeappname://"  // use any name you like, just make it unique
  }
}
App.js 
import { Linking } from 'expo';
import * as WebBrowser from 'expo-web-browser';

import awsconfig from './aws-exports';

const amplifyConfig = {
  ...awsconfig,
  oauth: {
    ...awsconfig.oauth,
    urlOpener: async (url, redirectUrl) => {
      // On Expo, use WebBrowser.openAuthSessionAsync to open the Hosted UI pages.
      const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);

      if (type === 'success') {
        await WebBrowser.dismissBrowser();

        if (Platform.OS === 'ios') {
          return Linking.openURL(newUrl);
        }
      }
    },
    options: {
      // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
      AdvancedSecurityDataCollectionFlag: true
    },
  }
};

const expoScheme = "exposchemeappname://"
// Technically you need to pass the correct redirectUrl to the web browser.
let redirectUrl = Linking.makeUrl();
if (redirectUrl.startsWith('exp://1')) {
  // handle simulator(localhost) and device(Lan)
  redirectUrl = redirectUrl + '/--/';
} else
if (redirectUrl === expoScheme) {
  // dont do anything
} else {
  // handle the expo client
  redirectUrl = redirectUrl + '/'
}
amplifyConfig.oauth.redirectSignIn = redirectUrl;
amplifyConfig.oauth.redirectSignOut = redirectUrl;

Amplify.configure(amplifyConfig);

Make sure you add the following redirect urls to amplify amplify auth update

# development
exp://127.0.0.1:19000/--/
exp://192.168.1.101:19000/ # depends on your lan ip

# expo client
exp://exp.host/@[EXPO_ACCOUNT]/[EXPO_APPNAME]/

# expo scheme for standalone
exposchemeappname://
user_57421510

you can use Linking module

install it by running: expo install expo-linking

import it at the top of your file: import * as Linking from "expo-linking";

and then use: Linking.makeUrl(); to get the link to your app hosted by expo client

console it to see the url

user_48468590
Related