Horizon
GuidesSign-in and OAuth

Test Google sign-in locally

Test Google OAuth sign-in on localhost with a stable HTTPS redirect URI from a Horizon tunnel and Auth.js.

Sign in with Google on your laptop while Google redirects to a stable HTTPS URL.

Before you begin

  • A Horizon account and the CLI (see Getting started)
  • A reserved subdomain for -s. Reserve one on the Subdomains page.
  • A Next.js App Router app with Auth.js installed (npm install next-auth@beta)
  • A Google Cloud project

Start a tunnel

Use -s with a subdomain you reserved. Without it, the subdomain is random and changes every run, so the redirect URI you register in Google would point at a dead URL after a restart. Reserved subdomains are a paid feature, see Pricing.

hrzn tunnel http://localhost:3000 -s my-app
Output
HORIZON: Tunnel connected
  URL          https://my-app.hrzn.run (reserved)
  Forwarding   http://localhost:3000
  Request log  https://hrzn.run/dashboard/tunnels/my-app

Your public URL is https://my-app.hrzn.run. Keep this terminal open.

Create the OAuth client in Google

  1. Open the Google Cloud console and go to Google Auth Platform, then Clients.
  2. Select CREATE CLIENT.
  3. Set Application type to Web application.
  4. Under Authorized JavaScript origins, add https://my-app.hrzn.run. An origin has no path and no trailing slash.
  5. Under Authorized redirect URIs, add https://my-app.hrzn.run/api/auth/callback/google.
  6. Select CREATE.
  7. Copy the client ID and the client secret. Google shows the secret when you create the client, so store it now.

Google requires HTTPS for both fields, with an exception for localhost. A Horizon URL is HTTPS, so it needs no exception. Google says changes to these settings can take 5 minutes to a few hours to take effect.

Configure Auth.js

Auth.js builds the redirect URI from the request. Horizon sets Host to localhost:3000 and sends the public host in X-Forwarded-Host. AUTH_TRUST_HOST=true tells Auth.js to trust X-Forwarded-Host. AUTH_URL pins the public URL. Auth.js says AUTH_URL is mostly unnecessary in v5, so treat it as a second guard.

Generate the secret.

npx auth secret

Add the environment variables.

.env.local
AUTH_SECRET=replace-with-the-generated-secret
AUTH_URL=https://my-app.hrzn.run
AUTH_TRUST_HOST=true
AUTH_GOOGLE_ID=replace-with-your-client-id
AUTH_GOOGLE_SECRET=replace-with-your-client-secret

Configure the provider.

auth.ts
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Google],
});

Expose the route handlers. This path makes the callback /api/auth/callback/google.

app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth";

export const { GET, POST } = handlers;

Add a sign-in button.

app/page.tsx
import { signIn } from "@/auth";

export default function Home() {
  return (
    <form
      action={async () => {
        "use server";
        await signIn("google");
      }}
    >
      <button type="submit">Sign in with Google</button>
    </form>
  );
}

Start the app on port 3000.

npm run dev

Sign in through the public URL

Open https://my-app.hrzn.run in your browser. On the first visit, select Continue to site on the Before you continue page. Horizon shows this page once every 7 days per IP address. Then select Sign in with Google.

Don't start from http://localhost:3000. Your app would then send a different origin to Google.

Check it works

Google shows its account chooser. After you approve, your browser lands back on https://my-app.hrzn.run.

Your Horizon terminal prints a line for the callback. The status is a 3xx, because Auth.js redirects after it sets the session.

Output
  GET     302  /api/auth/callback/google

Troubleshooting

Google says redirect_uri_mismatch

Google returns this when the redirect_uri in the request doesn't match an authorized redirect URI for the OAuth client ID.

  • Compare Authorized redirect URIs with https://my-app.hrzn.run/api/auth/callback/google. Google says the scheme, case and trailing slash must match exactly.
  • Check that the subdomain in Google matches the one you pass to -s.
  • Wait a few minutes after you save. Google says changes can take 5 minutes to a few hours.

The redirect URI in the error contains localhost

Your app built the redirect URI from the Host header, which Horizon sets to localhost:3000. Set AUTH_TRUST_HOST=true and AUTH_URL=https://my-app.hrzn.run in .env.local. Restart npm run dev, because Next.js reads .env.local at start.

Auth.js throws an UntrustedHost error

Auth.js requires trustHost to be true because it relies on the request's host header. Set AUTH_TRUST_HOST=true in .env.local and restart npm run dev.

The URL changed after a restart

You started the tunnel without -s, so Horizon gave you a new random subdomain. Restart with -s my-app and the registered URIs stay valid. -s needs a subdomain you reserved, see Pricing.

The browser shows a Before you continue page

Horizon shows this page once every 7 days per IP address. Select Continue to site.

Nothing reaches your app

  • Check that the Horizon terminal is still running. If its last line is Connection lost. Reconnecting…, wait for Reconnected.
  • Check that the app listens on port 3000, the port in your tunnel command.

Next steps

Test GitLab OAuth login locally

Sign in with GitLab on localhost by registering a stable HTTPS Redirect URI from a Horizon tunnel, with Auth.js in Next.js.

Test Sign In with LinkedIn locally

Test Sign In with LinkedIn using OpenID Connect on localhost with a stable HTTPS redirect URL from a Horizon tunnel and Auth.js.

On this page

Before you beginStart a tunnelCreate the OAuth client in GoogleConfigure Auth.jsSign in through the public URLCheck it worksTroubleshootingGoogle says redirect_uri_mismatchThe redirect URI in the error contains localhostAuth.js throws an UntrustedHost errorThe URL changed after a restartThe browser shows a Before you continue pageNothing reaches your appNext steps