Not authenticated after trying to sign in on native devices using federated login

[keygun-development]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line
 System:
    OS: macOS 13.2
    CPU: (8) arm64 Apple M2
    Memory: 143.11 MB / 8.00 GB
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 16.20.0 - /opt/homebrew/bin/node
    npm: 8.19.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 119.0.6045.105
    Safari: 16.3
  npmPackages:
    @aws-amplify/auth: ^5.6.5 => 5.6.5 
    @capacitor/android: 5.2.2 => 5.2.2 
    @capacitor/app: 5.0.6 => 5.0.6 
    @capacitor/browser: ^5.0.6 => 5.1.0 
    @capacitor/cli: 5.0.5 => 5.0.5 
    @capacitor/core: 5.2.1 => 5.2.1 
    @capacitor/haptics: 5.0.6 => 5.0.6 
    @capacitor/ios: 5.2.2 => 5.2.2 
    @capacitor/keyboard: 5.0.2 => 5.0.2 
    @capacitor/share: ^5.0.4 => 5.0.6 
    @capacitor/status-bar: 5.0.6 => 5.0.6 
    @cypress/angular:  0.0.0-development 
    @cypress/mount-utils:  0.0.0-development 
    @cypress/react:  0.0.0-development 
    @cypress/react18:  0.0.0-development 
    @cypress/svelte:  0.0.0-development 
    @cypress/vue:  0.0.0-development 
    @cypress/vue2:  0.0.0-development 
    @ionic/vue: ^7.0.0 => 7.5.1 
    @ionic/vue-router: ^7.1.3 => 7.5.1 
    @posthog/plugin-scaffold: ^1.4.2 => 1.4.4 
    @types/node: ^20.5.1 => 20.8.7 (16.18.59)
    @types/uuid: ^9.0.2 => 9.0.6 
    @vitejs/plugin-vue: ^4.0.0 => 4.4.0 
    @vue/eslint-config-typescript: ^11.0.2 => 11.0.3 
    @vue/test-utils: ^2.4.1 => 2.4.1 
    @wordpress/base-styles: ^4.28.0 => 4.35.0 
    aws-amplify: ^5.3.11 => 5.3.11 
    core-js: ^3.31.1 => 3.33.1 
    cypress: ^12.17.2 => 12.17.4 
    eslint: ^8.42.0 => 8.51.0 
    eslint-plugin-vue: ^9.17.0 => 9.17.0 
    ionicons: ^7.1.1 => 7.2.1 
    ionicons-loader:  undefined ()
    ionicons/components:  undefined ()
    ionicons/icons:  7.2.1 
    jsdom: ^22.1.0 => 22.1.0 
    pinia: ^2.0.36 => 2.1.7 
    plausible-tracker: ^0.3.8 => 0.3.8 
    posthog-js: ^1.58.0 => 1.84.1 
    posthog-js-react:  1.0.0 
    sass: ^1.66.1 => 1.69.4 
    swiper: ^10.2.0 => 10.3.1 
    typescript: ^5.1.6 => 5.2.2 (5.0.4)
    vite: ^4.3.9 => 4.5.0 
    vite-plugin-dts: ^3.0.3 => 3.6.0 
    vue: ^3.2.47 => 3.3.5 
    vue-router: ^4.2.4 => 4.2.5 
    vue-tsc: ^1.8.6 => 1.8.19 
  npmGlobalPackages:
    @aws-amplify/cli: 12.7.0
    @ionic/cli: 7.0.1
    @vue/cli: 5.0.8
    corepack: 0.17.0
    npm: 8.19.4
    vue: 3.3.4

Describe the bug

I'm trying to authenticate in my app using amplify auth. It doesn't work for native devices. I am using a very specific setup using: vue, ionic, capacitor and aws-amplify. The authentication flow works when using this on my pc, but when trying it on a native device (ios) it doesn't authenticate me. It does tell me that the credentials are set from session, but that's it.

Expected behavior

I would've thought that amplify would authenticate me. It calls the token endpoint and then sets the credentials from the session. However this is not happening.

Reproduction steps

1. npm i
2. ionic cap sync ios <- Will compile the javascript code to swift code
3. ionic cap open ios <- Opens up Xcode
4. Run app on a simulator (I've tried mulitple devices, same result)
5. Click login
6. Authenticate using the federated login provider
7. Automatically redirects back to app

Code Snippet

// Put your code below this line.
import awsconfig from './aws-exports';
import {urlOpener} from "./urlOpener";

awsconfig.oauth.redirectSignIn = `${window.location.origin}/`;
awsconfig.oauth.redirectSignOut = `${window.location.origin}/`;
awsconfig.oauth.urlOpener = urlOpener

Amplify.configure(awsconfig);
if(Capacitor.isNativePlatform()) {
    CapacitorApp.addListener('appUrlOpen', ({url}) => {
            // @ts-ignore
            // eslint-disable-next-line no-underscore-dangle
            (Auth as any)._handleAuthResponse(url);

            if (isPlatform('ios')) {
                Browser.close();
            }
    });
}

Hub.listen('auth', async ({payload}) => {
    if (Capacitor.isNativePlatform()) {
        console.log(payload.event)
    }
});

window.LOG_LEVEL = 'DEBUG';

// urlOpener.ts
import {Browser} from "@capacitor/browser";
import {Capacitor} from "@capacitor/core";

export const urlOpener = async (url: string): Promise<void> => {
    await Browser.open({url: url, windowName: Capacitor.isNativePlatform() ? '_blank' : '_self'})
}

// Login.vue
import {AmplifyCognitoProvider} from "../types/Classes/AmplifyCognitoProvider";

const auth = new AmplifyCognitoProvider();
const login = async () => {
    await auth.federatedSignIn('Freave');
    const token = await auth.getAccessJwtToken();
    console.log('token:', token);
}

// auth class
public async federatedSignIn(provider: string): Promise<void> {
        try {
            // @ts-ignore
            const cred: ICredentials = await Auth.federatedSignIn({provider: provider});
        } catch (e) {
            console.log("Error federated sign in: " + e)
        }
    }

Log output

// Put your logs below this line
[log] - [DEBUG] 50:29.955 OAuth - Redirecting to https://my-app.eu-west-1.amazoncognito.com/oauth2/authorize?redirect_uri=myapp%3A%2F%2Flocalhost%2F&response_type=code&client_id=client_id&identity_provider=Freave&scope=phone%20email%20openid%20profile%20aws.cognito.signin.user.admin&state=state&code_challenge=codechallenge&code_challenge_method=S256
⚡️  [log] - [DEBUG] 50:29.956 AuthClass - Getting current session
⚡️  [log] - [DEBUG] 50:29.956 AuthClass - Failed to get user from user pool
⚡️  [log] - [DEBUG] 50:29.957 AuthClass - Failed to get the current user No current user
⚡️  [log] - [DEBUG] 50:33.48 Hub - Dispatching to auth with  {"event":"parsingCallbackUrl","data":{"url":"myapp://localhost/?code=code&state=state"},"message":"The callback url is being parsed"}
⚡️  [log] - [DEBUG] 50:33.48 Hub - Dispatching to auth with  {"event":"parsingCallbackUrl","data":{"url":"myapp://localhost/?code=code&state=state"},"message":"The callback url is being parsed"}
⚡️  [log] - parsingCallbackUrl
⚡️  [log] - [DEBUG] 50:33.49 OAuth - Starting code flow with myapp://localhost/?code=code&state=state
⚡️  [log] - [DEBUG] 50:33.50 Hub - Dispatching to auth with  {"event":"codeFlow","data":{},"message":"Retrieving tokens from https://my-app.eu-west-1.amazoncognito.com/oauth2/token"}
⚡️  [log] - [DEBUG] 50:33.50 Hub - Dispatching to auth with  {"event":"codeFlow","data":{},"message":"Retrieving tokens from https://my-app.eu-west-1.amazoncognito.com/oauth2/token"}
⚡️  [log] - codeFlow
⚡️  [log] - [DEBUG] 50:33.50 OAuth - Calling token endpoint: https://my-app.eu-west-1.amazoncognito.com/oauth2/token with {"grant_type":"authorization_code","code":"code","client_id":"client_id","redirect_uri":"myapp://localhost/","code_verifier":"code_verifier"}
⚡️  [log] - [DEBUG] 50:33.330 Credentials - set credentials from session

aws-exports.js

const awsmobile = {
    "aws_project_region": "eu-west-1",
    "aws_cognito_identity_pool_id": "eu-west-1:xxx-xxx-x-xx-xxx",
    "aws_cognito_region": "eu-west-1",
    "aws_user_pools_id": "eu-west-1_xxx",
    "aws_user_pools_web_client_id": "xxxx",
    "oauth": {
        "domain": "my-app.eu-west-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "http://localhost:5173/,capacitor://localhost/,myapp://localhost/,http://localhost/,myapp://localhost/login/",
        "redirectSignOut": "http://localhost:5173/,capacitor://localhost/,myapp://localhost/,http://localhost/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [
        "GOOGLE"
    ],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};


export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[keygun-development]

This issue has been resolved. I've posted my answer here: #3537 (comment)

[cwomack]

@keygun-development, thank you for the confirmation that it's resolved! If there's further issues with this, let us know.