Ability to customize pop ups when calling signInWithRedirect on iOS

[mkrn]

Describe the bug

1. Using withOAuth HOC and facebookSignIn flow in expo bare / react native shows alert that says "AppName Wants to Use "amazoncognito.com" to Sign In"
   The users may not be familiar with amazoncognito.com and may be confused since they chose to sign in with Facebook, not Amazon.

2. New users need to sign in to facebook even if they're signed in to Facebook App on their iPhone. This lowers conversions since users have to enter email/password that they may not remember.

Is there any way to have permission say "use 'facebook.com'" to sign in?
Is there any way to have new users signed in if they've signed in to the Facebook app on their phone?

I'm using expo bare and already have Facebook SDK Pod, so if there's a native way to achieve Cognito+Facebook sign in please share.

To Reproduce
Steps to reproduce the behavior:

1. Click a button with onPress action this.props.facebookSignIn

Expected behavior

• Alert asking if user would like to sign in with "facebook.com"
• Following screen have user signed in to facebook.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• iPhone 8 plus
• iOS 12.2
• react-native 0.59.5
• aws-amplify 1.1.26
• "aws-amplify-react-native": "2.1.10",

Additional context
Add any other context about the problem here.

Sample code

const urlOpener = async (url, redirectUrl) => {
  const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);

  if (type === 'success') {
    await WebBrowser.dismissBrowser();

    if (Platform.OS === 'ios') {
      return Linking.openURL(newUrl);
    }
  }
};

Amplify.configure({
Auth: {
...
oauth: {
      domain: Config.REACT_APP_COGNITO_DOMAIN,
      scope: ['public_profile', 'email'],
      redirectSignIn: `app://signIn`, 
      redirectSignOut: `app://signOut`,
      responseType: 'code',
      urlOpener,
    }

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[bonillam]

@mkrn do you get the same alert when you logout/signout of your app? I get the same alert “... wants to use Amazoncognito to signin...” both when the user signs in and when the user signs out.

Different problem, but just in case you have not tested the signout flow.

[mkrn]

@bonillam Yes, get the same alert on sign out:
"appName" Wants to Use "amazoncognito.com" to Sign In

[loganwedwards]

@mkrn I do not think the flow you are describing is possible. There's a statement buried in the docs indicating that RN apps must use the hosted Cognito UI (which you can hide), but the initial web browser redirect does go there before Facebook. The popup is an Expo thing indicating an oauth flow via a web redirect is about to happen. https://docs.expo.io/versions/v30.0.0/sdk/auth-session/

One small idea for an improvement would be to associate a custom domain with Cognito in the AWS Console, so at least the user associates the auth flow with an existing app experience.

[mkrn]

Thanks, @loganwedwards
As for custom domain that's a great suggestion!

As for the second part of my issue, I think that even though Expo web browser shares cookies with system browser, not all users are logged in to Facebook in the browser, but most are in the Facebook app.

I will explore integrating Amplify iOS SDK with FB SDK since I already have swift parts as well in the app.

[ameershujjah]

+1 , is there another url opener we can provide to the was config so we can customize the " "appName" Wants to Use "amazoncognito.com" to Sign In " message, which is shown for both sign in and sign out ?

instead of using the default Expo Link opener provided here : https://aws-amplify.github.io/docs/js/authentication#a-note-for-expo-users

[sammartinez]

Closing this issue as it seems it was solved. Please feel free to reopen in need be.

[kaitlynbrown]

The last comment is an open, unanswered question, and the issue is not in any way fixed, and no workaround or solution was offered, so why on earth would you say it is solved?

I'm facing the same problem. When a user tries to sign out on iOS, they get a pop up saying my app wants to use my domain to sign in. A user should never have to give permission just to sign out. How to I circumvent this?

[sammartinez]

Apologizes, I read it as the workaround was able to resolve this. Reopening issue

[phanviet]

https://docs.expo.io/versions/latest/sdk/auth-session/?redirected
Additionally, AuthSession simplifies setting up authorized redirect URLs by using an Expo service that sits between you and your authentication provider (read Security considerations for caveats). This is particularly valuable with Expo because your app can live at various URLs. In development, you can have a tunnel URL, a lan URL, and a localhost URL. The tunnel URL on your machine for the same app will be different from a co-worker's machine. When you publish your app, that will be another URL that you need to whitelist. If you have multiple environments that you publish to, each of those will also need to be whitelisted. AuthSession gets around this by only having you whitelist one URL with your authentication provider: https://auth.expo.io/@your-username/your-app-slug. When authentication is successful, your authentication provider will redirect to that Expo Auth URL, and then the Expo Auth service will redirect back to your appplication. If the URL that the auth service is redirecting back to does not match the published URL for the app or the standalone app scheme (eg: exp://expo.io/@your-username/your-app-slug, or yourscheme://), then it will show a warning page before asking the user to sign in. This means that in development you will see this warning page when you sign in, a small price to pay for the convenience.

@mkrn Does it happen if we config app scheme in production?

[leteach]

I am currently seeing the same issue with logout displaying the "sign-in" system alert. Can we either cache that a user has already provided permission to visit this URL on sign-in (thus making the second alert on sign-out obsolete), change the contents of the message so it does not indicate sign-in, or remove the need for it altogether?

[tombayo86]

Is there any update/workaround regarding this issue?
I'm having the same problem - showing a system alert on login and on logout (" AppName Wants to Use "amazoncognito.com" to Sign In").
This UX is unacceptable and misleading.

[Swaroop-Bhupathiraju]

Having the same problem even with a custom scheme. Compared with some existing user experiences of other apps using federated sign in (Quora for example) and none of them have this experience especially a text describing "'XYZ' wants to use 'ABC' to sign in" on logout. This is so confusing and misleading. Can we please have a workaround at least?

[niclego]

Hello!! Has there been any progress here? Again, I would love for amplify to to say "sign out" in the alert when I call the sign out function.

[jjzazuet]

Just chiming in as well. Our app is also affected by this UX issue. Thanks!

[ahmadfs]

We are using hosted UI and native swift and this is a super annoying and confusing user experience. Is there a workaround to solve this issue?

[niclego]

@ahmadfs We are investigating a custom react ui that acts as a login proxy. Instead of calling amplify from our mobile app, we will open our custom react hosted ui in an inapp browser and call the amplify login function from there and pass the jwt token back to the mobile app via deep linking. Then when we sign out we will delete the jwt from the application.

[ucheNkadiCode]

ephemeralWebSession

This is a good enough workaround, but still not perfect

[sidhantchadda]

It's been more than 3 years since this issue has been opened. It is clearly impacting a lot of amplify customers. Yet we have not heard anything from the amplify team on prioritizing / fixing this issue. Anyone who uses social sign on, one of the most basic app features is affected by this issue. We aren't asking for rocket science we just need to change the super confusing sign in and sign out dialog's.

The Amplify team needs to pause whatever they are doing and focus on fixing the HUGE backlog of issues customers are facing. I don't have many regrets in life, but deciding to use amplify for my app is now one of them.

[ucheNkadiCode]

If it's not too late for you, I'd say move on from Amplify and use React Native Firebase. It has plenty of wonky changes you may have to make to your Podfile, but I implemented oAuth in a night compared to two days with Amplify. Check out all of these comments of users totally frustrated with Amplify. I feel as though this should not be a product if they are going to undeserve customers in this manner.

[tannerabread]

@sidhantchadda @AlexChaseJones is the consensus here that we want to suppress this message or change what it displays?

[sidhantchadda]

Ideally suppress, if that is not possible, we can change what it displays, to include ex: '"appname" wants to use facebook to sign in'.

[tannerabread]

thank you for the quick response, we are trying to prioritize this and wanted to make sure on the desired behavior before we address it

[dgrosch02]

Is there any update if this message can be suppressed? @tannerabread

[abdallahshaban557]

Hi @dgrosch02 - unfortunately, that is not currently possible. We are working with the Amazon Cognito team to allow you to pass an Authentication token to authorize access from social providers rather than using the hostedUI, which would provide you with much better control over your end user experience. We will provide updates here when we have an ETA!

[dgrosch02]

If anybody is using expo-web-browser to do the url redirects for the auth config, you can add additional options to stop the pop up. For me:
const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(
url,
redirectUrl,
{
preferEphemeralSession: true
}
);
Suppresed the popup before taking the user to google/facebook sign in.

[Glognus]

Hi, any update about this issue ?

[ilyatsykunov]

With expo-web-browser I just did:

const urlOpenerExpo = async (url, redirectUrl) => {
  if (url.includes('logout'))  return null;

Because using preferEphemeralSession: true disables caching, so you have to type in your SSO email and password.

[Glognus]

Unfortunately preferEphemeralSession: true is just a workaround, it's definitely not UX friendly to have to retype your external provider email and password every time you log in. Compared to other "sign in" solutions with Firebase or Azure

[RussMax783]

Seems like even after a major update from amplify to v6 (currently 6.0.5), this still hasn't been resolved. Instead it seems like all amplify has done is build in the preferEphemeralSession hack so you can do:

await signInWithRedirect({
  provider: 'Google',
  options: {preferPrivateSession: true},
});

which like everyone else mentioned, is still such a bad UX! 😫 personally when I go to sign in with google and i have to type my password I'm immediately frustrated and most the time just use user/pass. Honestly defeats the purpose of oauth.
I'm building for a client and already spent hours setting up auth on the web, and now auth on react native only to be stuck with this silly issue! I'm trying not to be frustrated but i'm at a loss here.

Is there any update on this, like an honest update?

Almost 4 years old 😭😭😭😭😭😭

(shoulda stuck with firebase....)

[RussMax783]

I guess for now i'll just hack the signout so that it doesn't show that alert when calling signOut that says the app wants to redirect to website to sign in.

async function removeCognitoKeys() {
  const keys = await AsyncStorage.getAllKeys();
  const idTokenKey = keys.find((key: string) =>
    key.match(/@MemoryStorage:CognitoIdentityServiceProvider.*idToken/),
  );
  const accessTokenKey = keys.find((key: string) =>
    key.match(/@MemoryStorage:CognitoIdentityServiceProvider.*accessToken/),
  );
  const refreshTokenKey = keys.find((key: string) =>
    key.match(/@MemoryStorage:CognitoIdentityServiceProvider.*refreshToken/),
  );
  await AsyncStorage.multiRemove(
    [idTokenKey, accessTokenKey, refreshTokenKey].filter(Boolean),
  );
}

[ervibern]

I use preferEphemeralSession: true with Federated Google Sign-in, which is non-ideal UX but a workaround for the annoying "Appname" wants to use "amazoncognito.com" to Sign-in popup.

However, I still get Sign in to continue to "...auth.eu-north-1.amazoncognito.com" browser window (see image). It looks very fishy for the non-technical end-user. Is there a way to either customize or avoid the message?

[flodaniel]

Hi @dgrosch02 - unfortunately, that is not currently possible. We are working with the Amazon Cognito team to allow you to pass an Authentication token to authorize access from social providers rather than using the hostedUI, which would provide you with much better control over your end user experience. We will provide updates here when we have an ETA!

@abdallahshaban557 any update on the timeline? half a year seems already pretty long. It would be awesome to finally be able to use the same pattern as with federated sign in, when using cognito user pools.

[banghia112]

Explicitly calling clearTokens() and clearDeviceMetadata() from cognitoUserPoolsToken seems to do the trick. No need to call signout() from Amplify Auth

import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';

logout: async () => {
    try {
      await cognitoUserPoolsTokenProvider.authTokenStore.clearTokens()
      await cognitoUserPoolsTokenProvider.authTokenStore.clearDeviceMetadata()
      await cognitoUserPoolsTokenProvider.tokenOrchestrator.clearDeviceMetadata()
      await cognitoUserPoolsTokenProvider.tokenOrchestrator.clearTokens()
    } catch (error) {
      console.log('amplifyService ====> ', error);
    }
}

[illlama]

@banghia112 The code provided doesn't actually terminate the session with the OAuth provider, so when logging in again, the account selection screen might not appear as expected. This is because ending the session with the OAuth provider, thus prompting the account choice upon the next login, requires a logout from the OAuth provider's side. Have you found a way to end the session with the OAuth provider?

[flutterocks]

any update? sept 2024...

[fr60]

Waiting for updates Oct 2024