reactjsreact-nativeoauth-2.0expoclerk

expo clerk oauth cannot make a deep link into a standalone app with no custom scheme defined


I am using Clerk for my expo project.

I do my oauth as per their documentation

Here is my code:

import React, { useCallback } from 'react';
import { TouchableOpacity, View, StyleSheet, Image, Alert } from 'react-native';
import * as WebBrowser from "expo-web-browser";
import { useOAuth } from '@clerk/clerk-expo';

import { useWarmUpBrowser } from '../hooks/warmUpBrowser';


WebBrowser.maybeCompleteAuthSession();

const OAuthButtons = () => {

  useWarmUpBrowser();

  const { startOAuthFlow: startGoogleOAuthFlow } = useOAuth({ strategy: 'oauth_google' });
  const { startOAuthFlow: startFacebookOAuthFlow } = useOAuth({ strategy: 'oauth_facebook' });
  const { startOAuthFlow: startAppleOAuthFlow } = useOAuth({ strategy: 'oauth_apple' });

  const onPressOAuth = useCallback(async (provider) => {
    try {
      const startOAuthFlow = 
        provider === 'google' ? startGoogleOAuthFlow :
        provider === 'facebook' ? startFacebookOAuthFlow :
        startAppleOAuthFlow;

      const { createdSessionId, setActive } = await startOAuthFlow();

      if (createdSessionId) {
        setActive({ session: createdSessionId });
      } else {
        // Handle the case where additional steps are needed
      }
    } catch (err) {
      Alert.alert("OAuth Error", `An error occurred during the OAuth process: ${err.message || err}`);
      console.error("OAuth error", err);
    }
  }, []);

  return (
    <View style={styles.oauthContainer}>
      {/* Google Sign-In Button */}
      <TouchableOpacity onPress={() => onPressOAuth('google')} style={styles.oauthButton}>
        <Image source={require('../assets/images/logos/google_logo.png')} style={{width: 40, height: 41.15, marginTop: 0.8}} />
      </TouchableOpacity>

      {/* Apple Sign-In Button */}
      <TouchableOpacity onPress={() => onPressOAuth('apple')} style={styles.oauthButton}>
        <Image source={require('../assets/images/logos/apple_logo.png')} style={{width: 40, height: 42, marginBottom: 2}} />
      </TouchableOpacity>

      {/* Facebook Sign-In Button */}
      <TouchableOpacity onPress={() => onPressOAuth('facebook')} style={styles.oauthButton}>
        <Image source={require('../assets/images/logos/fb_logo.png')} style={{width: 42, height: 42}} />
      </TouchableOpacity>
    </View>
  );
};

It's working nicely on the simulator but when deployed to my iPhone via TestFlight, I get:

Cannot make a deep link into a standalone app with no custom scheme defined

I have seen post showing how to deep link the application, but I guess it should be handled by Clerk. Any suggestions?


Solution

  • Add this into your app.json or app.config.json

    {
       "expo": {
         ...
    
         "scheme": "name_of_your_app"
    
       }
    }