react-native-fbsdk and AWS Amplify token refresh

Describe the bug I am building a mobile app with React Native, react-native-fbsdk and aws-amplify. I was able to successfully login with email and facebook using Cognito. Now the issue that I’m having is this:

After a while, I get “Access Denied” when I try to make API requests. This only happens with a facebook authed user in my system. It appears the facebook token is not getting refreshed, even though the expire date is set for a few months from now. Maybe this is an issue with Cognito not refreshing the federated credentials?

Anyone got any tips for making the token refresh?

Sidenote: I am also making a companion web app (in React), and that allows facebook auth as well. However, to make the webapp work, I had to wrap my whole app in some HOCs:

import FacebookProvider, { InitFacebook } from 'react-facebook-sdk';

function App(props) {
  return(
    <FacebookProvider appId='my-actual-app-id'>
      <InitFacebook onReady={() => {}}>
        <Router />
      </InitFacebook>
    </FacebookProvider>
  );
}

I’m wondering if there’s some react-native equivalent that I’m missing…

To Reproduce

• Create a new React Native project.
• Implement the react-native-fbsdk.
• At first, you will be able to make API requests and such as expected.
• Then, after some time, you will get “Access Denied” on all requests.

Expected behavior I expected Amplify to see that my access token is no longer good and use my facebook refresh token to get a new access token.

Smartphone (please complete the following information):

• Device: Google Pixel, reproducible on iOS simulator as well
• OS: Android 9, iOS 12

Versions

• aws-amplify: 1.0.2
• react: 16.3.1
• react-native: 0.55.4
• react-native-fbsdk: 0.7.0

For Additional Reference Here is my function that logs me in with facebook, gets my tokens, and Authorizes me with a federated identity:

import { API, Auth } from 'aws-amplify';
import {
  LoginManager,
  AccessToken,
  GraphRequest,
  GraphRequestManager
} from 'react-native-fbsdk';

handleFacebookLogin() {
    let self = this;
    // Attempt a login using the Facebook login dialog asking for default permissions.
    LoginManager.logInWithReadPermissions(['public_profile', 'email'])
    .then(
      function(result) {
        if (result.isCancelled) {
          // do nothing
        } else {
          AccessToken.getCurrentAccessToken()
            .then(data => {
              let token = data.accessToken;
              let expires_at = data.expirationTime;
              let user = data;

              let graphParams = { parameters: {} };
              let infoRequest = new GraphRequest('/me', graphParams, (error, result) => {
                  if (error) {
                    console.log('Error fetching data: ' + error.toString());
                    this.setState({ alertMessage: 'Error authenticating with Facebook. Please try again.' });
                  } else {
                    let params = {
                      body: {
                        user: result
                      }
                    };
                    Auth.federatedSignIn('facebook', { token, expires_at }, user)
                      .then(result => {
                        API.post('HangerAPI', '/v1/auth/fb', params)
                          .then(response => {
                            self.handleNavigation('/home');
                          })
                          .catch(err => {
                            console.log(err);
                            this.setState({ alertMessage: 'Error authenticating with Facebook. Please try again.' });
                          });
                      })
                      .catch(err => {
                        console.log(err);
                        this.setState({ alertMessage: 'Error authenticating with Facebook. Please try again.' });
                      });
                  }
                }
              );
              infoRequest.addStringParameter('id,name,email', 'fields');
              // Start the graph request.
              new GraphRequestManager().addRequest(infoRequest).start();
            })
            .catch(err => {
              console.log(err);
              this.setState({ alertMessage: 'Error authenticating with Facebook. Please try again.' });
            });
        }
      },
      function(error) {
        console.log('Login fail with error: ' + error);
        this.setState({ alertMessage: 'Error authenticating with Facebook. Please try again.' });
      }
    )
    .catch(err => {
      console.log(err);
      this.setState({ alertMessage: 'Error authenticating with Facebook. Please try again.' });
    });
  }

[powerful23]

@sampocs yes that one is using the web sdk of FB so can only be used in web env

[powerful23]

@ASteinheiser yeah, it happens when some function tiggers the action to get you a new credentials, and then Auth module will read the token from the cache and find it expired, then will call the refresh function