I am building an app in Expo (therefore in React Native) using Firebase, and I am trying to implement Facebook Login through Firebase. I used the code linked below, and replaced /* Config */
and <YOUR FBID>
with the correct credentials (I've quadruple checked them).
I've added both https://auth.expo.io/@myusername/app-slug (from the expo documentation) and the redirect link provided from the firebase auth setup to the Facebook Login Client OAuth settings: https://developers.facebook.com/apps/``` ```/fb-login/settings/
The button is correctly redirecting me to Facebook to log in, but then I am getting the error "URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app's Client OAuth Settings."
I checked Facebook login message: "URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app's Client OAuth Settings." but didn't find a resolution that made sense for my situation.
Any troubleshooting next steps?
https://docs.expo.dev/guides/authentication/#facebook
import * as WebBrowser from 'expo-web-browser';
import * as Facebook from 'expo-auth-session/providers/facebook';
import { ResponseType } from 'expo-auth-session';
import { initializeApp } from 'firebase/app';
import { getAuth, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
import { Button } from 'react-native';
// Initialize Firebase
initializeApp({
/* Config */
});
WebBrowser.maybeCompleteAuthSession();
export default function App() {
const [request, response, promptAsync] = Facebook.useAuthRequest({
responseType: ResponseType.Token,
clientId: '<YOUR FBID>',
});
React.useEffect(() => {
if (response?.type === 'success') {
const { access_token } = response.params;
const auth = getAuth();
const provider = new FacebookAuthProvider();
const credential = provider.credential(access_token);
// Sign in with the credential from the Facebook user.
signInWithCredential(auth, credential);
}
}, [response]);
return (
<Button
disabled={!request}
title="Login"
onPress={() => {
promptAsync();}}
/>
);
}```
adding the Expo redirect link to my code fixed the redirect:
export default function App() {
const [request, response, promptAsync] = Facebook.useAuthRequest({
responseType: ResponseType.Token,
clientId: '<YOUR FBID>',
redirectUri: "https://auth.expo.io/@myusername/app-slug"
});
Now I'm seeing that provider.credential is undefined. There's always another bug.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.