"Sign in with Google" and "Sign in with Apple" usually refuse to work while you are testing on your own machine, because those providers will not accept the address it runs on. This puts the app on a web address they do accept and walks through registering it with each provider.
WHEN TO USE
USE FOR
- Fix a redirect_uri_mismatch error when testing Google or Apple sign-in on a local server.
- Configure a Google, Apple, Microsoft, Facebook, or GitHub OAuth app to accept a portless URL.
- Point NextAuth or Auth.js at your portless domain so callbacks stop resolving to localhost.
- Get Apple Sign In to accept a local dev domain that Apple otherwise refuses outright.
- Track down why a sign-in redirect lands on the wrong URL after switching a project to portless.
This is a saved copy of the skill's SKILL.md instructions. It may differ from the upstream file or the version you install.
OAuth with Portless
OAuth providers validate redirect URIs against domain rules. .localhost subdomains fail on most providers because they are not in the Public Suffix List or are explicitly blocked. Portless fixes this with --tld to serve apps on real, valid domains.
The Problem
When portless uses the default .localhost TLD, OAuth providers reject redirect URIs like http://myapp.localhost:1355/callback:
| Provider | localhost | .localhost subdomains | Reason |
|---|---|---|---|
| Allowed | Rejected | Not in their bundled PSL | |
| Apple | Rejected | Rejected | No localhost at all |
| Microsoft | Allowed | Allowed | Permissive localhost handling |
| Allowed | Varies | Must register each URI exactly | |
| GitHub | Allowed | Allowed | Permissive |
Google and Apple are the strictest. Microsoft and GitHub are more lenient with localhost.
The Fix
Use a valid TLD so the redirect URI passes provider validation:
portless proxy start --tld dev
portless myapp next dev
# -> https://myapp.devAny TLD in the Public Suffix List works: .dev, .app, .com, .io, etc.
Use a domain you own
Bare TLDs like .dev mean myapp.dev could collide with a real domain. Use a multi-segment TLD under a domain you control, so the app name stays clean and the domain structure lives in the TLD:
portless proxy start --tld local.yourcompany.dev
portless myapp next dev
# -> https://myapp.local.yourcompany.devThis ensures no outbound traffic reaches something you don't own. For teams, set a wildcard DNS record (*.local.yourcompany.dev -> 127.0.0.1) so every developer gets resolution without /etc/hosts, and every developer shares the same redirect URIs in the provider console.
Provider Setup
- Go to Google Cloud Console > Credentials
- Create or edit an OAuth 2.0 Client ID (Web application)
- Add the portless domain to Authorized JavaScript origins:
https://myapp.dev - Add the callback to Authorized redirect URIs:
https://myapp.dev/api/auth/callback/google
Google validates domains against the Public Suffix List. The domain must end with a recognized TLD. .localhost subdomains fail this check; .dev, .app, .com, etc. all pass.
HTTPS is required for .dev and .app (HSTS-preloaded). Portless handles this automatically with --https.
Apple
Apple Sign In does not allow localhost or IP addresses at all.
- Go to Apple Developer > Certificates, Identifiers & Profiles
- Register a Services ID
- Configure Sign In with Apple, adding the portless domain as a Return URL:
https://myapp.dev/api/auth/callback/apple
The domain must be a real, publicly-resolvable domain name. Since portless maps the domain to 127.0.0.1 locally, the browser resolves it but Apple's server-side validation may require the domain to resolve publicly too. If Apple rejects the domain, add a public DNS A record pointing to 127.0.0.1 for your dev subdomain.
Microsoft (Entra / Azure AD)
- Go to Azure Portal > App registrations
- Create or edit an app registration
- Under Authentication, add a Web redirect URI:
https://myapp.dev/api/auth/callback/azure-ad
Microsoft allows http://localhost with any port for development. It also accepts .localhost subdomains in most cases. Using a custom TLD with portless is still recommended for consistency across providers.
Facebook (Meta)
- Go to Meta for Developers > App Dashboard
- Under Facebook Login > Settings, add the portless URL to Valid OAuth Redirect URIs:
https://myapp.dev/api/auth/callback/facebook
Facebook requires each redirect URI to be registered exactly (no wildcards). Strict Mode (enabled by default) enforces exact matching.
GitHub
- Go to GitHub Developer Settings > OAuth Apps
- Set Authorization callback URL:
https://myapp.dev/api/auth/callback/github
GitHub is permissive with localhost and subdomains. A custom TLD is not strictly required but keeps the setup consistent.
Auth Library Configuration
NextAuth / Auth.js
Set NEXTAUTH_URL to match the portless domain:
NEXTAUTH_URL=https://myapp.devNextAuth uses this to construct callback URLs. Without it, callbacks may use localhost and cause a mismatch.
Passport.js
Set the callbackURL in each strategy to use the portless domain:
new GoogleStrategy({
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: process.env.BASE_URL + "/auth/google/callback",
});Set BASE_URL=https://myapp.dev in your environment.
Generic / Manual
Read the PORTLESS_URL environment variable that portless injects into the child process:
const baseUrl = process.env.PORTLESS_URL || "http://localhost:3000";
const callbackUrl = `${baseUrl}/auth/callback`;Troubleshooting
"redirect_uri_mismatch" or "invalid redirect URI"
The redirect URI sent during the OAuth flow doesn't match what's registered with the provider. Check:
- The provider's registered redirect URI matches the portless domain exactly (protocol, host, path)
NEXTAUTH_URLor equivalent is set to the portless URL (notlocalhost)- The proxy is running with the correct TLD (
portless listto verify)
Provider requires HTTPS
.dev and .app TLDs are HSTS-preloaded, so browsers force HTTPS. Start the proxy:
portless proxy start --tld devPortless defaults to HTTPS on port 443 (auto-elevates with sudo). Run portless trust to add the local CA to your system trust store and eliminate browser warnings.
Apple rejects the domain
Apple may require the domain to resolve publicly. Add a DNS A record for your dev subdomain pointing to 127.0.0.1:
myapp.local.yourcompany.dev A 127.0.0.1Or use a wildcard: *.local.yourcompany.dev A 127.0.0.1.
Callback goes to wrong URL after sign-in
The auth library is constructing the callback URL from localhost instead of the portless domain. Set the appropriate environment variable:
- NextAuth:
NEXTAUTH_URL=https://myapp.dev - Auth.js v5:
AUTH_URL=https://myapp.dev - Manual:
PORTLESS_URLis injected automatically; use it as the base URL
Example
See examples/google-oauth for a complete working example with Next.js + NextAuth + Google OAuth using --tld dev.
Account or credentials required
2 FOR YOUAll items below are required.
- 01Start the portless proxy on a real TLD, not .localhost
Run
portless proxy start --tld <yourtld>(e.g. --tld dev, or a domain segment you own like local.yourcompany.dev) so the app serves on a domain OAuth providers accept; Google and Apple both reject the default .localhost TLD. - 02Register the portless domain as the OAuth redirect URI
In the provider's console (Google Cloud Console credentials, Apple Services ID Return URL, Azure App registration redirect URI, Facebook Login valid OAuth redirect URIs, or GitHub OAuth App callback URL), add https://<app>.<tld>/... as the callback.
- Listed as free
- Connected services may require an account or charge fees.
- Setup details
- The README mentions source builds, cloning, containers, hosting, OAuth, service accounts, or cloud projects.
Download the whole vercel-labs/portless project from GitHub and use this skill from inside it. It uses other files in that project, so a copy installed on its own is missing them.
git clone https://github.com/vercel-labs/portlessThe repository is licensed under Apache-2.0 — use, modification, and redistribution are allowed under that license’s terms.
View the repository’s license file on GitHub →