Facebook Login in Firebase in Expo "URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings."

Question

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();}}
    />
  );
}```

score 0 · Answer 1 · answered Oct 05 '22 at 05:09

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.

Facebook Login in Firebase in Expo "URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings."

1 Answers1