Skip to content

Upgrade example app to Next.js 16, React 19, and AuthKit v4 - #75

Draft
Rmole57 wants to merge 1 commit into
mainfrom
rick-upgrade-to-next-16
Draft

Upgrade example app to Next.js 16, React 19, and AuthKit v4#75
Rmole57 wants to merge 1 commit into
mainfrom
rick-upgrade-to-next-16

Conversation

@Rmole57

@Rmole57 Rmole57 commented Jul 29, 2026

Copy link
Copy Markdown

Summary

Upgrades the example app from Next.js 14.1.4 to 16.2.12, which pulls React 19 and
majors of both WorkOS SDKs along with it. All required migrations are applied here.

Dependencies

Package From To
next 14.1.4 16.2.12
react / react-dom ^18 ^19.2.0
@workos-inc/authkit-nextjs 0.4.2 ^4.3.0
@workos-inc/node ^6.7.0 ^10.8.0
eslint ^8 ^9
eslint-config-next 14.1.4 16.2.12
@types/react / @types/react-dom ^18 ^19

Breaking changes handled

Next.js 16

  • src/middleware.tssrc/proxy.ts, authkitMiddlewareauthkitProxy. Next 16 errors (E900) if both files exist.
  • Async request APIs are no longer available synchronously: searchParams is now Promise<…> in 7 pages, and cookies() is awaited in with-session/auth.ts. reset-password/page.tsx is a Client Component, so it unwraps via use(searchParams).
  • next lint was removed: .eslintrc.jsoneslint.config.mjs (flat config), lint script is now plain eslint.
  • tsconfig: target es5ES2017; Next's build also requires jsx: react-jsx and adds .next/dev/types.

React 19

  • useFormState (react-dom) → useActionState (react) across 8 components.

authkit-nextjs v4

  • getUser()withAuth(); added the now-required AuthKitProvider to the root layout.
  • Renamed WORKOS_REDIRECT_URINEXT_PUBLIC_WORKOS_REDIRECT_URI in .env.local.example and in using-hosted-authkit/README.md. v4 reads only the prefixed name.
  • getSignInUrl() writes a PKCE cookie, so Next 16 forbids calling it during render. The with-nextjs example now signs in via a POST Server Action instead of an <a href>.

@workos-inc/node v10

  • workos.mfaworkos.multiFactorAuth; userManagement.enrollAuthFactormultiFactorAuth.createUserAuthFactor; sendMagicAuthCodecreateMagicAuth.

Behavior change worth a look

sendPasswordResetEmail is gone. Its replacement, createPasswordReset, dropped the passwordResetUrl input and no longer sends an email — it mints the token and returns it, so delivery is now the application's responsibility. The example renders a labelled link to keep the flow clickable, and comments on why a real app must email the token instead. This is the one place where the example demonstrates something different than before, so it may warrant a product call rather than just a mechanical migration.

Also in this PR

  • Switched to npm as the single package manager: yarn.lock removed, package-lock.json added, README install step updated. The committed yarn.lock was in Yarn Berry format while Yarn 1 is what most environments resolve, so installs had been rewriting it inconsistently.
  • Added JWT_SECRET_KEY to .env.local.example — the with-session example already required it but it was undocumented.

Upgrading an existing local checkout

Only one step isn't covered by this PR, because the file is gitignored: rename WORKOS_REDIRECT_URI to NEXT_PUBLIC_WORKOS_REDIRECT_URI in your own .env.local (the value is unchanged). The old name is silently ignored, so auth fails with no clear error.

Testing

  • tsc --noEmit clean
  • eslint clean
  • next build green — 29/29 routes, proxy.ts detected
  • Dev smoke test: routes return 200; the reset-password flow renders correctly with and without a token

@Rmole57 Rmole57 self-assigned this Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant