How to serve a website that uses OAuth using Laravel Valet

If you use Google, Facebook or another OAuth provider, you might have a difficult time setting up your local environment. That’s because they have some very strict rules about the Authorized Redirect URIs you can register with them. Google, for example, says:

  • it can only be a valid top level domain (or localhost)
  • it can only be served through HTTPS (not HTTP)
  • etc

But if you use Mac OS & Laravel Valet, your projects probably are certainly hosted with a custom extension, something like .test. Google will not allow you to use example.test. Here’s what I’ve done, to be able to use Google OAuth on Laravel Valet.

Assumptions:

  • you already have your app set up in Google API Console;
  • you’ve already set permissions and have your TLD approved (example.com);
  • you already have a working production environment (example.com);
  • you already have a working staging environment (xyz.example.com);
  • you don’t have a working localhost environment;
  • you want to use the same credentials for your localhost environment, as you did for your staging environment;

Step 1. In the Google API Console, for your staging environment, add a new Authorized redirect URI, but use the localhost.example.com instead of xyz.example.com (or whatever you are using for the staging environment). This will allow you to use this as a Redirect URI when you log the user in, and Google won’t throw an error. Make sure you use HTTPS. It might look something like this:

https://localhost.example.com/login/google/callback

Step 2. Install your project as you normally would. Say it lives in your /Projects/example , then Valet would normally serve it through example.test. What we want it to do is also serve it through localhost.example.com. To do this, you need to:

  • point localhost.example.com to 127.0.0.1 on your machine; either manually edit /etc/hosts, or do:

sudo echo ‘127.0.0.1 localhost.example.com’ >> /etc/hosts

  • then, in your parked Laravel directory (usually /Projects/ or /Sites/) create a symlink to your real folder:

ln -s example localhost.example.com

You now have an alias — localhost.example.com is the same thing as example.test

Step 3. Add a SSL certificate

valet secure localhost.example.com

valet restart

This will probably add a certificate for localhost.example.com.test, but you shouldn’t care that much. Since it’s a self-signed certificate, it isn’t of much use, you’ll be the only one seeing it. Go to https://localhost.example.com and it will prompt you that the certificate isn’t valid. Confirm you know what you’re doing. It will say NOT SECURE in your address bar, but who cares.

Step 4. In your OAuth implementation, make sure you’re sending Google this new callback url, with HTTPS and bogus subdomain. Usually it’s in your .ENV file, something like:

GOOGLE_REDIRECT=https://localhost.example.com/login/google/callback

Step 5. That’s it. Go ahead and test it:

  • you go to https://localhost.example.com
  • this localhost.example.com actually serves your old example.test
  • when you click on your Google Auth login button, Google will check the certificate, id and everything and redirect you to the callback URL you specified, which starts with https://localhost.example.com
  • your hosts file sees that domain and points it to 127.0.0.1
  • Laravel Valet picks it up and sends it to the symlink
  • the symlink picks it up and sends it to the real /Projects/example folder

I haven’t found a better way to do this using Laravel Valet. Let me know if you do, or if you find a way to easily generate a SSL certificate for localhost.example.com instead.

Cheers!

Cristian Tăbăcitu

Written by

Creator of Backpack for Laravel & ScheduleThatEmail. I build web products - for work and for fun. www.tabacitu.com