Solving the Amplify & Cognito - Already found entry error

avatar

Borislav Hadzhiev

Tue Mar 23 20212 min read

banner

Photo by K B

The Cause of the Already Found Entry Error in Amplify & Cognito #

The first time a user registers with an OAuth provider (i.e. Google and Facebook) they get an error:

already found entry error

Error handling auth response. Already+found+an+entry+for+username+Google_xyz

This error only occurs the first time a user signs up, using a Federated IDP (Google, Facebook, etc), if you were to repeat the sign up flow you would get a successful response.

Solving the Already Found Entry Error in Amplify & Cognito #

When users sign up with OAuth providers, they get redirected to a route in your application, for example the root route /.

On the root route of your application, you have to check for the already found an entry query parameters, and handle the error by restarting the OAuth flow.

This is the code snippet I use for handling the error in a React.js application:

const Home: React.FC = () => { const router = useRouter(); useEffect(() => { if ( router.query.error_description && /already.found.an.entry.for.username.google/gi.test( router.query.error_description.toString(), ) ) { handleGoogleLogin(); } else if ( router.query.error_description && /already.found.an.entry.for.username.facebook/gi.test( router.query.error_description.toString(), ) ) { handleFacebookLogin(); } }, [router.isReady, router.query.error, router.query.error_description]); // rest... };

You have to check for the error_description parameter, and if it contains the already found an entry for username google string, you just initialize the federated sign in flow for google again. The same would be the case if the OAuth provider were Facebook.

The implementation for the handleGoogleLogin function looks like this:

export const handleGoogleLogin = async () => { try { await Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google, }); } catch (e) { console.log(`Google login error --->`, e); } };

And the same for the handleFacebookLogin function:

export const handleFacebookLogin = async () => { try { await Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Facebook, }); } catch (e) { console.log('Facebook login error --->', e); } };

Discussion #

Unfortunately your users will have to go through the flow 2 times, but it's only on the first time they register.

For any consecutive visits they will be logged in straight away without the ping-pong redirect.

In summary, we have to check for the contents of the error_description query parameter, if the error matches we start the federated sign in flow from the beginning, the user clicks through again and they register successfully.

Further Reading #

Add me on LinkedIn

I'm a Web Developer with TypeScript, React.js, Node.js and AWS experience.

Let's connect on LinkedIn

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee