federated google sign in issue (aws amplify and Vue js)

Question

I setup google auth with vue js and aws amplify cognito. On first signIn i get this message

Sign in failure ValidationException: 1 validation error detected: Value '{xxx.amazonaws.com/xxx}' at 'logins' failed to satisfy constraint: Map value must satisfy constraint: [Member must have length less than or equal to 50000, Member must have length greater than or equal to 1]

On second signIn(press button) it sign in well.

Why don't work first sign in and why get this message?

Config:

const awsmobile = {
    "aws_project_region": "ap-south-1",
    "aws_cognito_identity_pool_id": "ap-south-1:25071751-c943-443a-94ab-62c6b0f1c496",
    "aws_cognito_region": "ap-south-1",
    "aws_user_pools_id": "ap-south-1_NAZCqoylw",
    "aws_user_pools_web_client_id": "38a1itpo95f3tgln6vq43u3u4o",
    "oauth": {
        "domain": "mobileweb-dev.auth.ap-south-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        //"redirectSignIn": "https://test-kutumbh-app.netlify.app/home",
       // "redirectSignOut": "https://test-kutumbh-app.netlify.app",
       //"redirectSignIn": "https://dev-kutumbh-app.netlify.app/home",
       //"redirectSignOut": "https://dev-kutumbh-app.netlify.app",
       "redirectSignIn": "http://localhost:3000/home",
       "redirectSignOut": "http://localhost:3000",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

enter code here

enter image description here

Answer 1

By default, Amplify will open the Cognito Hosted UI in Safari/Chrome, but you can override that behavior by providing a custom URL opener.

To solve the issue to convert the given URL into the required form using InAppBrowser as suggested in this ISSUE by Ashish-Nanda comment.

Amplify.configure({
    ...config, oauth: {
        ...config.oauth,
        urlOpener: async function urlOpener(url, redirectUrl) {
            await InAppBrowser.isAvailable();
            const { type, url: newUrl } = await InAppBrowser.openAuth(url, redirectUrl, {
                showTitle: false,
                enableUrlBarHiding: true,
                enableDefaultShare: false,
                ephemeralWebSession: false,
            });

            const splitUrl = `myapp://?${newUrl.split("#_=_")[0].split("?")[1] || ''}`;
            if (type === 'success') {
                Linking.openURL(splitUrl);
            }
        }

    }
})