Safari fails on successful sign in: UnexpectedSignInInterruptionException

jasonrdunne commented 4 months ago

Before opening, please confirm:

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

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth, storage, api

Backend

CDK

Environment information

``` # Put output below this line System: OS: macOS 14.1 CPU: (11) arm64 Apple M3 Pro Memory: 160.92 MB / 18.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.2.0 - /opt/homebrew/bin/node Yarn: 1.22.21 - /opt/homebrew/bin/yarn npm: 10.8.1 - /opt/homebrew/bin/npm Browsers: Chrome: 125.0.6422.176 Edge: 121.0.2277.83 Safari: 17.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/auth: ^6.0.20 => 6.0.20 @aws-amplify/auth/cognito: undefined () @aws-amplify/auth/cognito/server: undefined () @aws-amplify/auth/enable-oauth-listener: undefined () @aws-amplify/auth/server: undefined () @aws-amplify/core: ^6.0.20 => 6.0.20 @aws-amplify/core/internals/adapter-core: undefined () @aws-amplify/core/internals/aws-client-utils: undefined () @aws-amplify/core/internals/aws-client-utils/composers: undefined () @aws-amplify/core/internals/aws-clients/cognitoIdentity: undefined () @aws-amplify/core/internals/aws-clients/pinpoint: undefined () @aws-amplify/core/internals/providers/pinpoint: undefined () @aws-amplify/core/internals/utils: undefined () @aws-amplify/core/server: undefined () @aws-amplify/ui-react: ^6.1.5 => 6.1.5 @aws-amplify/ui-react-internal: undefined () @babel/core: undefined () @babel/runtime: 7.22.5 @chatscope/chat-ui-kit-react: ^2.0.3 => 2.0.3 @chatscope/chat-ui-kit-styles: ^1.4.0 => 1.4.0 @edge-runtime/cookies: 4.1.0 @edge-runtime/ponyfill: 2.4.2 @edge-runtime/primitives: 4.1.0 @fortawesome/fontawesome-svg-core: ^6.5.1 => 6.5.1 (1.3.0) @fortawesome/free-regular-svg-icons: ^6.5.1 => 6.5.1 @fortawesome/react-fontawesome: ^0.2.0 => 0.2.0 (0.1.19) @graphql-codegen/cli: ^5.0.2 => 5.0.2 @hapi/accept: undefined () @headlessui/react: ^2.0.4 => 2.0.4 @mswjs/interceptors: undefined () @napi-rs/triples: undefined () @next/font: undefined () @next/react-dev-overlay: undefined () @opentelemetry/api: undefined () @react-pdf/renderer: ^3.1.14 => 3.1.14 @smastrom/react-rating: ^1.3.2 => 1.3.2 @t3-oss/env-nextjs: ^0.2.2 => 0.2.2 @types/eslint: ^8.21.3 => 8.44.7 @types/graphql: ^14.5.0 => 14.5.0 @types/node: 20.11.16 => 20.11.16 (20.11.27, 16.18.88) @types/node-fetch: ^2.6.11 => 2.6.11 @types/react: ^18.0.28 => 18.2.37 @types/react-dom: ^18.0.11 => 18.2.15 @types/react-dropzone: ^5.1.0 => 5.1.0 @typescript-eslint/eslint-plugin: ^5.56.0 => 5.62.0 @typescript-eslint/parser: ^5.56.0 => 5.62.0 @vercel/nft: undefined () @vercel/og: 0.6.2 @welldone-software/why-did-you-render: ^7.0.1 => 7.0.1 acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () autoprefixer: ^10.4.16 => 10.4.16 aws-amplify: ^6.0.20 => 6.0.20 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/enable-oauth-listener: 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 () aws-appsync: ^4.1.10 => 4.1.10 babel-packages: undefined () browser-image-compression: ^2.0.2 => 2.0.2 browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () ci-info: undefined () cli-select: undefined () client-only: 0.0.1 comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cookies-next: ^4.1.1 => 4.1.1 cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () data-uri-to-buffer: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () edge-runtime: undefined () eslint: ^8.36.0 => 8.53.0 eslint-config-next: ^14.1.3 => 14.1.3 events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () graphql: ^16.8.1 => 16.8.1 (15.8.0) graphql-subscriptions: ^2.0.0 => 2.0.0 graphql-ws: ^5.15.0 => 5.15.0 gzip-size: undefined () http-proxy: undefined () http-proxy-agent: undefined () https-browserify: undefined () https-proxy-agent: undefined () icss-utils: undefined () ignore-loader: undefined () image-size: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest-worker: undefined () jose: ^5.1.3 => 5.1.3 (5.2.3) json5: undefined () jsonwebtoken: undefined () jwt-decode: ^4.0.0 => 4.0.0 loader-runner: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () micromatch: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^14.1.3 => 14.1.3 node-fetch: ^3.3.2 => 3.3.2 (2.7.0, ) node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () platform: undefined () postcss: ^8.4.31 => 8.4.31 postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () prettier: ^3.0.3 => 3.1.0 process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18.2.0 => 18.2.0 react-builtin: undefined () react-currency-input-field: ^3.6.11 => 3.6.12 react-dom: ^18.2.0 => 18.2.0 react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-dropzone: ^14.2.3 => 14.2.3 react-experimental-builtin: undefined () react-google-recaptcha: ^3.1.0 => 3.1.0 react-is: 18.2.0 react-pdf: ^7.5.1 => 7.5.1 react-query: ^3.39.3 => 3.39.3 react-refresh: 0.12.0 react-server-dom-turbopack-builtin: undefined () react-server-dom-turbopack-experimental-builtin: undefined () react-server-dom-webpack-builtin: undefined () react-server-dom-webpack-experimental-builtin: undefined () regenerator-runtime: 0.13.4 sass: ^1.62.1 => 1.69.5 sass-loader: undefined () scheduler-builtin: undefined () scheduler-experimental-builtin: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () shell-quote: undefined () source-map: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () subscriptions-transport-ws: ^0.11.0 => 0.11.0 superstruct: undefined () tailwindcss: ^3.4.3 => 3.4.3 tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tslint: ^6.1.3 => 6.1.3 tty-browserify: undefined () typescript: ^5.4.2 => 5.4.2 ua-parser-js: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () zod: ^3.21.4 => 3.22.4 () npmGlobalPackages: @aws-amplify/cli: 12.10.1 npm: 10.8.1 ```

Describe the bug

On successful sign in with safari, I get the following error:

UnexpectedSignInInterruptionException: Unable to get user session following successful sign-in.

My guess is a cookie issue.

Expected behavior

Safari should successfully sign in, as it works on chrome/firefox/edge.

Reproduction steps

Try to sign in on safari
it fails

Code Snippet

// This is how i store idtoken
import { CookieStorage } from "aws-amplify/utils";
...
function configureAmplify(config: ResourcesConfig): void {
    if (!isConfigured) {
      Amplify.configure(config);

      const amplifyConfigured = Amplify.getConfig();
      console.log("configured", amplifyConfigured, Amplify);
      isConfigured = true;
      cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage());

    }
  }

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

    const oauth = {
        domain: `${environmentWithDot}domain.com`,
        scopes: ['openid', 'email'],
        redirectSignIn: (isLocal && environment != "prod") ? ['http://localhost:3000/auth/callback/sign-in'] : [`https://${environmentWithDot}domain.com/auth/callback/sign-in`],
        redirectSignOut: (isLocal && environment != "prod") ? ['http://localhost:3000/auth/callback/sign-out'] : [`https://${environmentWithDot}domain.com/auth/callback/sign-out`],
        responseType: 'code' as const
    };  

  const config: ResourcesConfig = {
            Auth: {
                Cognito: {
                    userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID,
                    userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID,
                    loginWith: {
                        oauth: oauth,
                        email: true,
                        username: true
                    }
                }
            },
            API: {
                GraphQL: {
                    endpoint: `https://graphql-api.${environmentWithDot}domain.com/graphql`,
                    region: 'us-east-1',
                    defaultAuthMode: 'userPool',
                },
            },
    }

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

HuiSF commented 4 months ago

Hi @jasonrdunne thanks for opening this issue. There is a known limitation of Webkit based browsers that cookies with secure flag cannot be operated with a local development server running on the http protocol.

Please refer to this comment for more information. If you like to develop with Safari, you can utilize next dev --experimental-https to run the local development server with https protocol. See Next.js documentation for details.

In addition, looking at your code sample, if you are using Amplify with SSR use cases in your Next.js project, you only need to pass a { ssr: true } parameter instead of overriding with CookieStorage by yourself:

function configureAmplify(config: ResourcesConfig): void {
    if (!isConfigured) {
      Amplify.configure(config, { ssr: true });

      const amplifyConfigured = Amplify.getConfig();
      console.log("configured", amplifyConfigured, Amplify);
      isConfigured = true;
    }
  }

Please see Amplify documentation https://docs.amplify.aws/gen1/react/build-a-backend/server-side-rendering/nextjs/ for more details.

jasonrdunne commented 4 months ago

Ah, I didn't realize it was only local development. In that case it's no problem whatsoever! Thanks

aws-amplify / amplify-js