amplify-js: Federated sign works on desktop but on IOS is broken

Before opening, please confirm:

JavaScript Framework

Angular

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line

npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages

  System:
    OS: Linux 6.1 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
    Memory: 27.80 GB / 62.61 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.159
  npmPackages:
    @angular-devkit/build-angular: ^17.0.6 => 17.0.6
    @angular/animations: ^17.0.6 => 17.0.6
    @angular/cdk: ^15.2.9 => 15.2.9
    @angular/cli: ^17.0.6 => 17.0.6
    @angular/common: ^17.0.6 => 17.0.6
    @angular/compiler: ^17.0.6 => 17.0.6 (9.0.0)
    @angular/compiler-cli: ^17.0.6 => 17.0.6
    @angular/compiler/testing:  undefined ()
    @angular/core: ^17.0.6 => 17.0.6 (9.0.0)
    @angular/core/testing:  undefined ()
    @angular/forms: ^17.0.6 => 17.0.6
    @angular/language-service: ^17.0.6 => 17.0.6
    @angular/localize: ^17.0.6 => 17.0.6
    @angular/platform-browser: ^17.0.6 => 17.0.6
    @angular/platform-browser-dynamic: ^17.0.6 => 17.0.6
    @angular/router: ^17.0.6 => 17.0.6
    @aws-amplify/ui-angular: ^5.0.3 => 5.0.3
    @ckeditor/ckeditor5-angular: ^2.0.1 => 2.0.2
    @fortawesome/angular-fontawesome: ^0.13.0 => 0.13.0
    @fortawesome/fontawesome-svg-core: ^6.5.1 => 6.5.1
    @fortawesome/free-brands-svg-icons: ^6.5.1 => 6.5.1
    @fortawesome/free-regular-svg-icons: ^6.5.1 => 6.5.1
    @fortawesome/free-solid-svg-icons: ^6.5.1 => 6.5.1
    @microsoft/signalr: ^6.0.21 => 6.0.21
    @ng-bootstrap/ng-bootstrap: ^15.1.2 => 15.1.2
    @ng-select/ng-select: ^11.0.0 => 11.2.0
    @ngxs/devtools-plugin: 3.8.1 => 3.8.1
    @ngxs/logger-plugin: 3.8.1 => 3.8.1
    @ngxs/store: ^3.8.1 => 3.8.1
    @ngxs/store/internals:  undefined ()
    @ngxs/store/internals/testing:  undefined ()
    @ngxs/store/operators:  undefined ()
    @popperjs/core: ^2.11.7 => 2.11.8
    @stripe/stripe-js: ^2.1.11 => 2.1.11
    @types/jasmine: ~3.6.0 => 3.6.11
    @types/jasminewd2: ~2.0.3 => 2.0.10
    @types/node: ^12.11.1 => 12.20.55 (20.10.3)
    angular-froala-wysiwyg: 4.1.3 => 4.1.3
    assert: ^2.0.0 => 2.0.0 (1.5.0)
    aws-amplify: ^6.0.6 => 6.0.6
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    bootstrap: ^5.2.3 => 5.2.3
    browserify: ^17.0.0 => 17.0.0
    buffer: ^6.0.3 => 6.0.3 (4.9.2, 5.7.1, 5.2.1)
    codelyzer: ^6.0.2 => 6.0.2
    example-typescript:  1.0.0
    highcharts: ^11.1.0 => 11.1.0
    highcharts-angular: ^3.1.2 => 3.1.2
    jasmine-core: ^3.8.0 => 3.99.1 (2.8.0)
    jasmine-spec-reporter: ^7.0.0 => 7.0.0
    karma: ^6.3.4 => 6.4.2
    karma-browserify: ^8.1.0 => 8.1.0
    karma-chrome-launcher: ^3.1.0 => 3.2.0
    karma-coverage-istanbul-reporter: ^3.0.3 => 3.0.3
    karma-jasmine: ^4.0.1 => 4.0.2
    karma-jasmine-html-reporter: ^1.7.0 => 1.7.0
    karma-junit-reporter: ^2.0.1 => 2.0.1
    lru-cache: 9.1.1 => 9.1.1 (6.0.0, 5.1.1, 10.1.0)
    ngx-image-cropper: ^6.3.2 => 6.3.4
    ngx-infinite-scroll: ^16.0.0 => 16.0.0
    ngx-sharebuttons: ^13.0.0 => 13.0.0
    node-example:  1.0.0
    pg: ^8.7.1 => 8.11.0
    pkg_event:  undefined ()
    process: ^0.11.10 => 0.11.10
    protractor: ^7.0.0 => 7.0.0
    protractor-example:  1.0.0
    rxjs: ~6.6.7 => 6.6.7 (7.8.1)
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tributejs: ^5.1.3 => 5.1.3
    ts-node: ^10.1.0 => 10.9.1
    tslib: ^2.0.0 => 2.6.2 (1.14.1)
    tslint: ^6.1.3 => 6.1.3
    typescript: ~5.2.2 => 5.2.2
    typescript-example:  1.0.0
    watchify: ^4.0.0 => 4.0.0
    webpack: ^5.48.0 => 5.89.0
    webpack-bundle-analyzer: ^4.4.2 => 4.8.0
    zone.js: ~0.14.2 => 0.14.2 (0.10.3)
  npmGlobalPackages:
    @angular/cli: 17.0.6
    corepack: 0.17.0
    husky: 8.0.3
    npm: 9.5.1

