[Auth] [React Native] Social sign out opens an oAuth consent screen

[jvgeee]

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

React Native

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line

  System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 95.34 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
    Watchman: 2023.04.03.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 112.0.5615.49
    Safari: 16.4
  npmPackages:
    @babel/core: ^7.20.0 => 7.21.3 (7.21.4)
    @babel/plugin-proposal-decorators: 7.20. => 7.21.0
    @babel/plugin-proposal-optional-catch-binding: 7.16.7 => 7.16.7 (7.18.6)
    @babel/preset-env: ^7.20.0 => 7.20.2
    @babel/runtime: ^7.20.0 => 7.21.0
    @expo-google-fonts/space-grotesk: ^0.2.2 => 0.2.3
    @expo/webpack-config: ^18.0.1 => 18.0.2
    @react-native-async-storage/async-storage: ~1.17.3 => 1.17.12
    @react-native-community/cli-platform-ios: ^8.0.2 => 8.0.6 (10.2.1, 10.2.0)
    @react-native-community/eslint-config: ^3.2.0 => 3.2.0
    @react-native-community/netinfo: ^9.3.7 => 9.3.7
    @react-native-firebase/analytics: ^17.3.1 => 17.4.0
    @react-native-firebase/app: ^17.3.1 => 17.4.0
    @react-navigation/bottom-tabs: ^6.3.2 => 6.5.7
    @react-navigation/native: ~6.0.1 => 6.0.16
    @react-navigation/native-stack: ^6.0.2 => 6.9.12
    @react-navigation/stack: ~6.2.1 => 6.2.3
    @sentry/react-native: ^5.2.0 => 5.2.0
    @tsconfig/react-native: ^2.0.2 => 2.0.3
    @types/i18n-js: 3.8.2 => 3.8.2
    @types/jest: ^29.2.1 => 29.5.0
    @types/react: ^18.0.24 => 18.0.31 (17.0.55)
    @types/react-native: 0.67.8 => 0.67.8
    @types/react-test-renderer: ^18.0.0 => 18.0.0
    @typescript-eslint/eslint-plugin: 5.28.0 => 5.28.0 (5.57.0)
    @typescript-eslint/parser: 5.28.0 => 5.28.0 (5.57.0)
    ContextAPIMixpanel:  0.0.1
    HelloWorld:  0.0.1
    MixpanelDemo:  0.0.1
    SimpleMixpanel:  0.0.1
    TypingIndicatorExample:  0.0.1
    amazon-cognito-identity-js: ^6.1.2 => 6.2.0
    apisauce: 2.1.5 => 2.1.5
    appcenter: 4.4.5 => 4.4.5
    appcenter-analytics: 4.4.5 => 4.4.5
    appcenter-crashes: 4.4.5 => 4.4.5
    aws-amplify: ^5.0.16 => 5.0.22
    aws-amplify-react-native: ^7.0.2 => 7.0.2
    aws-api-gateway-client: ^0.3.7 => 0.3.7
    aws-sdk: ^2.1328.0 => 2.1345.0
    axios: ^1.3.4 => 1.3.4 (0.26.0, 0.21.4, 0.19.0-beta.1)
    babel-jest: ^29.2.1 => 29.5.0 (26.6.3)
    babel-loader: 8.2.5 => 8.2.5 (8.3.0)
    date-fns: ^2.29.2 => 2.29.3
    detox: 19.12.1 => 19.12.1
    detox-expo-helpers: 0.6.0 => 0.6.0
    eslint: ^8.19.0 => 8.37.0
    eslint-config-prettier: 8.5.0 => 8.5.0 (8.8.0)
    eslint-config-standard: 17.0.0 => 17.0.0
    eslint-plugin-import: 2.26.0 => 2.26.0
    eslint-plugin-n: ^15.0.0 => 15.6.1
    eslint-plugin-node: 11.1.0 => 11.1.0
    eslint-plugin-promise: 6.0.0 => 6.0.0
    eslint-plugin-react: 7.30.0 => 7.30.0 (7.32.2)
    eslint-plugin-react-native: 4.0.0 => 4.0.0
    expo: ^48.0.0 => 48.0.9
    expo-application: ~5.1.1 => 5.1.1
    expo-av: ^13.2.1 => 13.2.1
    expo-constants: ~14.2.1 => 14.2.1
    expo-detox-hook: 1.0.10 => 1.0.10
    expo-device: ~5.2.1 => 5.2.1
    expo-file-system: ~15.2.2 => 15.2.2
    expo-font: ~11.1.1 => 11.1.1
    expo-linear-gradient: ~12.1.2 => 12.1.2
    expo-linking: ~4.0.1 => 4.0.1
    expo-localization: ~14.1.1 => 14.1.1
    expo-modules-autolinking: ~1.1.0 => 1.1.2
    expo-modules-core: ~1.2.6 => 1.2.6
    expo-notifications: ^0.18.1 => 0.18.1
    expo-permissions: ^14.1.1 => 14.1.1
    expo-splash-screen: ~0.18.1 => 0.18.1
    expo-status-bar: ~1.4.2 => 1.4.4
    expo-web-browser: ~12.1.1 => 12.1.1
    fbjs-scripts: 3.0.1 => 3.0.1
    firebase: ^9.17.1 => 9.18.0
    firebase/analytics:  undefined ()
    firebase/app:  undefined ()
    firebase/app-check:  undefined ()
    firebase/auth:  undefined ()
    firebase/auth/cordova:  undefined ()
    firebase/auth/react-native:  undefined ()
    firebase/compat:  undefined ()
    firebase/compat/analytics:  undefined ()
    firebase/compat/app:  undefined ()
    firebase/compat/app-check:  undefined ()
    firebase/compat/auth:  undefined ()
    firebase/compat/database:  undefined ()
    firebase/compat/firestore:  undefined ()
    firebase/compat/functions:  undefined ()
    firebase/compat/installations:  undefined ()
    firebase/compat/messaging:  undefined ()
    firebase/compat/performance:  undefined ()
    firebase/compat/remote-config:  undefined ()
    firebase/compat/storage:  undefined ()
    firebase/database:  undefined ()
    firebase/firestore:  undefined ()
    firebase/firestore/lite:  undefined ()
    firebase/functions:  undefined ()
    firebase/installations:  undefined ()
    firebase/messaging:  undefined ()
    firebase/messaging/sw:  undefined ()
    firebase/performance:  undefined ()
    firebase/remote-config:  undefined ()
    firebase/storage:  undefined ()
    i18n-js: 3.9.2 => 3.9.2
    jest: ^29.2.1 => 29.5.0
    jest-circus: 26 => 26.6.3 (29.5.0)
    jest-environment-node: 26 => 26.6.2 (29.5.0)
    jest-expo: ^47.0.0 => 47.0.1
    lodash: ^4.17.21 => 4.17.21
    metro-react-native-babel-preset: 0.73.0 => 0.73.0 (0.73.9, 0.73.8)
    mixpanel-react-native: ^2.2.1 => 2.2.1
    mobx: 6.6.0 => 6.6.0
    mobx-react-lite: 3.4.0 => 3.4.0
    mobx-state-tree: 5.1.5 => 5.1.5
    mocha: 6 => 6.2.3
    patch-package: 6.4.7 => 6.4.7
    postinstall-prepare: 1.0.1 => 1.0.1
    prettier: 2.6.2 => 2.6.2
    query-string: ^8.1.0 => 8.1.0 (7.1.3, 5.1.1, 6.10.1)
    react: 18.2.0 => 18.2.0 (16.14.0)
    react-devtools-core: 4.24.7 => 4.24.7 (4.27.4)
    react-dom: 18.2.0 => 18.2.0
    react-hook-form: ^7.43.2 => 7.43.8
    react-native: 0.71.4 => 0.71.4
    react-native-canvas: ^0.1.38 => 0.1.38
    react-native-code-push: ^8.0.0 => 8.0.0
    react-native-config: ^1.5.0 => 1.5.0
    react-native-gesture-handler: ~2.9.0 => 2.9.0
    react-native-get-random-values: ^1.8.0 => 1.8.0
    react-native-gifted-chat: ^2.0.1 => 2.0.1
    react-native-keyboard-aware-scroll-view: ^0.9.5 => 0.9.5
    react-native-keychain: ^8.1.1 => 8.1.1
    react-native-reanimated: ~2.14.4 => 2.14.4
    react-native-reanimated-carousel: ^3.3.0 => 3.3.0
    react-native-redash: 14.0.4 => 14.0.4
    react-native-render-html: ^6.3.4 => 6.3.4
    react-native-safe-area-context: 4.5.0 => 4.5.0
    react-native-screens: ~3.20.0 => 3.20.0
    react-native-svg: ^13.9.0 => 13.9.0
    react-native-svg-transformer: ^1.0.0 => 1.0.0
    react-native-typing-animation: ^0.1.7 => 0.1.7
    react-native-web: ^0.18.7 => 0.18.12
    react-native-webview: 11.26.0 => 11.26.0
    reactotron-core-client: ^2.8.10 => 2.8.10 (2.8.9)
    reactotron-mst: 3.1.4 => 3.1.4
    reactotron-react-js: ^3.3.7 => 3.3.8
    reactotron-react-native: 5.0.3 => 5.0.3
    regenerator-runtime: ^0.13.4 => 0.13.11 (0.11.1)
    ts-jest: 26 => 26.5.6
    typescript: ^4.9.4 => 4.9.5
    webpack: 4 => 4.46.0 (5.76.3)
    webpack-dev-server: ^3 => 3.11.3 (4.13.1)
  npmGlobalPackages:
    @aws-amplify/cli: 10.8.1
    appcenter-cli: 2.13.3
    aws-sdk: 2.1334.0
    corepack: 0.15.1
    expo-cli: 6.3.2
    npm: 8.19.3
    serverless: 3.28.1

Describe the bug

When a user is signed up/signed in via social sign in (testing with Google), and then I hit Auth.signOut(), Amplify tries to open an oAuth consent screen, which displays nothing and just flashes up for a second then redirects back to the app.

I've tried to use Auth.signOut({global: true}) and have also tried removing some of the oAuth configuration from my aws-exports config file (as suggested on some of the other SDK github issues) but nothing works.

This is potentially related to this issue: #4993

Expected behavior

User should hit "sign out" in app, and the app should kick them back to an un-authed state without any jarring system popups.

Reproduction steps

1. Authenticate via social sign in
2. Hit await Auth.signOut()
3. Note that a system message saying [your app] wants to use "amazoncognito.com" to sign in. Note that the user is signing out here so this is a confusing message.

Code Snippet

Code comes almost directly from the React Native Amplify Auth docs

// Amplify Setup

const isLocalHost = Boolean(__DEV__)

const [localRedirectSignIn, productionRedirectSignIn] =
  Config.AWS_CONFIG.oauth.redirectSignIn.split(",")

const [localRedirectSignOut, productionRedirectSignOut] =
  Config.AWS_CONFIG.oauth.redirectSignOut.split(",")

async function urlOpener(url, redirectUrl) {
  console.log("In urlOpener")
  // @ts-ignore
  const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl)

  if (type === "success" && Platform.OS === "ios") {
    WebBrowser.dismissBrowser()
    return Linking.openURL(newUrl)
  }
  return null
}

const updatedConfig = {
  ...Config.AWS_CONFIG,
  oauth: {
    ...Config.AWS_CONFIG.oauth,
    redirectSignIn: isLocalHost ? localRedirectSignIn : productionRedirectSignIn,
    redirectSignOut: isLocalHost ? localRedirectSignOut : productionRedirectSignOut,
    urlOpener,
  },
}

Amplify.configure(updatedConfig)
Auth.configure(updatedConfig)

// Auth watcher

export function useAuthWatcher() {
  const { user } = useStores()
  const [authReady, setAuthReady] = useState(false)
  const [localUser, setLocalUser] = useState<any>(null)

  /* Listen to the authentication process */
  useEffect(() => {
    const unsubscribe = Hub.listen("auth", ({ payload: { event, data } }) => {
      console.log("Got an event", { event })
      switch (event) {
        case "signIn":
        case "signUp":
          setLocalUser(data)
          break
        case "signOut":
          setLocalUser(null)
          setAuthReady(true)
          break
        case "parsingCallbackUrl":
          console.log({ data })
      }
    })

    Auth.currentAuthenticatedUser()
      .then((currentUser) => setLocalUser(currentUser))
      .catch(() => {
        // If not signed in on first load, reset to base params
        console.log("Not signed in")
        user.authSignOut()
        setAuthReady(true)
      })

    return unsubscribe
  }, [])


  useEffect(() => {
    ;(async () => {
      if (localUser) {
        console.log("localUser", JSON.stringify(localUser))
        let dataToUpdate

        const attributes = localUser.attributes
        const idPayload = localUser?.signInUserSession?.idToken?.payload

        const { email, email_verified: emailVerified } = attributes || idPayload || {}

        // If no email from Cognito, do nothing
        if (email) {
          if (!emailVerified) {
            dataToUpdate = {
              email,
              status: "DRAFT",
            }

            user.saveProfile(dataToUpdate)
          } else {
            let currentUser
            try {
              // Get current user from the API
              currentUser = await user.getCurrentUser()
            } catch (e) {
              console.log("Unable to get current user", e)
            }

            if (!currentUser) {
              dataToUpdate = {
                email,
                status: "INCOMPLETE",
              }

              await user.createUser(dataToUpdate)
            }
          }
        }
      }
      setAuthReady(true)
    })()
  }, [localUser])

  return { authReady }
}

