Missing required parameter client_id when using amplify for google authentication

Viewed 1396

I'm trying to setup Google Sign-in using Amplify on AWS.

After running the CLI tools, an aws-exports.js file was created. The content of the file looks as follows. (I blurred some of the id's for security reasons)

aws-exports.js

And I've added a button to the html of my component:

<amplify-google-button></amplify-google-button>

There does indeed show a sign-in button for google.

Google sign in button

However, when I click the button, an error shows in the console log.

Dw {message: "Missing required parameter 'client_id'", KK: true, stack: "gapi.auth2.ExternallyVisibleError: Missing require…ask (http://localhost:4200/polyfills.js:10872:18)"}
KK: true
message: "Missing required parameter 'client_id'"
stack: "gapi.auth2.ExternallyVisibleError: Missing required parameter 'client_id'↵    at new Dw (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.nl.r1otz6eix_k.O/m=client/rt=j/sv=1/d=1/ed=1/am=wQE/rs=AGLTcCOGfNNm-txjpYHjoYjEhq8W5zaIHw/cb=gapi.loaded_0:555:25)↵    at ox (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.nl.r1otz6eix_k.O/m=client/rt=j/sv=1/d=1/ed=1/am=wQE/rs=AGLTcCOGfNNm-txjpYHjoYjEhq8W5zaIHw/cb=gapi.loaded_0:574:131)↵    at Object._.Lx [as init] (https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.nl.r1otz6eix_k.O/m=client/rt=j/sv=1/d=1/ed=1/am=wQE/rs=AGLTcCOGfNNm-txjpYHjoYjEhq8W5zaIHw/cb=gapi.loaded_0:592:269)↵    at AmplifyGoogleButton.getAuthInstance (http://localhost:4200/13.js:278:38)↵    at AmplifyGoogleButton.signInWithGoogle (http://localhost:4200/13.js:288:14)↵    at HTMLElement.onClick (http://localhost:4200/13.js:294:129)↵    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:9650:35)↵    at Zone.runTask (http://localhost:4200/polyfills.js:9418:51)↵    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:9731:38)↵    at invokeTask (http://localhost:4200/polyfills.js:10872:18)"
__proto__: _.Tc

Before I created all this, I created a client ID on the Google Cloud Platform.

Google Cloud Platform ID

The Amplify configuration page has an app which is called "ZBaduk", with an environment called "dev". This page is linked to cognito in authentication:

Amplify linked to Cognito

This ID effectively matches to the ID of the AWS User Pool, which has the configuration of the Google Identity.

User Pool ID

So, is there some other place where I need to enter the google client ID perhaps ?

1 Answers

There should be a client-id property on the amplify-google-button element.

<amplify-google-button clientId="87153937946-md7....apps.googleusercontent.com"></amplify-google-button>
Related