Describe the bug

While using a desktop or a laptop, federated login flow works as expected.

when the same authentication steps (login -> Sign in with Apple) or Google, the sign in button is unresponsive. However, if the request is executed twice for sign up, we get an error back. This is the full event that we’re receiving from AuthenticatorService.subscribe

{
    "authStatus": "unauthenticated",
    "error": "redirect is coming from a different origin. the oauth flow needs to be initiated from the same origin",
    "hasValidationErrors": false,
    "isPending": false,
    "route": "signUp",
    "socialProviders": [
        "google",
        "apple"
    ],
    "totpSecretCode": null,
    "validationErrors": {}
}

currently this bug is in our production and can be reproduced that way at marketplays.com

Expected behavior

Federated sign in to work on mobile (IOS) as it does on desktop environment.

Reproduction steps

configure

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: 'poolid',
      userPoolClientId: 'poolclient',
      loginWith: {
        oauth: {
          domain: 'auth.mydomain.com',
          scopes: [
            'email',
            'openid',
            'profile'
          ],
          redirectSignIn: [environment.redirectSignIn],
          redirectSignOut: [environment.redirectSignOut],
          responseType: 'code',
          providers: [
            'Google',
            'Apple'
          ]
        },
      }
    }
  },
});

install @ng-bootstrap/ng-bootstrap

create a new component “LoginComponent”, launch with NgModal.

Login component code

<div class="d-flex w-100">
  <div class="mx-auto">
    <amplify-authenticator [initialState]="authState"
                           [signUpAttributes]="signupAttributes">
      <ng-template
        amplifySlot="header"
        let-user="user"
        let-signOut="signOut">
        <div class="w-100 bg-white d-flex p-2 p-m-3" style="min-width: 100%">
          <button (click)="onClose()" aria-label="Close" class="btn-close ms-auto" type="button">
          </button>
        </div>

      </ng-template>


    </amplify-authenticator>

  </div>

</div>

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: 'us-east-1_8p33uJNJY',
      userPoolClientId: '2hmhe5vh6384p62rp0ve1ro9kl',
      loginWith: {
        oauth: {
          domain: 'auth.marketplays.com',
          scopes: [
            'email',
            'openid',
            'profile'
          ],
          redirectSignIn: [environment.redirectSignIn],
          redirectSignOut: [environment.redirectSignOut],
          responseType: 'code',
          providers: [
            'Google',
            'Apple'
          ]
          // google_client_id: '722209500397-phmg74h0cavan3pr6c2jf8alpa27tr89.apps.googleusercontent.com'
        },
      },
      // federationTarget: 'COGNITO_USER_POOLS'
    }
  },
});