// Sign up function

 async authSocialSignIn(type) {
      const provider =
        type === SOCIAL_SIGN_IN_PROVIDERS.APPLE
          ? CognitoHostedUIIdentityProvider.Apple
          : type === SOCIAL_SIGN_IN_PROVIDERS.FACEBOOK
          ? CognitoHostedUIIdentityProvider.Facebook
          : CognitoHostedUIIdentityProvider.Google

      try {
        console.log("In authSocialSignIn")
        return Auth.federatedSignIn({
          provider,
        })
      } catch (e) {
        console.log("Sign In Error", e)
        return { error: e }
      }
    }

// Sign out method
async authSignOut() {
      await Auth.signOut({ global: true })
      analytics.event(ANALYTICS_EVENTS.USER_LOGOUT)
      self.setProp("profile", profileModel.create())
    },

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

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

[tannerabread]

Hi @jvgeee
We are aware of this confusing consent screen, currently it is a limitation from using Hosted UI and is being tracked in #3410

There is a potential workaround in the comments. I have not yet tried it myself but it seems to have resolved the issue for a few people.

I will close this issue so that we can consolidate our efforts but I would encourage you to thumbs up that issue so that we can better prioritize it. Also leave any additional comments there if you have more information for the thread.

If this wasn't the same issue please comment here and I will re-open this issue to assist you further.

Thank you!

[jvgeee]

Hi @tannerabread , I'm not using hosted UI (at least, I don't think I am? I have my own email/password screen with buttons for social sign up in-app and I just call the appropriate auth methods).

If Amplify potentially thinks I'm using hosted UI is there a way to make sure it's disabled?

[jvgeee]

@tannerabread any thoughts on this mate?

[tannerabread]

@jvgeee sorry it does bypass the Hosted UI visually, but it still hits the Cognito Authentication Server for both the signIn and signOut which will end up showing that message.

From my understanding passing in the provider only bypasses the visual side of Hosted UI and still uses it to get to the provider's login page. I also don't believe there is currently a different way to use the social providers through Amplify.

I will discuss this with the team this week to verify my understanding is correct and get back to you. In the meantime, were you able to try the workaround I had posted and see if that solved the issue?