Expo Go with Google/Facebook OAuth - auth.expo.io login screen - "Not Found"

Question

I am trying to set up google oauth in a react native, expo managed app. I am only having the following issue using my app within Expo Go - when I create a build of the app, the oauth flow works perfectly. But its hard to develop that way, and I need to be able to share a working app with non-dev team members via Expo Go. I have set up the flow in what I think is the same as what the expo go google auth documentation has described. An overview

• Create a project in google console, and set up a new ClientID for web applications. Set the authorized origins and redirect uri:

Where myorg is the name of the expo organizational account that owns the project, and projectname is the same value as slug in app.json.

• After setting this up, I get the client id, and client secret for this oauth login method.

• In my app code, I follow the instructions to use the expo-auth-session library for google:

import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";

WebBrowser.maybeCompleteAuthSession();

export const OAuthButtons: React.FC = () => {
  const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: "clientId-from-google-console.apps.googleusercontent.com",
    iosClientId: "will set this up eventually",
    androidClientId: "will set this up eventually",
  });

  return; // markup for sign in buttons

}

So now in my app, when I click the google sign in button, I get the prompt to open the web browser correctly:

Clicking that correctly opens the expo web browser, but I see a "not found" message:

For more details, when I log the request, I get some pretty expected values

"{
  "url": "https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https%3A%2F%2Fauth.expo.io%2FMyProject&client_id=id-from-console.apps.googleusercontent.com&response_type=token&state=5xWG83SsoJ&scope=openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email",
  "responseType": "token",
  "clientId": "client-id-from-console.apps.googleusercontent.com",
  "redirectUri": "https://auth.expo.io/MyProject",
  "scopes": [
    "openid",
    "https://www.googleapis.com/auth/userinfo.profile",
    "https://www.googleapis.com/auth/userinfo.email"
  ],
  "state": "5xWG83SsoJ",
  "extraParams": {},
  "codeChallengeMethod": "S256",
  "usePKCE": false
}"

The only values here that are a bit unexpected are the redirectUri and redirect_uri, which have a /MyProject appended to them, which is not exactly what I had put in my redirect uri in the google console. How did that get appended there? Might that be the problem?

As far as I can tell, I've set everything up as described. What is it exactly that is "Not Found" here? The oauth page for this particular expo application? Where did I go wrong in my setup?

Edit - Same Problem with Facebook.useAuthRequest

I am having the same exact problem with the Facebook provider module as well. Similar code:

  const [facebookRequest, facebookResponse, facebookPromptAsync] =
    Facebook.useAuthRequest({
      clientId: "facebook_app_id",
      responseType: ResponseType.Code,
    });

I also tried the suggestion from the article Use expo-auth-session with Facebook the Easiest Way on iOS/Android to add the useProxy: true property, but that makes no difference.

  const [facebookRequest, facebookResponse, facebookPromptAsync] =
    Facebook.useAuthRequest(
      {
        clientId: "facebook_app_id",
        responseType: ResponseType.Code,
      },
      { useProxy: true }
    );

The facebook login also opens the expo browser to an empty page that says "Not found"

What am I doing wrong here?

Answer 1

Do you have your originalFullName specify on your app.json? If not, try to add it e.g originalFullName: "@your_username/your_app_name"

And maybe this github issue can help you, https://github.com/expo/expo/issues/19891.