Skip to content

Error: origin_mismatch when using Google OAuth on a non-localhost domain

Not developing on localhost? Google’s “Authorized JavaScript origins” list can only be configured to use localhost:port (e.g. http://localhost:3000) for development. This poses an annoying problem for those of us that are developing remotely or with a VM.

My current setup has me running a Ubuntu VM using VirtualBox, on a Windows 10 host. Since the disks are shared, I run my IDE on Windows, and use a browser in Windows to point to my VM (e.g. http://192.168.1.10:3000). Google doesn’t like this, and keeps giving me an “origin_mismatch” error when I try to use Google OAuth on this domain.

I’ve tried multiple workarounds, and this is what I found to work:

1. Edit your host file in windows

Open notepad using administrator privilege, and open C:\Windows\System32\drivers\etc\hosts
Add the line `192.168.1.10 www.mysite-dev.com` (or whatever IP your VM/remote server has)

2. Flush DNS

Open command prompt
Run `ipconfig /flushdns`

3. Restart your webserver to use port 80 (or 433 if you’re using ssl)

If you’re using Rails, you can use `thin` to run an ssl server. Otherwise, just use `rails server -p 80`.
If you run into permission errors like I did, prefix your commands with `sudo`. (or `rvmsudo` you’re using RVM)

4. Navigate your browser to `http://www.mysite-dev.com` or `https://www.mysite-dev.com` to make sure it loads
5. Once it loads, update your Google Authorized JavaScript origins to include the above url
6. Try logging in with Google OAuth in your project!

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*