Demo App not working for Google provider

[rat-matheson]

I've cloned the repo and am building the latest commit 1a1201b783. When I run the demo app, I get a few errors for the google login.

• loading the button - the image doesn't load for the google button
• first time sign in - after clicking google sign in button and completing the sign in process, the login window becomes blank and doesn't close. The app never shows me as being logged in
• reloading after first time sign in - when reloading the page, I'm shown the sign in options (and my status is not signed in). When I try to sign in with google, a popup opens but its content is blank. If I go to Application in google chrome and delete all the cookies, and then reload, I am able to go through the sign in process again but end up with the same result as the previous bullet point

I've tried using the default google client id as well as my own and get the same results. Here are the errors I'm seeing:

My google config setup

I suspect this is somewhat irrelevant if using the default clientId of 624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com. However, when I used my own client id, I went through the following process.

• Created an new id in Credentials -> OAuth 2.0 Client IDs in the google console
• Added http://localhost:4200 to Authorized JavaScript Origins
• Added http://localhost:4200 to Authorized redirect URIs (although this should not be necessary)
• Navigated to OAuth consent screen and added myself as a test user - again, this should not be necessary in order to just display the button
• Waited a day

Debbuging

Loading the button image

Looks like an authorization issue.

From the console

client:36 [GSI_LOGGER]: The given origin is not allowed for the given client ID.

From the network tab:

https://accounts.google.com/gsi/status?client_id=624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com&as=o%2FMHOfjuIn%2BLhWpvNOCjLw

Request URL: https://accounts.google.com/gsi/status?client_id=624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com&as=o%2FMHOfjuIn%2BLhWpvNOCjLw
Request Method: GET
Status Code: 403 
Remote Address: 142.250.65.173:443
Referrer Policy: strict-origin-when-cross-origin
access-control-allow-credentials: true
access-control-allow-methods: GET
access-control-allow-origin: http://localhost:4200
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-disposition: attachment; filename="json.txt"; filename*=UTF-8''json.txt
content-encoding: gzip
content-security-policy: require-trusted-types-for 'script';report-uri https://csp.withgoogle.com/csp/identity-sign-in-google-http
content-security-policy: script-src 'report-sample' 'nonce-_DBMDT9Ry3GdKJgWTXpSog' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval';object-src 'none';base-uri 'self';report-uri https://csp.withgoogle.com/csp/identity-sign-in-google-http
content-type: application/json; charset=utf-8
cross-origin-opener-policy-report-only: same-origin; report-to="coop_dd7de8473bddc59c6b748810a67a39b1"
date: Thu, 25 Aug 2022 16:25:33 GMT
expires: Mon, 01 Jan 1990 00:00:00 GMT
pragma: no-cache
report-to: {"group":"coop_dd7de8473bddc59c6b748810a67a39b1","max_age":2592000,"endpoints":[{"url":"https://csp.withgoogle.com/csp/report-to/dd7de8473bddc59c6b748810a67a39b1"}]}
server: ESF
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 0
:authority: accounts.google.com
:method: GET
:path: /gsi/status?client_id=624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com&as=o%2FMHOfjuIn%2BLhWpvNOCjLw
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
origin: http://localhost:4200
referer: http://localhost:4200/
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Same thing pretty much for the button

https://accounts.google.com/gsi/button?type=icon&size=medium&text=signin_with&width&shape=rectangular&theme=outline&logo_alignment=left&locale&client_id=624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com&iframe_id=gsi_733389_980571&as=o%2FMHOfjuIn%2BLhWpvNOCjLw

request URL: https://accounts.google.com/gsi/button?type=icon&size=medium&text=signin_with&width&shape=rectangular&theme=outline&logo_alignment=left&locale&client_id=624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com&iframe_id=gsi_733389_980571&as=o%2FMHOfjuIn%2BLhWpvNOCjLw
Request Method: GET
Status Code: 403 
Remote Address: 142.250.65.173:443
Referrer Policy: strict-origin-when-cross-origin
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-encoding: gzip
content-security-policy: script-src 'report-sample' 'nonce-HUCoZ521szU3LB4-pRV9QQ' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval';object-src 'none';base-uri 'self';report-uri https://csp.withgoogle.com/csp/identity-sign-in-google-http
content-security-policy: require-trusted-types-for 'script';report-uri https://csp.withgoogle.com/csp/identity-sign-in-google-http
content-type: text/html; charset=utf-8
cross-origin-opener-policy-report-only: same-origin; report-to="coop_dd7de8473bddc59c6b748810a67a39b1"
cross-origin-resource-policy: cross-origin
date: Thu, 25 Aug 2022 16:25:33 GMT
expires: Mon, 01 Jan 1990 00:00:00 GMT
pragma: no-cache
report-to: {"group":"coop_dd7de8473bddc59c6b748810a67a39b1","max_age":2592000,"endpoints":[{"url":"https://csp.withgoogle.com/csp/report-to/dd7de8473bddc59c6b748810a67a39b1"}]}
server: ESF
x-content-type-options: nosniff
x-xss-protection: 0
:authority: accounts.google.com
:method: GET
:path: /gsi/button?type=icon&size=medium&text=signin_with&width&shape=rectangular&theme=outline&logo_alignment=left&locale&client_id=624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com&iframe_id=gsi_733389_980571&as=o%2FMHOfjuIn%2BLhWpvNOCjLw
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
referer: http://localhost:4200/
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: iframe
sec-fetch-mode: navigate
sec-fetch-site: cross-site
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Other issues

I suspect solving the button issue with solve the other issues

[rat-matheson]

So I think I found the solution. The google client id for the demo app is '624796833023-clhjgupm0pu6vgga7k5i5bsfp6qp6egh.apps.googleusercontent.com'. I suspect the 'Authorized JavaScript origins' in the console.cloud.google.com is set to http://localhost:somePort. It needs to not have the port and just be http://localhost, even if the port in the console matches the angular server (ie 4200 by default). This stackoverflow comment has a bit more detail.

You might not notice the issue if you are validating the demo app locally using https or using your own custom google client api. However, using the one that is currently set for the demo fails and likely needs to be updated. Can a maintainer check this and update the configuration?

On my end, I just created a new client and gave it the appropriate settings and can now load the demo app with no issues.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.