[expo-auth-session][google] Second call to promptAsync doesn't trigger a useEffect after response

[Grohden]

🐛 Bug Report

Summary of Issue

I'm using the expo-auth-session package and I've noticed that the useEffect recommended in the guide to handle the response doesn't trigger if I login, logout and login again. I'm not sure if this is caused by external dependencies like react-navigation.. but I was able to solve it by changing this line here:

expo/packages/expo-auth-session/src/providers/Google.ts

Lines 358 to 360 in 95a84b5

	} else {
	setFullResult(fullResult ?? result);
	}

To just:

setFullResult(result);

But this is just to login and I'm assuming that it will not fail, so I'm not sure that this is the proper fix...

Environment - output of expo diagnostics & the platform(s) you're targeting

I'm running dev in android, managed workflow.

  Expo CLI 4.0.17 environment info:
    System:
      OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
      Shell: 5.8 - /usr/bin/zsh
    Binaries:
      Node: 15.2.0 - ~/.nvm/versions/node/v15.2.0/bin/node
      Yarn: 1.22.10 - ~/.nvm/versions/node/v15.2.0/bin/yarn
      npm: 7.0.8 - ~/.nvm/versions/node/v15.2.0/bin/npm
    npmPackages:
      expo: ^40.0.0 => 40.0.0 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 
      react-native-web: ~0.13.12 => 0.13.18 
    npmGlobalPackages:
      expo-cli: 4.0.17
    Expo Workflow: managed

Reproducible Demo

I'm assuming that this stack overflow question code will trigger the same issue:

import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import axios from 'axios';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';

WebBrowser.maybeCompleteAuthSession();

export default function App() {

    const [gUser, setGUser] = useState(null);
    const [reqError, setReqError] = useState('');

    const [request, response, promptAsync] = Google.useAuthRequest({
        expoClientId: 'xxxxxxxxxxxx.apps.googleusercontent.com',
        androidClientId: 'xxxxxxxxxxx.apps.googleusercontent.com',
        // iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
        // webClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    });
    
    useEffect(() => {
        if (response?.type === 'success') {
            const { authentication } = response;

            getGoogleUser(authentication.accessToken)
        }
    }, [response]);

    const getGoogleUser = async (accessToken) => {
        try{
            let gUserReq = await axios.get('https://www.googleapis.com/oauth2/v2/userinfo',
                {
                    headers: {
                        Authorization: `Bearer ${accessToken}`
                    }
                }
            );
            
            console.log(gUserReq.data);
            setGUser(gUserReq.data);
        }
        catch(error){
            console.log('GoogleUserReq error: ', error);
            setReqError(error);
        }
    }

    return (
        <View style={styles.container}>
            {
                reqError !== '' &&
                <View>
                    <Text>There was an error</Text>
                    <Text>{JSON.stringify(reqError, 'reqEr', 4)}</Text>
                </View>
            }

            <Text style={{
                fontWeight: 'bold'
            }}>Signed user</Text>

            {
                gUser === null && 
                <Text>No user</Text>
            }

            {
                gUser !== null && 
                <Text>{JSON.stringify(gUser, null, 4)}</Text>
            }

            <Button
                disabled={!request}
                title="Sign in"
                onPress={() => promptAsync()}               
            />

            <StatusBar style="auto" />
        </View>
    );
}

Steps to Reproduce

Try to login twice using the oauth workflow, the second time it will not trigger the useEffect

Expected Behavior vs Actual Behavior

Effect deps should change after the response is received

[Grohden]

Here's my patch for patch-package if anyone's interested

diff --git a/node_modules/expo-auth-session/build/providers/Google.js b/node_modules/expo-auth-session/build/providers/Google.js
old mode 100644
new mode 100755
index 9cac987..0c7064d
--- a/node_modules/expo-auth-session/build/providers/Google.js
+++ b/node_modules/expo-auth-session/build/providers/Google.js
@@ -214,7 +214,7 @@ export function useAuthRequest(config = {}, redirectUriOptions = {}) {
             });
         }
         else {
-            setFullResult(fullResult ?? result);
+            setFullResult(result);
         }
         return () => {
             isMounted = false;
@@ -227,6 +227,7 @@ export function useAuthRequest(config = {}, redirectUriOptions = {}) {
         config.scopes?.join(','),
         request?.codeVerifier,
         fullResult,
+        result
     ]);
     return [request, fullResult, promptAsync];
 }

[julius-lae]

I did the fix from @Grohden but now i get dismiss as response.type on a Android device on a standalone build. On iOS everything works as expected.

[onaggar]

I faced the same problem using expo-auth-session. Referring to AuthSession documentation, the scheme should be the same as android.package in app.json, as mentioned here: "Your app needs to conform to the URI scheme matching your android.package (ex. com.myname.mycoolapp:/)". Now everything's work fine after changing it. Hope this helps.

[pedralho]

I faced the same problem using expo-auth-session. Referring to AuthSession documentation, the scheme should be the same as android.package in app.json, as mentioned here: "Your app needs to conform to the URI scheme matching your android.package (ex. com.myname.mycoolapp:/)". Now everything's work fine after changing it. Hope this helps.

It partially works, because after doing this, the user needs to choose which application to open to complete the redirection flow.

There is another discussion here about this same issue:
#12044

[Grohden]

I faced the same problem using expo-auth-session. Referring to AuthSession documentation, the scheme should be the same as android.package in app.json, as mentioned here: "Your app needs to conform to the URI scheme matching your android.package (ex. com.myname.mycoolapp:/)". Now everything's work fine after changing it. Hope this helps.

If you look at the generated apk manifest you will see that the scheme is automatically added, at least in mine it was added correctly and if I send an intent for that scheme it opens my app...

Did you configured it somewhere else? Like in the auth package?

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.