Test Facebook Login locally

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

Before you beginCopy Anchor Link

• 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 Facebook app with the Facebook Login product added. Use a dedicated development app, as Auth.js recommends for non-production testing.

hrzn tunnel http://localhost:3000 -s my-app

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

npx auth secret

AUTH_SECRET=replace-with-the-generated-secret
AUTH_URL=https://my-app.hrzn.run
AUTH_TRUST_HOST=true
AUTH_FACEBOOK_ID=replace-with-your-app-id
AUTH_FACEBOOK_SECRET=replace-with-your-app-secret

import NextAuth from "next-auth";
import Facebook from "next-auth/providers/facebook";

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

import { handlers } from "@/auth";

export const { GET, POST } = handlers;

import { signIn } from "@/auth";

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

npm run dev

Check it worksCopy Anchor Link

Facebook shows its login dialog. 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.

  GET     302  /api/auth/callback/facebook

Auth.js notes that the email can be missing for accounts created on mobile.

TroubleshootingCopy Anchor Link

URL Blocked: This redirect failed because the redirect URI is not whitelistedCopy Anchor Link

Facebook shows this message when the redirect URI isn't in your app's Client OAuth Settings.

• Compare Valid OAuth Redirect URIs with https://my-app.hrzn.run/api/auth/callback/facebook. The match is exact.
• Check that Client OAuth Login and Web OAuth Login are on.
• Check that App domains holds my-app.hrzn.run.
• Check that the subdomain in Facebook matches the one you pass to -s.

The redirect URI in the error contains localhostCopy Anchor Link

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 errorCopy Anchor Link

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 restartCopy Anchor Link

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

The browser shows a Before you continue pageCopy Anchor Link

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

Nothing reaches your appCopy Anchor Link

• 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 stepsCopy Anchor Link

• Read the shared notes on OAuth redirect URLs and the Auth.js guide.
• Read Facebook's Login Security guide.