I’m trying to authenticate with Facebook through Supabase, but I’m having trouble. Here is my code on the page with a link to login:
import { View, Text, Button } from "react-native";
import { Link, Stack } from "expo-router";
import { SafeAreaView } from 'react-native-safe-area-context';
import { createClient } from '@supabase/supabase-js';
import * as SecureStore from "expo-secure-store";
import 'react-native-url-polyfill/auto'
import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
const ExpoSecureStoreAdapter = {
getItem: (key) => {
return SecureStore.getItemAsync(key);
},
setItem: (key, value) => {
SecureStore.setItemAsync(key, value);
},
removeItem: (key) => {
SecureStore.deleteItemAsync(key);
},
};
const supabaseUrl = ....
const supabaseAnonKey = ....
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
auth: {
storage: ExpoSecureStoreAdapter,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: false,
},
})
export default function Home() {
async function login() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'facebook',
})
if(data?.url) {
let result = await WebBrowser.openAuthSessionAsync(data.url, Linking.createURL('whiskey-journal://index'))
console.log(result)
}
}
return (
<SafeAreaView style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Stack.Screen options={{ title: "Overview" }} />
<Button title="login with Facebook" onPress={login} />
</SafeAreaView>
);
}
When I click the link it opens a web browser and I can login with Facebook, but then it just goes to a page that says “Safari cannot open the page because it could not connect to the server.” The only option on the page is “Cancel”.
I don’t really understand Deep Linking so I’m sure i’ve set that up incorrectly. I thought I read somewhere in the documentation though that Expo does all the deep linking stuff automatically?
So I’m not sure where I’ve gone wrong. Any help is appreciated. Thanks!