Skip to content

feat: improve Next.js auth proof flow - #299

Merged
fforootd merged 1 commit into
mainfrom
codex/add-nextjs-registerlogin-demo
Jun 15, 2026
Merged

feat: improve Next.js auth proof flow#299
fforootd merged 1 commit into
mainfrom
codex/add-nextjs-registerlogin-demo

Conversation

@fforootd

Copy link
Copy Markdown
Member

Summary

  • Scaffold a starter home page plus login, register, and profile links for fresh Next.js apps.
  • Tighten setup guidance to point at the local server, preserve framework-specific retries, and require a browser proof of register/logout/login.
  • Update journey helpers, CLI docs, and component hooks so automation can verify the signed-in profile state reliably.

Testing

  • Unit tests updated for setup guidance, Next patch planning, and renderer output.
  • Integration coverage updated for the Next setup flow and scaffolded file contents.
  • Playwright journey coverage updated to prefer visible action targets and to verify the auth flow end to end.

Copilot AI review requested due to automatic review settings June 15, 2026 21:46
@vercel

vercel Bot commented Jun 15, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nextgen Ready Ready Preview, Comment Jun 15, 2026 9:55pm

Request Review

@fforootd
fforootd force-pushed the codex/add-nextjs-registerlogin-demo branch from 6d8c89f to bd8620c Compare June 15, 2026 21:50
@fforootd fforootd changed the title Add Next.js auth proof to setup scaffolds feat: improve Next.js auth proof flow Jun 15, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR strengthens the Next.js setup scaffolds and automation/journey validation by adding a starter auth home page, improving login/register/profile proof flows, and extending component rendering copy/hooks so agents can reliably verify end-to-end auth state in a real browser.

Changes:

  • Extend the Next.js scaffold to include an auth home page and a profile page that proves session state via /__nextgen/sessions/me.
  • Update CLI setup guidance, docs, and journey automation to require a visible register → logout → login → “Signed in” profile proof.
  • Add date-of-birth placeholder/help copy support to the default Liquid template and document stable test hooks.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/components/src/orchestrator/locales/en.ts Adds date-of-birth placeholder/help strings for Liquid-rendered forms.
