Skip to content

Auth layouts and login pages

Use Demo Projects HQ to see why login pages use a different layout from the main app shell.

Login-style pages usually need a tighter frame than the main app. Demo Projects HQ shows that split clearly with a dedicated auth layout and a separate routed login page.

The main app shell serves authenticated screens.
The auth shell keeps login and similar pages focused.
The routed login page reuses the auth shell instead of rebuilding it inline.

This topic only makes sense if you separate the shell from the routed page itself. Pages Manager gives you both views in one place: layouts in their folder, then the actual login page at the Pages root.

Layouts define the wrapper.
Root pages define the actual destination.
Auth flows usually need both pieces.

Start in layouts so you can inspect the dedicated auth shell before jumping into the login page that uses it. This makes the relationship between wrapper and destination explicit.

auth.ejs is the reusable shell for access-related pages. Its job is to provide just enough framing for login and similar screens without carrying the whole signed-in application experience.

Use a focused shell for login and onboarding gates.
Keep full application navigation out of pre-login screens.
Reuse the shell across related auth pages when needed.

After inspecting the shell, go back to the real Pages root so the login destination page becomes visible. That shift is the core mental model: shell first, destination second.

login.ejs is the actual routed page users visit. It owns the login form and action wiring, while the auth layout supplies the wrapper around it.

The page owns the form and submit behavior.
The layout owns the surrounding shell.
Keeping those concerns separate makes auth flows easier to maintain.

Opening login.ejs is the right handoff into the login walkthrough. From there, the form wiring, submit action, and shared security provider all become visible in context.

The maintainable auth pattern is a dedicated shell plus a dedicated login destination page. That keeps access flows focused while still making the login form and security wiring easy to inspect in the editor.

Keep the auth wrapper reusable.
Keep the login page responsible for the form flow.
Continue into the login walkthrough for the concrete implementation details.