search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.4k stars 2.11k forks source link

Auth.federatedSignIn is not executing promise properly #9016

Closed MuhammadAbdullah54321 closed 2 years ago

MuhammadAbdullah54321 commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line ```

System: OS: macOS 11.5.1 CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz Memory: 86.87 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.8.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.21.0 - /usr/local/bin/npm Watchman: 2021.08.30.00 - /usr/local/bin/watchman Browsers: Chrome: 94.0.4606.71 Safari: 14.1.2 npmPackages: @aws-amplify/cli: ^4.44.0 => 4.44.0 @babel/core: ^7.12.17 => 7.12.17 @babel/runtime: ^7.12.18 => 7.12.18 @callstack/reanimated-arc: ^0.1.0-alpha.3 => 0.1.0-alpha.3 @ptomasroos/react-native-multi-slider: ^2.2.2 => 2.2.2 @react-native-async-storage/async-storage: ^1.15.9 => 1.15.9 @react-native-community/async-storage: ^1.12.1 => 1.12.1 @react-native-community/blur: ^3.6.0 => 3.6.0 @react-native-community/eslint-config: ^2.0.0 => 2.0.0 @react-native-community/masked-view: ^0.1.10 => 0.1.10 @react-native-community/netinfo: ^6.0.2 => 6.0.2 @react-native-google-signin/google-signin: ^7.0.1 => 7.0.1 @react-native-picker/picker: ^1.16.1 => 1.16.1 @react-navigation/bottom-tabs: ^5.11.8 => 5.11.8 @react-navigation/material-top-tabs: ^5.3.14 => 5.3.14 @react-navigation/native: ^5.9.2 => 5.9.2 @react-navigation/stack: ^5.14.2 => 5.14.2 @ui-kitten/components: ^5.0.0 => 5.0.0 HelloWorld: 0.0.1 amazon-cognito-identity-js: ^5.2.0 => 5.2.0 aws-amplify: ^4.3.2 => 4.3.2 babel-jest: ^26.6.3 => 26.6.3 create-react-class: ^15.7.0 => 15.7.0 eslint: ^7.20.0 => 7.20.0 hermes-inspector-msggen: 1.0.0 jest: ^26.6.3 => 26.6.3 lodash: ^4.17.21 => 4.17.21 (4.17.20, 4.17.15) metro-react-native-babel-preset: ^0.65.1 => 0.65.1 (0.59.0) new-plugin-package: 1.0.0 react: 16.13.1 => 16.13.1 react-animated: 0.1.0 react-circular-progressbar: ^2.0.4 => 2.0.4 react-native: 0.63.4 => 0.63.4 react-native-camera: ^3.43.0 => 3.43.0 react-native-card-flip: ^1.0.7 => 1.0.7 react-native-confirmation-code-field: ^6.5.1 => 6.5.1 react-native-elements: ^3.3.1 => 3.3.1 react-native-fast-image: ^8.3.4 => 8.3.4 react-native-fs: ^2.18.0 => 2.18.0 react-native-gesture-handler: ^1.10.3 => 1.10.3 react-native-haptic-feedback: ^1.11.0 => 1.11.0 react-native-image-picker: ^4.0.6 => 4.0.6 react-native-image-resizer: ^1.4.5 => 1.4.5 react-native-inappbrowser-reborn: ^3.6.3 => 3.6.3 react-native-linear-gradient: ^2.5.6 => 2.5.6 react-native-modal: ^11.7.0 => 11.7.0 react-native-modalize: ^2.0.8 => 2.0.8 react-native-pager-view: ^5.1.2 => 5.1.2 react-native-paper: ^4.7.1 => 4.7.1 react-native-progress-circle: ^2.1.0 => 2.1.0 react-native-ratings: ^8.1.0 => 8.1.0 (7.4.0) react-native-raw-bottom-sheet: ^2.2.0 => 2.2.0 react-native-reanimated: ^2.2.0 => 2.2.0 react-native-root-siblings: ^4.1.0 => 4.1.0 react-native-safe-area-context: ^3.1.9 => 3.1.9 react-native-screens: ^2.18.0 => 2.18.0 react-native-skeleton-placeholder: ^4.0.0 => 4.0.0 react-native-splash-screen: ^3.2.0 => 3.2.0 react-native-star-rating: ^1.1.0 => 1.1.0 react-native-status-bar-height: ^2.6.0 => 2.6.0 react-native-svg: ^12.1.1 => 12.1.1 react-native-swipe-gestures: ^1.0.5 => 1.0.5 react-native-swipe-list-view: ^3.2.7 => 3.2.7 react-native-swiper: ^1.6.0 => 1.6.0 react-native-tab-view: 2.16.0 => 2.16.0 react-native-uuid: ^2.0.1 => 2.0.1 react-native-vector-icons: ^8.1.0 => 8.1.0 (4.6.0) react-redux: ^7.2.2 => 7.2.2 react-test-renderer: 16.13.1 => 16.13.1 redux: ^4.0.5 => 4.0.5 redux-persist: ^6.0.0 => 6.0.0 redux-persist/integration/react: undefined () redux-saga: ^1.1.3 => 1.1.3 redux-saga/effects: undefined () rn-range-slider: ^2.0.4 => 2.0.4 uuid: ^8.3.2 => 8.3.2 (3.4.0, 3.3.2) zustand: ^3.5.2 => 3.5.2 npmGlobalPackages: @aws-amplify/cli: 5.6.0 npm: 7.21.0 react-native-cli: 2.0.1 typescript: 4.2.4 yarn: 1.22.10

Describe the bug

Auth.federatedSignIn() with google is returning promise before execution properly

I am running this simple code on the press of the button Auth.federatedSignIn({ provider: "Google" }).then((cred) => { console.log("these are creds", cred) })

console.log("these are creds", cred) is getting printed before even i take any action on browser window.

Expected behavior

I am expecting the then function to run after i have selected my account from browser window for authorization. so that i can get cred after signIn

Reproduction steps

Set up fedreated signup and then try to run this fucntion in React Native

Code Snippet

// Put your code below this line.

Auth.federatedSignIn({ provider: "Google" }).then((cred) => {
      console.log("these are creds", cred)
   })

//here is my config file code 


async function urlOpener(url, redirectUrl) {
    await InAppBrowser.isAvailable();
    const { type, url: newUrl } = await InAppBrowser.openAuth(
        url,
        redirectUrl,
        {
            showTitle: false,
            enableUrlBarHiding: true,
            enableDefaultShare: true,
            ephemeralWebSession: false,
        }
    );

    if (type === 'success') {
        Linking.openURL(newUrl);
    }
}

Amplify.configure({
    ...config,
    oauth: {
        ...config.oauth,
        urlOpener,
    },
    Analytics: {
        disabled: 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 11

Mobile Operating System

iOS 14.4

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

chrisbonifacio commented 2 years ago

Hello @MuhammadAbdullah54321 👋 thank you for raising this issue. I was able to reproduce it but I don't think this is a bug. If your intention is to be able to set a user's credentials to some local state, I would not rely on the response from Auth.federatedSignIn. For instance, in a browser, calling Auth.federatedSign triggers a series of redirects that, once redirected from the original page, any state or reference to the original function call is lost and therefore it is not reliable or recommended to try to capture the response from the call. We could try to change the implementation for React Native but it would be a breaking change for a use case that is already met.

Instead you can use the Hub listener utility to call Auth.currentAuthenticatedUser or get any other credentials you need as a response to the auth event of signing in, whether it be through OAuth (cognitoHostedUI) or the normal auth (signIn) flow. You can see that this is actually how the withOAuth HOC works from our aws-amplify-react-native package.

So, the result would look similar to this:

function listener(capsule) {
  const {channel, payload} = capsule;

  if (channel === 'auth') {
    switch (payload.event) {
      case 'signIn':
      case 'cognitoHostedUI': {
        Auth.currentAuthenticatedUser().then(user => {
          setState({
            user,
            error: null,
            loading: false,
          });
        });
        break;
      }
      case 'signOut': {
        setState({
          user: null,
          error: null,
          loading: false,
        });
        break;
      }
      default:
        break;
    }
  }
}

Hub.listen('auth', listener);

// if you need to remove the listener
Hub.remove('auth', listener);
MuhammadAbdullah54321 commented 2 years ago

Thanks for responding. This method solved my problem. Its just a little bit slow after redirecting in mobile (React Native)

github-actions[bot] commented 1 year ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.