Got it, let's break down practical ways to test Google OAuth on your mobile device while keeping your app running locally—no full deployment needed. Here are the most reliable methods:

1. Use a Local Tunnel Tool (ngrok) #

This is the quickest fix for most local OAuth testing scenarios. Tools like ngrok create a public HTTPS tunnel to your local server, giving you a valid domain that Google OAuth accepts.

• How to set it up:

  1. Download and install ngrok (no account required for basic use).
  2. Run your local web app as usual, noting its port number (e.g., 3000).
  3. Open a terminal and run: ngrok http 3000 (replace 3000 with your app's port).
  4. Copy the HTTPS URL ngrok provides (looks like https://abc123.ngrok.io).
  5. Head to your Google Cloud Console, find your OAuth 2.0 client ID, and add this HTTPS URL to:
     • Authorized JavaScript origins
     • Authorized redirect URIs (make sure it matches your app's OAuth callback path, e.g., https://abc123.ngrok.io/auth/google/callback)
  6. On your mobile device (connected to any network), access your app via the ngrok HTTPS URL. Google OAuth will now work since the domain is whitelisted.

• Note: Free ngrok sessions generate a new URL every time you restart the tool, so you'll need to update your Google OAuth settings each time.

2. Map a Custom Local Domain to Your Laptop IP (With HTTPS) #

If you prefer a consistent domain instead of changing URLs each time, you can use a custom local domain and self-signed SSL certificate.

• Steps:
  1. Pick a fake domain like my-local-app.test.
  2. Update your laptop's hosts file: Add a line like 192.168.x.x my-local-app.test (replace 192.168.x.x with your laptop's local IP).
  3. Update your mobile device's hosts file:
     • For Android: Use a rooted device or a third-party app (like Hosts Editor) to add the same line.
     • For iOS: Create a configuration profile with the host mapping using Apple Configurator (jailbreaking isn't recommended for most users).
  4. Generate a self-signed SSL certificate for my-local-app.test and configure your local web app to use HTTPS with this certificate.
  5. Install the self-signed certificate on your mobile device and trust it in your device's security settings.
  6. In Google Cloud Console, add https://my-local-app.test (and the callback path) to your OAuth client's authorized origins and redirect URIs.
  7. Access https://my-local-app.test on your mobile device—Google OAuth will recognize the whitelisted domain.

3. Whitelist Your Laptop's Local IP Directly (If Allowed) #

Contrary to what you might have read, Google OAuth does allow local IP addresses in some cases (though it's not the most polished solution).

• Try this:

  1. Find your laptop's local IP address (run ipconfig on Windows or ifconfig on macOS/Linux).
  2. In Google Cloud Console, add http://192.168.x.x:your-port to Authorized JavaScript origins and your app's callback URI (e.g., http://192.168.x.x:your-port/auth/google/callback) to Authorized redirect URIs.
  3. On your mobile device, connect to the same WiFi network as your laptop, then access your app via http://192.168.x.x:your-port.

• Caveat: Some mobile browsers might block OAuth flows over HTTP (non-HTTPS) as a security measure. If you hit this issue, combine this method with a self-signed HTTPS certificate (like in method 2) to resolve it.

Key Notes for All Methods #

• Ensure your Google OAuth app is set to Testing mode in the Cloud Console, and add your Google account (and any other test users) to the Test users list—unpublished apps only allow test users to authenticate.
• Always double-check that your redirect URIs in Google Console exactly match the ones your app uses (including path and HTTP/HTTPS).

内容的提问来源于stack exchange，提问作者Marry Poppins