Google authentication through cognito failing to redirect to application in react-native expo project using expo-auth-session library

  Kiến thức lập trình

I have set up google authentication through cognito in my react-native expo mobile application.

Using the expo-auth-session library, I make a call to my cognito user pool, which redirects to accounts.google.com, which after authentication redirects back to cognito, which then redirects back to the application.
This flow works perfectly on my IPhone emulator, yet it fails on my Android emulator.

I can successfully render the in-app webView in android, enter my account details, but after that I get a blank screen in the in-app browser and I am not redirected back to my application.

Since everything is from expo, I expect it to work without touching any native files.

I am kind of out of ideas, since it works for IPhone, I doubt that it has to do with the frontend code or the backend.

I have double, tripple and quadruple checked whether the redirect URI is correct, and added android specific scheme and host configuration to app.json.
Nothing has changed anything.

I’m unsure how to debug this issue, since in the backend everything works fine. User is authenticated, post confirmation function is triggered and executed, but nothing reaches back to the frontend. Our listener that waits on a change on the response variable is never triggered.

I am wondering whether it has to do with some native configuration… security, network, deep link settings… But that all should be managed by expo since it’s an expo project and library.

I would highly appreciate any help and or ideas on this topic. Thanks in advance!


Some code:
App.json

    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.fluentpal.frontend",
      "intentFilters": [
        {
          "action": "VIEW",
          "data": [
            {"scheme": "fluentpal", "host": "oauth2_redirect"}
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    },

AuthRequest

    const redirectUri = 'fluentpal://oauth2_redirect';
    const discoveryDocument = {
        authorizationEndpoint: `${userPoolUrl}/oauth2/authorize`,
        tokenEndpoint: `${userPoolUrl}/oauth2/token`,
        revocationEndpoint: `${userPoolUrl}/oauth2/revoke`,
    };
    const [request, response, promptAsync] = useAuthRequest(
        {
            clientId,
            responseType: ResponseType.Code,
            redirectUri,
            usePKCE: true,
            scopes: ['openid', 'profile', 'email', 'aws.cognito.signin.user.admin'],
            extraParams: {
                identity_provider: 'Google',
                prompt: 'login',
            }
        },
        discoveryDocument
    );

Listener

    useEffect(() => {
        if (response) {
            // Check if the response is of type error
            if ('error' in response && response.error) {
                Alert.alert(
                    'Authentication Error',
                    response.params.error_description || 'Something went wrong'
                );
                return;
            }
            if (response.type === 'success') {
                exchangeTokens({
                clientId,
                code: response.params.code,
                redirectUri,
                extraParams: {
                    code_verifier: request?.codeVerifier,
                },
                });
            }
        }
    }, [request, response]);

ANDROID EMULATOR BLANK SCREEN

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT