react-nativeoauthexpogoogle-oauthexpo-go

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

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

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.

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:

enter image description here

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

enter image description here

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?

Solution

  • 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.