Restore urlOpener / auth-browser customization for signInWithRedirect on React Native (v6)
Is this related to a new or existing framework?
React Native
Is this related to a new or existing API?
Authentication
Is this related to another service?
Amazon Cognito (Hosted UI / Managed Login)
Describe the feature you'd like to request
On React Native, signInWithRedirect() (Amplify v6) opens the Cognito Hosted UI
inside a system auth session — ASWebAuthenticationSession on iOS and Custom Tabs
on Android — via @aws-amplify/rtn-web-browser. There is no supported way to
customize how that browser is opened or presented.
In Amplify v5 the Auth OAuth config accepted a urlOpener option, which gave
apps control over the browser step. That hook was removed for React Native in v6,
so this customization is no longer possible.
Concrete problem this blocks: The Cognito Hosted UI renders its form inputs with a font-size below 16px. On iOS, Safari/WebKit auto-zooms the viewport whenever a focused input's font-size is < 16px (see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/). The result is a jarring zoom-in every time the user taps the email/password field on the Hosted UI, and there is currently no way for developers to fix it:
- We can't inject CSS / a
<meta viewport maximum-scale=1>intoASWebAuthenticationSession— it's a system-provided browser, not a WebView we own. - Cognito classic Hosted UI CSS customization does not allow
font-sizeoninputField-customizable(only width/height/color/background-color/border). - Cognito Managed Login branding has no
fontSizefield anywhere in its settings schema (theinputclass exposes only borderRadius / backgroundColor / borderColor / placeholderColor). - v6 removed the
urlOpenerhook, so we can't route the OAuth flow through a browser we control either.
So the app is left with no supported path to prevent the iOS auto-zoom on the Hosted UI sign-in form.
Describe the solution you'd like
Restore a supported browser-customization hook for signInWithRedirect() on React
Native — e.g. bring back a urlOpener (or equivalent) option so apps can control
how the Cognito Hosted UI is opened and, if needed, present it in a WebView they own
where standard workarounds (injected CSS / viewport meta) are possible.
Describe alternatives you've considered
- Cognito classic Hosted UI CSS customization —
font-sizeis not an allowed property oninputField-customizable, so it's stripped. - Cognito Managed Login branding editor / API — no font-size control exists in the branding settings schema.
- App-side viewport/CSS injection — impossible against
ASWebAuthenticationSession. - Building a fully custom sign-in screen with the non-hosted Amplify APIs
(
signIn,confirmSignIn, etc.) — works, but requires abandoning the Hosted UI and re-implementing every flow, which is a large workaround for a presentation bug.
Additional context
- iOS auto-zoom threshold: input font-size < 16px triggers a viewport zoom on focus.
- Related: #3410 (Ability to customize pop ups when calling signInWithRedirect on iOS).
- Environment: aws-amplify ^6.16.4, @aws-amplify/react-native ^1.3.3, @aws-amplify/rtn-web-browser ^1.4.0, Expo, iOS.
Source: aws-amplify/amplify-js