Google login with Google.useAuthRequest does not work on android as the login route is remounted after coming back from google login webpage

[Rajat Kanti Nandi]

Which package manager are you using? (Yarn is recommended)

npm version 8.5.5

Summary

When using Google.useAuthRequest API with projectNameForProxy set, after clicking login and then clicking "Yes" on this auth.expo.io page,

the google login page opens.
But after login when it is redirected to the app, nothing happens.
Upon debugging I saw that the response from the return value of useAuthRequest is null. The request object looks fine and has all the proper parameters including the redirectUri.

On iOS expo go app and web it is working perfectly fine.
It was also working fine with Expo SDK 48 and without expo-router.

Minimal reproducible example

import React from "react";
import { Pressable } from "react-native";
import * as Google from "expo-auth-session/providers/google";
import config from "../config";

export default function Login() {
  const [request, response, promptAsync] = Google.useAuthRequest(
    {
      expoClientId: config.EXPO_CLIENT_ID,
      iosClientId: config.GOOGLE_AUTH_IOS_CLIENT_ID,
      androidClientId: config.GOOGLE_AUTH_ANDROID_CLIENT_ID,
      webClientId: config.GOOGLE_AUTH_WEB_CLIENT_ID,
      responseType: ResponseType.Code,
      shouldAutoExchangeCode: false,
      extraParams: {
        access_type: "offline",
      },
    },
    { projectNameForProxy: config.PROJECT_NAME }
  );

  useEffect(() => {
    console.log({ request, response });
  }, [request, response]);

  return (
    <Pressable
      onPress={async () => {
        await promptAsync({ projectNameForProxy: config.PROJECT_NAME });
      }}
      isDisabled={!request}
    >
      Login with Google
    </Pressable>
  );
}

The console log always has proper value of request. But response is always null.

[Rajat Kanti Nandi]

I tried to create a build and then login on the Android app. But it did not work. Microsoft login does not work as well which is done using useAuthRequest hook from expo-auth-session. So, this issue is not limited to the Expo go app.

I also created an iOS app in which login works perfectly fine.

[Rajat Kanti Nandi]

I think I have figured out the issue but not sure how to solve this.

I have a app/(auth)/index.tsx route where the login is happening and the login button is present.
After coming back from auth screen, the component is remounted again so, Google.useAuthRequest is re-initialised and it never has the response object. I have added a log with this code in the component and it is logging: 'unmount' and then 'mount' again.

  useEffect(() => {
    console.log('mount');

    return () => {
      console.log('unmount');
    };
  }, []);

So, it is clearly re-mounting which is causing the issue.

[Rajat Kanti Nandi]

I am also using this useProtectedRoute hook in the app/_layout.tsx file which is based on the documentation:

function useProtectedRoute() {
  const segments = useSegments();
  const { isLoggedIn } = useStore.use.userData();
  const router = useRouter();

  useEffect(() => {
    const inAuthGroup = segments[0] === '(auth)';
    const inAppGroup = segments[0] === '(app-stack)';
    console.log(isLoggedIn, segments);

    if (isLoggedIn && !inAppGroup) {
      // Redirect away from the sign-in page.
      router.replace(config.initialTab);
    }
    else if (
      // If the user is not signed in and the initial segment is not anything in the auth group.
      !isLoggedIn &&
      !inAuthGroup
    ) {
      // Redirect to the sign-in page.
      router.replace('/');
    }
  }, [isLoggedIn, segments]);
}

So, I added some logs inside the hook and looks like after coming back from Google login page, it is unable to load (auth)/index route and instead loading [...unmatched] route. So, looks like that is why it is causing remount of the component. Screenshots of the logs below.

[Rajat Kanti Nandi]

Am I doing it the right way. If not what is the right way to do this?

[Evan Bacon]

duplicate #157