Additional configuration

No response

Mobile Device

Iphone 11 pro

Mobile Operating System

IOS 17.1.2

Mobile Browser

safari, Chrome

Mobile Browser Version

No response

Additional information and screenshots

No response

About this issue

  • Original URL
  • State: closed
  • Created 7 months ago
  • Comments: 17 (8 by maintainers)

Most upvoted comments

ok new update:

I deleted chrome and reinstalled, it works on that as well. I’ve noticed I was using private browsing for safari, once I switched back from that it started working.

now, it works on all browsers EXCEPT for private browsing in safari, I haven’t tried private browsing on other browsers

+2
kewur on Dec 11, 2023

I’m getting the same issue. Works fine in development but in production federated social sign ins I get the same redirect is coming from a different origin error on the second click of the ‘sign up with facebook’ or google button.

awsExports.oauth.domain = ‘auth.domain.com’; awsExports.oauth.redirectSignIn = ‘http://localhost:3000/dashboard/home/’; awsExports.oauth.redirectSignOut = ‘http://localhost:3000/’; Amplify.configure({ …awsExports });

With Cognito user pool app integration custom domain set to auth.domain.com. App client domain.app.clientWeb authorized URL set to http://localhost:3000/dashboard/home/

This work fine in development. Can sign up, sign in with FB and Google no problem.

When i change it to this:

awsExports.oauth.domain = ‘auth.domain.com’; awsExports.oauth.redirectSignIn = ‘https://domain/dashboard/home/’; awsExports.oauth.redirectSignOut = ‘https://domain.com/’; Amplify.configure({ …awsExports });

And the authorized URL in cognito to https://domain.com/dashboard/home/ And in facebook have authorized https://auth.domain.com/oauth2/idpresponse as well as https://domain.com/dashboard/home/oauth2/idpresponse as URI redirects.

then in production I get the redirect coming from another origin error described above.

I’ve tried multiple devices and browsers and all same.

+1
eherms on Jan 18, 2024

thanks for looking into it, appreciate the customer obsession 👍 safari I believe is bundled with iOS, since im on the latest version of that, my assumption is that it is latest version. ok one last update

I closed all my other tabs of safari private, and now it works on private as well. it was a very strange problem, but I think it’s possible that I still had amplify v1 loaded in some other tab and that was somehow interfering with this new version?

+1
kewur on Dec 11, 2023

Thanks for the confirmation @kewur . Don’t have to factory reset. This seems to be a bug. We are trying to reproduce this issue and will follow up on any updates and next steps.

+1
israx on Dec 11, 2023

@cwomack I have tried both with trailing slash and non trailing slash. Both versions work with desktop/laptop and can go through the full auth fllow but is broken on iphone, the login form disappears and nothing happens on sign in, and the first sign up request is unresponsive, but the second one returns that error I’ve shared. these are the values im using at the moment.

  redirectSignIn: ['https://marketplays.com/signedin-reroute'],
  redirectSignOut: ['https://marketplays.com'],

this is the error I’m seeing

{
    "authStatus": "unauthenticated",
    "error": "redirect is coming from a different origin. the oauth flow needs to be initiated from the same origin",
    "hasValidationErrors": false,
    "isPending": false,
    "route": "signUp",
    "socialProviders": [
        "google",
        "apple"
    ],


    "totpSecretCode": null,
    "validationErrors": {}
}

Here are the screen shots how they’re working

IMG_2563 IMG_2564

@israx redirect is coming from a different origin. the oauth flow needs to be initiated from the same origin on

  1. sign-up -> sign-up

it doesn’t go further than that, I can’t login with federated providers at all on my iphone. I CAN login with my desktop however.

I’m getting the

+1
kewur on Dec 11, 2023
Read more comments on GitHub
← amplify-js: Federated sign up doesn't set email_verified to true
amplify-js: Federated user fails to update mutable attributes with a 400 response: "Access Token does not have required scopes" →