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?
Add this into your app.json or app.config.json
{
"expo": {
...
"scheme": "name_of_your_app"
}
}