aws-amplify
❗Sign in with Apple - Button Not Respond after Closing Native Popup
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
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.
Expected behavior
Click the button to sign In with apple, after closing the native popup, the button should still function.
Reproduction steps
- create a next.js project
- set up "Sign in with apple" service in apple developer account.
- set up Amazon Cognito user pool with Apple as external auth provider, setup custom domain
auth.mysite.com - prepare amplify configuration file
- install
aws-amplifyand@aws-amplify/adapter-nextjs - create /login page with a button, when clicks, the button calls
signInWithRedirect({ provider: 'Apple' }) - run
npm run dev - visit
http://localhost:3000/loginon iPhone web browser (eg. Safari), or deploy your website to production and visithttps://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
Hi @buildappsmart thanks for reporting this issue and providing detailed triaging information. We will investigate.
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...
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.
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
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.
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.