React-native: On iOS signInWithRedirect workflow with Apple opens an unnecessary blank webview under the native ApplD bottomsheet modal

mretiinteractivebrokers commented 1 month 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

React Native

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Amplify CLI

Environment information

``` # Put output below this line System: OS: macOS 14.5 CPU: (8) arm64 Apple M3 Memory: 74.30 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.7.0 - /usr/local/bin/node npm: 8.15.0 - /usr/local/bin/npm Browsers: Chrome: 127.0.6533.74 Safari: 17.5 npmPackages: @aws-amplify/react-native: ^1.0.28 => 1.1.4 @aws-amplify/rtn-web-browser: ^1.0.31 => 1.0.31 @aws-amplify/ui-react-native: ^2.1.4 => 2.2.3 @babel/core: ^7.20.0 => 7.24.4 @expo/vector-icons: ^14.0.0 => 14.0.0 @gorhom/bottom-sheet: ^4.6.1 => 4.6.1 @react-native-async-storage/async-storage: ^1.23.1 => 1.23.1 @react-native-community/checkbox: ^0.5.17 => 0.5.17 @react-native-community/netinfo: ^11.3.1 => 11.3.1 @react-navigation/bottom-tabs: ^6.5.20 => 6.5.20 @react-navigation/native: ^6.1.17 => 6.1.17 @react-navigation/stack: ^6.3.29 => 6.3.29 HelloWorld: 0.0.1 aws-amplify: ^6.0.27 => 6.4.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 () axios: ^1.6.8 => 1.6.8 babel-plugin-module-resolver: ^5.0.1 => 5.0.2 babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4 eslint: ^8.57.0 => 8.57.0 expo: ~50.0.14 => 50.0.17 expo-build-properties: ~0.11.1 => 0.11.1 expo-localization: ^14.8.4 => 14.8.4 expo-navigation-bar: ^2.8.1 => 2.8.1 expo-splash-screen: ~0.26.5 => 0.26.5 expo-status-bar: ~1.11.1 => 1.11.1 i18next: ^23.11.2 => 23.11.3 intl-pluralrules: ^2.0.1 => 2.0.1 lodash: ^4.17.21 => 4.17.21 prettier: ^3.2.5 => 3.2.5 prettier-eslint: ^16.3.0 => 16.3.0 react: 18.2.0 => 18.2.0 react-hook-form: ^7.51.4 => 7.51.4 react-i18next: ^14.1.0 => 14.1.1 react-native: 0.73.6 => 0.73.6 react-native-animated-spinkit: ^1.5.2 => 1.5.2 react-native-awesome-alerts: ^2.0.0 => 2.0.0 react-native-awesome-slider: ^2.5.2 => 2.5.2 react-native-circular-progress-indicator: ^4.4.2 => 4.4.2 react-native-collapsible: ^1.6.1 => 1.6.1 react-native-confirmation-code-field: ^7.4.0 => 7.4.0 react-native-dashed-line: ^1.1.0 => 1.1.0 react-native-dotenv: ^3.4.11 => 3.4.11 react-native-draggable-flatlist: ^4.0.1 => 4.0.1 react-native-element-dropdown: ^2.12.0 => 2.12.0 react-native-flip-card: ^3.5.7 => 3.5.7 react-native-gesture-handler: ~2.14.0 => 2.14.1 react-native-get-random-values: ^1.11.0 => 1.11.0 react-native-ionicons: ^4.6.5 => 4.6.5 react-native-linear-gradient: ^2.8.3 => 2.8.3 react-native-loading-spinner-overlay: ^3.0.1 => 3.0.1 react-native-localization: ^2.3.2 => 2.3.2 react-native-markdown-display: ^7.0.2 => 7.0.2 react-native-progress: ^5.0.1 => 5.0.1 react-native-pulse: ^1.0.7 => 1.0.7 react-native-reanimated: ~3.6.2 => 3.6.3 react-native-safe-area-context: 4.8.2 => 4.8.2 react-native-scalable-image: ^1.1.0 => 1.1.0 react-native-screens: ~3.29.0 => 3.29.0 react-native-svg: 14.1.0 => 14.1.0 react-native-swiper: ^1.6.0 => 1.6.0 react-native-user-avatar: ^1.0.8 => 1.0.8 npmGlobalPackages: eas-cli: 9.0.6 ```

Describe the bug

Calling Auth.signInWithRedirect with Apple provider in a react-native app, first opens a blank webview (trying to open the cognito hosted ui, then redirects to appleid.apple.com), and only after that the apple sign in bottom sheet is shown.

Is there a way to hide this webwiew, or not open at all?

Expected behavior

When singing in with Apple, only the native bottom sheet should be shown without the blank webview.

Reproduction steps

Configured Amazon Cognito, and Apple connect to enable Apple sign in workflow
Within the react native application, called the signInWithRedirect the following way: await signInWithRedirect({ provider: 'Apple', options: { preferPrivateSession: true }, });

Code Snippet

// Put your code below this line.
await signInWithRedirect({
  provider: 'Apple',
  options: { preferPrivateSession: true },
});

Log output

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

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

iPhone 15 Pro

Mobile Operating System

iOS17.6

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

https://github.com/user-attachments/assets/b55487a6-b2eb-446b-9d56-bf6f22c88e2f

cwomack commented 1 month ago

Hello, @mretiinteractivebrokers 👋. I believe what you're describing is default behavior for the signInWithRedirect API that displays a sign-in UI that is inside a platform-dependent webview. It will open up an ASWebAuthenticationSession or Custom Tab on iOS devices or Android respectively.

I don't believe there's a way to disable this intermediate webview, as it's part of the federated Auth flow between Apple and Cognito's Hosted UI. Let me know if this helps, and I'll review this internally with our team to make sure there's no workarounds or optimizations that I'm missing.

mretiinteractivebrokers commented 1 month ago

Hi @cwomack! Thank you for the quick answer! In case there is no workaround then the issue can be closed, if it is the intended behavior.

cwomack commented 1 month ago

Appreciate the follow up, @mretiinteractivebrokers. I'll close the issue then for now, but feel free to open a new issue if you hit any other questions, feedback, or blockers when using Amplify!

aws-amplify / amplify-js