Federated sign in with Facebook is not working in React Native (Expo) app

** Which Category is your question related to? **

Federated Authentication

** What AWS Services are you utilizing? **

Cognito

** Provide additional details e.g. code snippets **

I am trying to use the federated sign in with Facebook. I’ve set up everything correctly, but I can’t get it to work. I’m receiving this error when calling Auth.federatedSignIn():

Invalid login token. Not a valid OpenId Connect identity token.

The token is a valid access token (I can call Facebook’s Graph API successfully).

Maybe I need to pass a different token?

Here is my code:

import React from 'react';
import { View, Button } from 'react-native';
import awsconfig from './aws-exports';
import Auth from '@aws-amplify/auth';
import * as Facebook from 'expo-facebook';
import * as WebBrowser from 'expo-web-browser';

const urlOpener = async (url, redirectUrl) => {
    // On Expo, use WebBrowser.openAuthSessionAsync to open the Hosted UI pages.
    const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);

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

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

const oauth = {
	domain : 'MY_DOMAIN.auth.eu-central-1.amazoncognito.com', 
	scope : ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'], 
	redirectSignIn : 'exp://127.0.0.1:19000',
	redirectSignOut : 'exp://127.0.0.1:19000',
	responseType: 'code',
	urlOpener: urlOpener
};

Auth.configure({ ...awsconfig, oauth });

export default function App() {

        useEffect(() => {
		initAsync();
	}, []);

	const initAsync = async () => {
		await Facebook.initializeAsync('YOUR_APP_ID');
	}

	async function signInWithFacebook() {
          const { type, token, expires } = await Facebook.logInWithReadPermissionsAsync({
			permissions: ['public_profile', 'email'],
		});
		console.log(type, token);
         if (type === 'success') {
	     // sign in with federated identity 
             // error --> token not accepted
            Auth.federatedSignIn('Facebook', { token, expires_at: expires })
              .then(credentials => {
                 console.log('get aws credentials', credentials);
              }).catch(e => {
                console.log(e);
              });
          }
	}

  return (
    <View style={styles.container}>
	<View>
	  <Button onPress={signInWithFacebook} title="Open Facebook" />
	</View>
    </View>
  );
}

[ericclemmons]

Ah! This would be the first thing we’d want to troubleshoot.

When you run amplify status in your console, the last line should list URLs like so:

GraphQL endpoint: https://•••.appsync-api.us-east-1.amazonaws.com/graphql
Hosting endpoint: https://•••.cloudfront.net
Hosted UI Endpoint: https://•••.auth.us-east-1.amazoncognito.com/
Test Your Hosted UI Endpoint: https://•••.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=•••&redirect_uri=http://localhost:3000/

Click the “Test Your Hosted UI Endpoint” and try out the flow there.

Mine, for example, redirects back to my app at http://localhost:3000.

Let me know how far you can get. I suspect that you need to add the correct Cognito endpoints to your social providers first:

https://aws-amplify.github.io/docs/js/authentication#finish-social-setup

[pigslhub]

Hi jakobpack ! I am trying the same thing to access the hosted UI but i am unable to see the webview with facebook login page. Everytime i got " An error was encountered with the requested page". Please help me how can i solve that error ?