Test Sign in with Apple locally

Test Sign in with Apple on your laptop. Apple needs a public HTTPS domain and Return URL, and a Horizon tunnel provides both.

Auth.js's Apple docs state it plainly: "Apple does not support localhost/http URLs. You can only use a live URL with HTTPS." A reserved Horizon subdomain is a live HTTPS URL that stays the same across restarts.

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)
• An Apple Developer account with access to Certificates, Identifiers & Profiles
• An App ID to use as the primary App ID for your website

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 add apple

npx auth secret

AUTH_SECRET=replace-with-the-generated-secret
AUTH_URL=https://my-app.hrzn.run
AUTH_TRUST_HOST=true
AUTH_APPLE_ID=replace-with-your-services-id-identifier
AUTH_APPLE_SECRET=replace-with-the-generated-jwt

import NextAuth from "next-auth";
import Apple from "next-auth/providers/apple";

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

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

npm run dev

Check it worksCopy Anchor Link

Apple shows its sign-in page. After you approve, your browser lands back on https://my-app.hrzn.run.

Your Horizon terminal prints a line ending in the callback path.

  /api/auth/callback/apple

Apple returns the user's email and name only the first time the user consents to the app, according to Auth.js. A second sign-in test returns no name.

TroubleshootingCopy Anchor Link

Apple rejects localhost or an http URLCopy Anchor Link

Apple doesn't accept localhost or http in Domains and Subdomains or Return URLs, and a 127.0.0.1 address fails later in the flow. Use my-app.hrzn.run and the https:// Return URL from step 2.

Apple returns an error after you approveCopy Anchor Link

• Compare Return URLs with https://my-app.hrzn.run/api/auth/callback/apple. Check the scheme, host and path.
• Check that Domains and Subdomains holds my-app.hrzn.run.
• Check that AUTH_APPLE_ID is the Services ID identifier, not the App ID.
• Check that you restarted npm run dev after editing .env.local.

The redirect URI in the request 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.

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. Apple still holds the old domain and Return URL. Restart with -s my-app. -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 Apple's guide to configuring Sign in with Apple for the web.