Search code examples
httpnginxgoogle-oauth

Google OAuth api whitelist not working on localhost and public ip

Edit:

So there is a lot of problems with the Google OAuth not just the ones in the original question. But I'll still leave it at the bottom as an example of one of them.

New question:

Google OAuth API keeps showing error: Not a valid origin for the client: <some_url> even when i added the site to Authorized JavaScript origins

Mostly in regards to localhost and public IPs without domain name yet.

Original question:

Hi, I am having an error when trying to sign in using Google OAuth2.0 API in browser.

Error in console

The error says:

{
error: "idpiframe_initialization_failed",
details: ""Not a valid origin for the client: https://localhost has not been whitelisted for client ID <CLIENT_ID>.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID.""}

Where <CIENT_ID> is actual client id provided by google api

I have all these origins enabled:

Enabled origins

I have all these ports opened on my nginx server

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    listen 8000 default_server;
    listen [::]:8000 default_server;

    listen 5000 default_server;
    listen [::]:5000 default_server;

    # SSL configuration
    #
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;

    listen 4343 ssl default_server;
    listen [::]:4343 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    include snippets/snakeoil.conf;

Here with colors:

enter image description here

All of them point to the same website and all of them work except:

http://localhost
http://localhost:80
https://localhost
https://localhost:443

With the other ports I manage to Sign In but not with those essential ports.

I have seen many similar questions answered with deleting the cache but the same behavior can be seen on Vivaldi (chromium) and Firefox (used for the first time before asking this question)

Solution

  • I think i found the problem.

    Every time i forgot to put the location into whitelisted origins, something happenned and my browser cache remembered that this origin is not in the whitelist and even after adding the location into whitelist the error kept showing.

    I had to clear the browsing cache (i also deletet application cache just in case) to get the behavior back.

    I'll be testing my site on a different browser from now on so i can delete browsing data freely.

    Also you cannot have for some reason IPs in the whitelist so you have to use some shannanigans for example .xip.io which is just a domain that when you access <some_ip>.xip.io:<some_port> it returns ip which is <some_ip>:<some_port> (you can ommit :<some_port> so that it will return <some_ip>

    And localhost was just a big mess

    Also i didn't manage to make the port 80 and 443 work on localhost but i think it worked on the public server with .xip.io

    SO

    I recommend:

    • ideally use domain name
      • otherwise avoid public IPs with something like .xip.io
      • on localhost use 127.0.0.1 instead just in case and also use .xip.io
    • use burner browser (or private mode if it works for you, but i wanted to test if it works in default environment) for frequent cache clearing if you mess up (and you will probably)
    • just use alternative ports for localhost