React Authenticator Social Login - redirect_mismatch

Question

I am buiding an application with Amplify and React. I wanted to add the social login (Facebook and Google). However, when I try to click on the Facebook or Google buttons I get redirected to a link that has a qeury param error=redirect_mismatch and says An error was encountered with the requested page.

When I try the Test Endpoint of the Hosted UI for Cognito it works fine, but I get an error when I try to do it with the Authenticator Component.

I am using the following versions of the packages:
"@aws-amplify/ui-react": "^4.6.0",
"aws-amplify": "^5.0.20",

I also checked the callback urls under the App Integrations on Cognito, and they match the urls from where the login flow starts.

Thomas · Answer

Hey,
I experienced similar issues. Have u created a developer account in Google Cloud and Facebook? There, you have to enter the cognito-domain in order to get a correct redirect. There are three links below, that should help you:

https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-configuring-federation-with-social-idp.html
https://ui.docs.amplify.aws/react/connected-components/authenticator/configuration
https://docs.amplify.aws/javascript/build-a-backend/auth/concepts/external-identity-providers/#customizing-scopes-for-retrieving-user-data-from-external-providers

React Authenticator Social Login - redirect_mismatch

Contenus pertinents