packages/components/src/orchestrator/liquid.spec.ts Updates Liquid template tests to cover date-of-birth placeholder/help rendering.
packages/components/README.md Documents stable test hooks (data-testid) for automation against default templates.
my-app/zitadel.json Example Zitadel project config for a Next scaffold (issuer/server/framework).
my-app/tsconfig.json Example Next/TS config for the scaffolded app.
my-app/README.md Example app README (create-next-app baseline).
my-app/public/window.svg Example scaffold static asset.
my-app/public/vercel.svg Example scaffold static asset.
my-app/public/next.svg Example scaffold static asset.
my-app/public/globe.svg Example scaffold static asset.
my-app/public/file.svg Example scaffold static asset.
my-app/proxy.ts Next 16+ request boundary proxy using nextgenMiddleware and protected /profile.
my-app/postcss.config.mjs Tailwind/PostCSS scaffold config.
my-app/package.json Example scaffold dependencies/scripts for Next + sdk-next.
my-app/next.config.ts Example Next config placeholder for scaffold.
my-app/eslint.config.mjs Scaffold ESLint config aligned with Next presets.
my-app/custom-elements.d.ts Scaffolded JSX typings for zitadel-login / zitadel-logout custom elements.
my-app/CLAUDE.md Points local agent instructions at repo-level AGENTS.md.
my-app/app/register/page.tsx Scaffolded register page using <zitadel-login purpose="register">.
my-app/app/profile/page.tsx Scaffolded profile page that fetches /__nextgen/sessions/me and renders proof state.
my-app/app/page.tsx Scaffolded auth home page linking to login/register/profile.
my-app/app/login/page.tsx Scaffolded login page using <zitadel-login purpose="login">.
my-app/app/layout.tsx Base app layout (fonts/metadata) for example scaffold.
my-app/app/globals.css Base Tailwind/global CSS scaffold.
my-app/AGENTS.md Example app agent guidance snippet for Next.
my-app/.zitadel/state.json Empty sync state scaffold under .zitadel/.
my-app/.gitignore Scaffold ignore rules incl. .zitadel/local and .zitadel/secret.
my-app/.env.example Scaffold env template including Zitadel vars and NEXT_PUBLIC_ZITADEL_PROJECT_ID.
docs/quick-start/index.md Updates quick-start to require browser proof after setup.
apps/cli/tests/unit/lib/orca/patchers/rule/next/index.test.ts Updates Next patcher unit tests for new home-page handling and nav expectations.
apps/cli/tests/unit/commands/setup/install.test.ts Asserts new “browser proof” guidance in setup next actions.
apps/cli/tests/unit/commands/setup/index.test.ts Adds/updates setup pre-flight guidance assertions (framework preserved in local retry).
apps/cli/tests/integration/setup-next.test.ts Extends integration coverage to validate scaffolded file contents and proof guidance.
apps/cli/src/lib/orca/patchers/types.ts Adds scaffoldedFramework to patch context.
apps/cli/src/lib/orca/patchers/rule/next/renderers/react/index.ts Updates generated Next React templates (nav link + profile proof fetch).
apps/cli/src/lib/orca/patchers/rule/next/index.ts Adds home page into Next patcher file set and conditionally overwrites starter page on fresh scaffolds.
apps/cli/src/commands/setup/install.ts Adds explicit browser auth proof instructions to setup outcomes.
apps/cli/src/commands/setup/index.ts Improves local-server-not-running guidance to preserve framework in retry commands; plumbs scaffold state.
apps/cli/SKILLS.md Updates agent contract: require visible browser auth proof + stable DOM hooks.
apps/cli/README.md Updates CLI docs to reflect new scaffold pages and proof requirements.
apps/cli-journey-e2e/src/user-journey.spec.ts Makes action clicking prefer visible, stable test hook targets to reduce flakiness.
.changeset/lean-agent-auth-proof.md Changeset for @zitadel/cli (minor) and @zitadel/components (patch).

Comment on lines 124 to +128
"register.field.givenName": "Given name",
"register.field.familyName": "Family name",
"register.field.dateOfBirth": "Date of birth",
"register.field.dateOfBirth.placeholder": "YYYY-MM-DD",
"register.field.dateOfBirth.help": "Use YYYY-MM-DD.",
Comment thread apps/cli/src/commands/setup/install.ts Outdated
Comment on lines 107 to 110
const startAction = `Start your project: ${input.devCommand} (then open ${input.issuer}/login)`;
const verifyAction =
"Verify auth in the browser: register a user, log out, log in again with the same user, and confirm /profile shows Signed in.";
return {
@fforootd
fforootd force-pushed the codex/add-nextjs-registerlogin-demo branch from bd8620c to 93f0e8f Compare June 15, 2026 21:54
@fforootd
fforootd merged commit f77ca44 into main Jun 15, 2026
35 of 37 checks passed
@fforootd
fforootd deleted the codex/add-nextjs-registerlogin-demo branch June 15, 2026 22:11
fforootd pushed a commit that referenced this pull request Jun 15, 2026
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @zitadel/cli@0.1.0-alpha.5

### Minor Changes

- [#257](#257)
[`6f8dd2d`](6f8dd2d)
Thanks [@mridang](https://github.com/mridang)! - Add `setup --framework
react|vue|angular|nuxt` support to the CLI. Each framework scaffolds its
auth entry/pages and wires `/__nextgen/*` calls to the backend with a
`sk_<project_id>` bearer attached: React and Vue get a dev proxy
magicast-merged into the Vite config (`vite.config.*`) that reads the
project id from `ZITADEL_PROJECT_ID`; Angular gets a `proxy.conf.cjs`
wired into `angular.json` that reads it from `zitadel.json`; and Nuxt
registers the `@zitadel/sdk-nuxt` module in the Nuxt config
(`nuxt.config.*`), which adds the proxy via server middleware. A
`--dev-port` flag sets the scaffolded dev-server port.

- [#299](#299)
[`f77ca44`](f77ca44)
Thanks [@fforootd](https://github.com/fforootd)! - Make the generated
Next.js auth app easier for agents and developers to prove end-to-end
registration, logout, and login in a visible browser.

### Patch Changes

- [#295](#295)
[`f02718f`](f02718f)
Thanks [@fforootd](https://github.com/fforootd)! - Allow fresh app
scaffolding after `zitadel start` creates local runtime ignore files,
and load Nuxt runtime config through the Nuxt virtual imports module.

- Updated dependencies []:
  - @zitadel/api@0.1.0-alpha.5
## @zitadel/components@0.1.0-alpha.5

### Patch Changes

- [#299](#299)
[`f77ca44`](f77ca44)
Thanks [@fforootd](https://github.com/fforootd)! - Make the generated
Next.js auth app easier for agents and developers to prove end-to-end
registration, logout, and login in a visible browser.

- [#286](#286)
[`3795b67`](3795b67)
Thanks [@bastionstack](https://github.com/bastionstack)! - Align the
login flow with the latest Figma designs: load `branding.font_url` at
document level so branded fonts (including the heading face) actually
render, change the sign-in CTA from "Continue" to "Sign in", add the
missing `identifier.field.password` label, drop the sign-up subheadline,
and rename the passkey registration action to "Continue with a passkey".
The default login flow no longer shows the post-registration passkey
upsell screen — passkey registration is offered up front instead.
## @zitadel/sdk-angular@0.1.0-alpha.5

### Patch Changes

- Updated dependencies
[[`f77ca44`](f77ca44),
[`3795b67`](3795b67)]:
  - @zitadel/components@0.1.0-alpha.5
  - @zitadel/api@0.1.0-alpha.5
## @zitadel/sdk-next@0.1.0-alpha.5

### Patch Changes

- Updated dependencies
[[`f77ca44`](f77ca44),
[`3795b67`](3795b67)]:
  - @zitadel/components@0.1.0-alpha.5
  - @zitadel/api@0.1.0-alpha.5
  - @zitadel/sdk-core@0.1.0-alpha.5
## @zitadel/sdk-nuxt@0.1.0-alpha.5

### Patch Changes

- [#295](#295)
[`f02718f`](f02718f)
Thanks [@fforootd](https://github.com/fforootd)! - Allow fresh app
scaffolding after `zitadel start` creates local runtime ignore files,
and load Nuxt runtime config through the Nuxt virtual imports module.

- Updated dependencies
[[`f77ca44`](f77ca44),
[`3795b67`](3795b67)]:
  - @zitadel/components@0.1.0-alpha.5
  - @zitadel/api@0.1.0-alpha.5
  - @zitadel/sdk-core@0.1.0-alpha.5
## @zitadel/sdk-react@0.1.0-alpha.5

### Patch Changes

- Updated dependencies
[[`f77ca44`](f77ca44),
[`3795b67`](3795b67)]:
  - @zitadel/components@0.1.0-alpha.5
  - @zitadel/api@0.1.0-alpha.5
  - @zitadel/sdk-core@0.1.0-alpha.5
## @zitadel/sdk-vue@0.1.0-alpha.5

### Patch Changes

- Updated dependencies
[[`f77ca44`](f77ca44),
[`3795b67`](3795b67)]:
  - @zitadel/components@0.1.0-alpha.5
  - @zitadel/api@0.1.0-alpha.5
  - @zitadel/sdk-core@0.1.0-alpha.5
## @zitadel/api@0.1.0-alpha.5


## @zitadel/sdk-core@0.1.0-alpha.5

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
vitorbari added a commit that referenced this pull request Jun 16, 2026
One conflict in liquid.spec.ts: main's #299 added a dateOfBirth field
to the sign-up render test. Extended the local toArray builder to
include it; the array-form context wins, the new field carries.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants