Test Sign In with LinkedIn locally

Sign in with LinkedIn on your laptop while LinkedIn 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 LinkedIn Developer Portal app

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_LINKEDIN_ID=replace-with-your-client-id
AUTH_LINKEDIN_SECRET=replace-with-your-client-secret

import NextAuth from "next-auth";
import LinkedIn from "next-auth/providers/linkedin";

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

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("linkedin");
      }}
    >
      <button type="submit">Sign in with LinkedIn</button>
    </form>
  );
}

npm run dev

Check it worksCopy Anchor Link

LinkedIn shows its sign-in and consent screen. After you select Allow, 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/linkedin

LinkedIn says the email and email_verified fields are optional and may be missing from a response.

TroubleshootingCopy Anchor Link

LinkedIn returns "Redirect_uri doesn't match"Copy Anchor Link

LinkedIn answers with a 401 when the redirect URI in the request doesn't match the one in your developer app.

• Compare Authorized redirect URLs for your app with https://my-app.hrzn.run/api/auth/callback/linkedin.
• Check that the subdomain in LinkedIn 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.

LinkedIn returns "Invalid scope"Copy Anchor Link

The app doesn't have the permissions in the request. Check the Products tab and the Auth tab for Sign in with LinkedIn using OpenID Connect.

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 URL 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 LinkedIn's guide to Sign In with LinkedIn using OpenID Connect.