Summary
Support Next.js as a first-class target for this package.
Framing
Next.js is React, so this does not require a new framework binding and does not depend on the core extraction in #64. It is an SSR-safety and entry-point problem inside this repo, which makes it the cheapest of the planned framework targets. It should land before any non-React adapter work.
Scope
1. Client boundaries
Add 'use client' directives to the modules that own browser state and effects: AuthProvider, the hooks, AuthRoutes, the views, and the components.
Gotcha to verify: bundlers commonly strip or hoist directives. Confirm the rollup build preserves 'use client' in dist, since a directive that does not survive the build is worse than none (it fails at the consumer, not in CI). This may require a rollup plugin or an output banner, plus a check in check-npm-build.
2. SSR-safe module evaluation
No window, document, localStorage, or sessionStorage access at import time or during render. Audit result of current code:
3. Server-side session validation (optional, higher value)
Next can read the httpOnly session cookie on the server. That enables validating the session during SSR instead of a client-side /users/me round trip after hydration, which removes the authenticated-content flash, and enables middleware-based route protection. This is a genuine improvement over the browser-only model and is worth designing deliberately rather than porting the client flow as-is.
4. Docs and example
An App Router example showing provider placement, route protection, and the callback route. Note that AuthRoutes assumes a react-router tree, so a Next.js app will typically use AuthProvider plus custom UI rather than the bundled routes. That gap should be documented explicitly.
Open questions
- Ship Next.js support from this package (an export path such as
@seamless-auth/react/next), or as a separate @seamless-auth/nextjs package?
- Does App Router plus Pages Router both need support, or App Router only?
Related
Summary
Support Next.js as a first-class target for this package.
Framing
Next.js is React, so this does not require a new framework binding and does not depend on the core extraction in #64. It is an SSR-safety and entry-point problem inside this repo, which makes it the cheapest of the planned framework targets. It should land before any non-React adapter work.
Scope
1. Client boundaries
Add
'use client'directives to the modules that own browser state and effects:AuthProvider, the hooks,AuthRoutes, the views, and the components.Gotcha to verify: bundlers commonly strip or hoist directives. Confirm the rollup build preserves
'use client'indist, since a directive that does not survive the build is worse than none (it fails at the consumer, not in CI). This may require a rollup plugin or an output banner, plus a check incheck-npm-build.2. SSR-safe module evaluation
No
window,document,localStorage, orsessionStorageaccess at import time or during render. Audit result of current code:usePreviousSignIn: readslocalStorageinsideuseEffect, safeOAuthProviderButtons:sessionStorageinside an event handler, safeLogin: readswindow.location.searchinsideuseEffect, safewebauthnSupport.isPlatformAuthenticatorAvailable: unguardedwindowaccess, see isPlatformAuthenticatorAvailable throws during server-side rendering #773. Server-side session validation (optional, higher value)
Next can read the httpOnly session cookie on the server. That enables validating the session during SSR instead of a client-side
/users/meround trip after hydration, which removes the authenticated-content flash, and enables middleware-based route protection. This is a genuine improvement over the browser-only model and is worth designing deliberately rather than porting the client flow as-is.4. Docs and example
An App Router example showing provider placement, route protection, and the callback route. Note that
AuthRoutesassumes a react-router tree, so a Next.js app will typically useAuthProviderplus custom UI rather than the bundled routes. That gap should be documented explicitly.Open questions
@seamless-auth/react/next), or as a separate@seamless-auth/nextjspackage?Related