OAuth: how to test with local URLs?

Question

I am trying to test OAuth buttons, but they all (Facebook, Twitter, LinkedIn) come back with errors that seem to signal that I can not test or use them from a local URL.

How do people usually work in development with OAuth stuff if they all seem to require a non-dev and non-local connections environments?

Effervescent

I answered on that sometime back: https://mcmap.net/q/119648/-oauth-implementation-does-the-current-domain-matter – Chism

Answer 1

Update October 2016: Easiest now: use lvh.me which always points to 127.0.0.1, but make sure to verify that this is still true every time you need to invoke it (because domains can expire or get taken over, and DNS poisoning is always a concern)

Previous Answer:

Since the callback request is issued by the browser, as a HTTP redirect response, you can set up your .hosts file or equivalent to point a domain that is not localhost to 127.0.0.1.

Say for example you register the following callback with Twitter: http://www.publicdomain.com/callback/. Make sure that www.publicdomain.com points to 127.0.0.1 in your hosts file, AND that twitter can do a successful DNS lookup on www.publicdomain.com, i.e the domain needs to exist and the specific callback should probably return a 200 status message if requested.

EDIT:

I just read the following article: http://www.tonyamoyal.com/2009/08/17/how-to-quickly-set-up-a-test-for-twitter-oauth-authentication-from-your-local-machine, which was linked to from this question: Twitter oAuth callbackUrl - localhost development.

To quote the article:

You can use bit.ly, a URL shortening service. Just shorten the [localhost URL such as http//localhost:8080/twitter_callback] and register the shortened URL as the callback in your Twitter app.

This should be easier than fiddling around in the .hosts file.

Note that now (Aug '14) bit.ly is not allowing link forwarding to localhost; however Google link shortener works.

PS edit: (Nov '18): Google link shortener stopped giving support for localhost or 127.0.0.1.

Imbalance

I thought the server was calling the callbackurl, and now realize oauth uses the client as a messenger and no connexions are made between servers which makes it much simpler. – Ediva

It's worth noting that lvh.me is owned by a gentleman called Levi Cook (see gist.github.com/levicook/563675 ) and it's privately owned. He seems like a nice guy but it's not a formal authorized domain by a global authority so it may "theoretically" stop working at some point in time. – Kisor

As of the time of writing, Google doesn't seem to allow fancy domain extensions (like .me) in redirect URLs. As a result, lvh.me wasn't working. I've found success with lacolhost.com instead. – Haiphong

The owner of lvh.me could also start collecting all of your authorization codes... – Dragrope

@TaylorBuchanan: how though? lvh.me and localtest.me etc resolve immediately to 127.0.0.1. They could change their dns-records I suppose, but that would be discovered nearly immediately. – Imbalance

@JonNylander They could easily change their DNS records to point to another site which transparently stores the auth code and state and still redirects back to localhost. Unless you're checking DNS regularly, you wouldn't notice until they already had access. The only ones that would notice immediately are people using it outside of a browser context. – Dragrope

This does not appear to work when Google requires SSL domain. – Gaskell

Answer 2

You can also use ngrok: https://ngrok.com/. I use it all the time to have a public server running on my localhost. Hope this helps.

Another options which even provides your own custom domain for free are serveo.net and https://localtunnel.github.io/www/

Jacquejacquelin

This was easier that I thought! Just created my account, installed it and ran ./ngrok http 8080 -host-header="localhost:8080" and I was running with a public url. – Prot

Answer 3

Or you can use https://tolocalhost.com/ and configure how it should redirect a callback to your local site. You can specify the hostname (if different from localhost, i.e. yourapp.local and the port number). For development purposes only.

Bernat

that site doesn't forward url params (in firefox at least) – Selfish

@EricWooley thanks for letting me know. That should work, but seems to be broken. I haven’t touched it in years, I’ll have a look. – Enterovirus

I would love to use tolocalhost.com but the URL params forwards are still broken :/ – Jacobine

There is an alternative in an answer below (which worked well for me): https://mcmap.net/q/117112/-oauth-how-to-test-with-local-urls – Jacobine

@Jacobine sorry, always too busy and completely forgot about the comment above. I fixed the issue with GET parameters. – Enterovirus

Oh nice, thanks @Jørgen! Will give it another try next time I run into the issue. Thanks a lot for providing this cool, free service :) – Jacobine

Answer 4

For Mac users, edit the /etc/hosts file. You have to use sudo vi /etc/hosts if its read-only. After authorization, the oauth server sends the callback URL, and since that callback URL is rendered on your local browser, the local DNS setting will work:

127.0.0.1       mylocal.com

Rahn

Answer 5

Set your local domain to mywebsite.example.com (and redirect it to localhost) -- even though the usual is to use mywebsite.dev. This will allow robust automatic testing.

Although authorizing .test and .dev is not allowed, authorizing example.com is allowed in google oauth2.

(You can redirect any domain to localhost in your hosts file (unix/linux: /etc/hosts))

Why mywebsite.example.com?
Because example.com is a reserved domain name. So

1. there would be no naming conflicts on your machine.
2. no data-risk if your test system exposes data to not-redirected-by-mistake.example.com.

Makell

Answer 6

I ran into some issues with the tools mentioned in other answers such as http://tolocalhost.com not forwarding query parameters (not to mention you have to visit the page and configure it first, same case with https://thomasmcdonald.github.io/Localhost-uri-Redirector/) and http://lvh.me not being useful to me because I run a proxy on my local machine and need the public URL to point to a private URL like http://mywebsite.dev.

So I made my own tool that filled my needs and may fill yours:

https://redirectmeto.com

Examples:

https://redirectmeto.com/https://www.google.com/search?q=puppies

http://redirectmeto.com/http://localhost:4000/oauth/authorize

http://redirectmeto.com/http://client.dev/page

Jeremiah

This worked flawlessly for me! Thanks a lot for setting this up :) – Jacobine

Answer 7

You can edit the hosts file on windows or linux Windows : C:\Windows\System32\Drivers\etc\hosts Linux : /etc/hosts

localhost name resolution is handled within DNS itself.

127.0.0.1 mywebsite.com

after you finish your tests you just comment the line you add to disable it

127.0.0.1 mywebsite.com

Ordeal

It worked for me, thanks. Also, if you use e.g. Node.js on port 3000, use mywebsite.com:3000 – Abshire

Answer 8

This answer applies only to Google OAuth

It is actually very simple and I am surprised it worked for me (I am still sceptical of what my eyes are seeing).

Apparently you can add localhost as a trusted domain on the Google Developer Console, since localhost is an exception for most rules as you can see here.

This can be done on this page under OAuth 2.0 Client IDs. Click edit and then add http://localhost:8000 or similar ports, and hit save.

It is crucial that you include http or https in the input box.

HTTP or HTTPS?

I am once again surprised that Google allows http, although do note that there is a minor security risk if your application has been released to production.

If you want to be extra cautious, you can choose to stick with https. This will require you to set up an SSL certificate on your localhost server.

This is easier than you think, since the SSL certificate needs not be valid. Many http servers should give you this option. You will have to click the "proceed anyway" button anyway in your browser to bypass the big red warning.

This is more secure than http since either a) users will see a big red warning if hackers are trying something phishy, or b) the only time they won't see this warning is if the user intentionally set up a self-hosted SSL certificate, in which case they probably know what they are doing (I suppose a virus could technically do this as well, but at that stage they've already gotten enough control of a user's system to do anything they want).

Gaskell

@JBarros35 Are you sure? Evidence? – Gaskell

Indeed this can be saved. i.imgur.com/mHCeN8A.png. But I still get error "Not a valid origin for the client: localhost:3000 has not been registered for client ID MYCLIENT_ID. Please go to console.developers.google.com and register this origin for your project's client ID." – Derrek

@ChristhoferNatalius a bit late but I'm facing the same problem. localhost doesn't work but 127.0.0.1 does. @edit: or so I thought. I was using Gapi and I got through the gapi.client.init but when I try to authorize I get Error 400: invalid_request Permission denied to generate login hint for target domain. – Have

Answer 9

Google doesn't allow test auth api on localhost using http://webporject.dev or .loc and .etc and google short link that shortened your local url(http://webporject.dev) also bit.ly :). Google accepts only url which starts http://localhost/...

if you want to test google auth api you should follow these steps ...

if you use openserver go to settings panel and click on aliases tab and click on dropdown then find localhost and choose it.

now you should choose your local web project root folder by clicking the next dropdown that is next to first dropdown.

and click on a button called add and restart opensever.

now your local project available on this link http://localhost/ also you can paste this local url to google auth api to redirect url field...

Bhagavadgita

While an older answer, it would still be a good idea to make sure that dialog has English labels (since this is not ru.stackoverflow.com - even screenshots should be in English to make sure the maximum number of visitors can understand what a post talks about) – Segment

Answer 10

Another valuable option would be https://github.com/ThomasMcDonald/Localhost-uri-Redirector. It's a very simple html page that redirects to whatever host and port you configure in the UI.

The page is hosted on Github https://thomasmcdonald.github.io/Localhost-uri-Redirector, so you can use that as your OAuth2 redirect url and configure you target host and port in the UI and it will just redirect to your app

Shogunate

Answer 11

If you have a domain, you can create a subdomain that redirects to your local entry point, it works for me

I created a public subdomain : oauth-test-local.alexisgatuingt.fr that redirects you to http:127.0.0.1:8000/oauth/callback/google with the returned data

Tragedy

Answer 12

If I understand correctly you want to handle redirects to you localhost instead to you app. Many OAuth2 service providers does not let to set up a redirect url to unencrypted endpoints (http) or other domain than your app is (for example localhost).

Here is my proposal.

Host your app with additional 2. redirectUrl endpoint:

1. https://yourapp.com/handle-oauht             (production)
2. https://yourapp.com/handle-oauht/localhost   (local dev)

Redirect incoming requests on 2. to your localhost http://localhost/handle-oauht

Be aware it is not good to have 2. unprotected in production.

Incisive

Answer 13

In my case, for GitHub oauth, I just created a new oauth configuration e.g. "My App localhost" and use this for localhost and the current one for production.

Worked like a charm 😉

Neglect

Answer 14

Taking Google OAuth as reference

• In your OAuth client Tab

  1. Add your App URI example(http://localhost:3000) to Authorized JavaScript origins URIs

• In your OAuth consent screen

  1. Add mywebsite.com to Authorized domains

• Edit the hosts file on windows or linux Windows C:\Windows\System32\Drivers\etc\hosts Linux : /etc/hosts to add 127.0.0.1 mywebsite.com (N.B. Comment out any if there is any other 127.0.0.1)

Windpipe