❗Sign in with Apple - Button Not Respond after Closing Native Popup

[buildappsmart]

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

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Amplify Gen 2

Environment information

  System:
    OS: macOS 15.3
    CPU: (11) arm64 Apple M3 Pro
    Memory: 516.78 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.13.0/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 133.1.75.175
    Safari: 18.3
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/adapter-nextjs: ^1.4.3 => 1.4.3 
    @aws-amplify/adapter-nextjs/api:  undefined ()
    @aws-amplify/adapter-nextjs/data:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.22.5 
    @edge-runtime/cookies:  6.0.0 
    @edge-runtime/ponyfill:  4.0.0 
    @edge-runtime/primitives:  6.0.0 
    @eslint/eslintrc: ^3 => 3.2.0 
    @hapi/accept:  undefined ()
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/font:  undefined ()
    @opentelemetry/api:  undefined ()
    @types/node: ^20 => 20.17.17 
    @types/react: ^19 => 19.0.8 
    @types/react-dom: ^19 => 19.0.3 
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.4 
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: ^6.12.3 => 6.12.3 
    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/data:  undefined ()
    aws-amplify/data/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 ()
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1 
    commander:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    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: ^9 => 9.20.0 
    eslint-config-next: 15.1.6 => 15.1.6 
    events:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    glob:  undefined ()
    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 ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: 15.1.6 => 15.1.6 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    p-queue:  undefined ()
    path-browserify:  undefined ()
    path-to-regexp:  undefined ()
    picomatch:  undefined ()
    platform:  undefined ()
    postcss: ^8 => 8.5.1 (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 ()
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: ^19.0.0 => 19.0.0 
    react-builtin:  undefined ()
    react-dom: ^19.0.0 => 19.0.0 
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-is:  19.0.0-rc-65e06cb7-20241218 
    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-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 ()
    source-map08:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    superstruct:  undefined ()
    tailwindcss: ^3.4.1 => 3.4.17 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^5 => 5.7.3 
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
    zod-validation-error:  undefined ()
  npmGlobalPackages:
    corepack: 0.30.0
    npm: 10.9.2

Describe the bug

Click the HTML button to sign In with apple, after closing the native popup, the button will no longer respond.

This issue occurs on an iPhone's web browser (e.g., Safari) where a native popup appears instead of redirecting to Apple account Sign In web page.

amplify.mp4

Expected behavior

Click the button to sign In with apple, after closing the native popup, the button should still function.

Reproduction steps

1. create a next.js project
2. set up "Sign in with apple" service in apple developer account.
3. set up Amazon Cognito user pool with Apple as external auth provider, setup custom domain auth.mysite.com
4. prepare amplify configuration file
5. install aws-amplify and @aws-amplify/adapter-nextjs
6. create /login page with a button, when clicks, the button calls signInWithRedirect({ provider: 'Apple' })
7. run npm run dev
8. visit http://localhost:3000/login on iPhone web browser (eg. Safari), or deploy your website to production and visit https://www.mysite.com/login

Code Snippet

app/login/page.tsx

"use client";

import { signInWithRedirect } from "aws-amplify/auth";

export default function Login() {
  const handleLogin = async () => {
    try {
      await signInWithRedirect({
        provider: "Apple",
      });
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="p-10">
      <button onClick={handleLogin} type="button" className="p-4 border">
        Continue with Apple
      </button>
    </div>
  );
}

components/AmplifyConfigureClient.tsx

"use client";

import outputs from "@/amplifyConfig";
import { Amplify } from "aws-amplify";

Amplify.configure(outputs, {
  ssr: true,
});

export default function AmplifyConfigureClient() {
  return null;
}

app/layout.tsx

import "./globals.css";
import AmplifyConfigureClient from "@/components/AmplifyConfigureClient";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <AmplifyConfigureClient />
        {children}
      </body>
    </html>
  );
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

import { ResourcesConfig } from "aws-amplify";

const amplifyConfig: ResourcesConfig = {
  Auth: {
    Cognito: {
      userPoolId: "us-west-2_abcdefghijk",
      userPoolClientId: "abcdefghijk",
      identityPoolId: "us-west-2:12345678-1234-1234-1234-123412341234",
      allowGuestAccess: true,
      userAttributes: {
        email: {
          required: true,
        },
      },
      mfa: {
        status: "off",
        totpEnabled: false,
        smsEnabled: false,
      },
      loginWith: {
        email: true,
        oauth: {
          providers: ["Apple"],
          redirectSignIn: ["http://localhost:3000"],
          redirectSignOut: ["http://localhost:3000"],
          responseType: "code",
          scopes: [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin",
          ],
          domain: "auth.mysite.com",
        },
      },
    },
  },
};

export default amplifyConfig;

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]

Hi @buildappsmart thanks for reporting this issue and providing detailed triaging information. We will investigate.

[HuiSF]

Update: This issue is reproducible on my end. The cause is that the Amplify JS library currently cannot detect the events triggered by the native Sign in with Apple bottom sheet. We will need to investigate whether there is a viable solution for this use case.

Update2: Apple doesn't seem to provide a way to detect the cancellation of the native sign in with Apple bottom sheet.

Update3: Brought this up to the Amazon Cognito service and waiting for response...

[HuiSF]

Hi @buildappsmart, sorry about the delayed response. This issue seems to be caused by a gap on Apple's end that when cancelling the native SIWA bottom sheet, the system doesn't send any information to the Cognito Hosted UI endpoint, nor to the Web app which invokes it. This caused the library not to be able to detect anything and react.

Currently the only workaround is to refresh the page which clears the stuck sign-in process, so signInWithRedirect() can take effect again.

[buildappsmart]

Thanks @HuiSF for looking into this.

I tried other cloud providers like Supabase auth, they don't have this issue and they are using Sign in with Apple REST API

[HuiSF]

Understood @buildappsmart, currently the Sign in with Apple feature in Amplify JS is based on Amazon Cognito Hosted UI. The library doesn't directly communicate with Apple service. We will look into this. As this is an unsupported use case for whatever reason, I will mark this as a feature request for following up.

[samswitz]

Same issue here, it should be labeled as bug rather than feature-request

[HuiSF]

Hi @samswitz sorry for the inconvenience, Amazon Cognito Hosted UI and Amplify JS cannot handle this use cases due to the feature gap that exists on Apple's side, we will need to look into other solutions to cover this use case.