feat(builder): configurable login button on public pages

[NDCallahan]

Description

This PR introduces a login action to the app navigation for users who are not logged in (public users). It also adds a navigation setting that allows admins to control whether the login action is displayed.

Previously, logged-out users had no login entry point in the navigation area, while logged-in users had access to the user menu (including logout). With this change, the navigation experience is more consistent and configurable for both logged-in and logged-out users.

Additionally, when logged out and viewing a public page that has private data, a session banner will display alerting the user they will need to log in to view the data not available on public screen. This notification can be dismissed.

Note: This PR does not include translation updates for the login text. Translation support should be added in the future for consistency, but that is a PRO feature and outside the scope of this PR.

This update improves usability for public users and gives admins more control over navigation behavior.

Addresses

• Login button on public pages #18113

App Export

feat(builder)-configurable login button on public pages.tar.gz

Screenshots

login-button-on-public-pages_.mp4

Launchcontrol

This PR adds an optional login button to public app navigation so users can sign in directly from the nav. App builders can now toggle this on or off in navigation settings, without affecting the existing logged-in user menu behavior.

---

Summary by cubic

Adds a configurable Log in button to public app navigation and a dismissible session banner on 401/403 with a Login CTA. Unifies login redirects to keep the full return URL (including query params and hash).

• New Features

  • Navigation setting: "Show log in" (default on), saved as AppNavigation.showLoginButton and merged from app + builder settings.
  • Logged-out public view shows a standalone "Log in" button in UserMenu; hidden when embedded; devtools public preview hides the user menu and shows this button; uses redirectToLoginWithReturnUrl.
  • SessionAuthBanner shows on 401/403 with a Login CTA and dismiss; auto-clears on screen change.

• Bug Fixes

  • Preserve showLoginButton when merging navigation settings.
  • Show "Log in" text when navigation is horizontal.

^{Written for commit 08533a8. Summary will update on new commits.}

[cubic-dev-ai]

1 issue found across 5 files

Confidence score: 3/5

• There is a concrete user-facing risk: packages/client/src/components/app/UserMenu.svelte drops window.location.search when persisting the login return URL, so deep links or stateful query params won’t survive authentication.
• Given the medium severity and high confidence of the issue, this is some risk despite being localized.
• Pay close attention to packages/client/src/components/app/UserMenu.svelte - return URL should preserve query parameters.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/client/src/components/app/UserMenu.svelte">

<violation number="1" location="packages/client/src/components/app/UserMenu.svelte:75">
P2: Login return URL persistence drops query parameters by omitting `window.location.search`, causing stateful/deep-link URLs to break after authentication.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[melohagan]

I wonder if it would make more sense to have a banner in this scenario instead of the error toast ?

So along the top:

Session not authenticated [Login]

[NDCallahan]

I agree. I dislike that it presents as an error when on a public page and something that is private triggers the error. Let me check if I can modify that logic. I didn’t touch anything with that; I left it as it was.

[cubic-dev-ai]

1 issue found across 8 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/client/src/components/app/Layout.svelte">

<violation number="1" location="packages/client/src/components/app/Layout.svelte:5">
P2: `Constants` is still used in the nav role filter, but the import was removed. This will leave `Constants` undefined and break compilation.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[NDCallahan]

How's this @melohagan?

here's an updated video.

login-button-on-public-pages_.mp4

[melohagan]

How's this @melohagan?

here's an updated video.

login-button-on-public-pages_.mp4

Thanks Nate - I was thinking more you could re-use, or create something in the same style as the existing banner that's used for the free-trial perhaps?

In this case it would be a warning orange instead of blue, and the View plans button would be Login. The message would still be Session not authenticated as before.

It might conflict a little with the user-defined app banner, but it should slide down above it, so you may have two banners in that scenario which is fine.

[NDCallahan]

Ah! Okay! I will adjust! 😊

[NDCallahan]

How's this @melohagan?
here's an updated video.
login-button-on-public-pages_.mp4

Thanks Nate - I was thinking more you could re-use, or create something in the same style as the existing banner that's used for the free-trial perhaps?

In this case it would be a warning orange instead of blue, and the `View plans` button would be `Login`. The message would still be `Session not authenticated` as before.

It might conflict a little with the user-defined app banner, but it should slide down above it, so you may have two banners in that scenario which is fine.

how's this?

login-button-on-public-pages-trial-like-banner.mp4

[NDCallahan]

Updated: Added close functionality to dismiss if wanted. We can remove it if you don't think it belongs. :)

[NDCallahan]

One check I may need help with is if the Trial banner remains as it was. I'm not sure how to flag that to test?

[melohagan]

Hey @NDCallahan Had a play around locally, and it's really nice 👌

The only remaining thing would be the login button. I wouldn't have a dropdown list as there is only one option, instead make a button that looks like the dropdown item.

[NDCallahan]

Here we go! :)

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/client/src/components/app/UserMenu.svelte">

<violation number="1" location="packages/client/src/components/app/UserMenu.svelte:161">
P2: Logged-out login button no longer respects `compact`, causing compact nav layouts to render the full "Log in" text instead of icon-only.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 5 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="hosting/docker-compose.dev.yaml">

<violation number="1">
P2: `litellm-db` in dev compose is non-persistent despite `STORE_MODEL_IN_DB=True`, causing LiteLLM model/config state loss when the Postgres container is recreated.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[melohagan]

Great work - looks very nice!

I think there is one last change needed. In the preview, we should not show the "Session unauthenticated" banner (only for live apps).

Additionally, it would be nice to show the Log in button within the preview when you select View as public user. Currently it shows the current user context menu which doesn't match the live app:

[NDCallahan]

@melohagan - Is there something that I'm missing? I'm not seeing other functions that would stop from being shown in preview mode. I can create a new function(perhaps file) to handle it, but I feel like I'm just missing where else this is used that I could tie into to stop it from displaying in preview mode.

[melohagan]

@melohagan - Is there something that I'm missing? I'm not seeing other functions that would stop from being shown in preview mode. I can create a new function(perhaps file) to handle it, but I feel like I'm just missing where else this is used that I could tie into to stop it from displaying in preview mode.

Hey Nate,

I think this might help:

$previewStore.showPreview // true means the preview is showing

[cubic-dev-ai]

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="hosting/docker-compose.yaml">

<violation number="1" location="hosting/docker-compose.yaml:108">
P1: Unresolved Git merge conflict markers in docker-compose file make the YAML invalid and block Docker Compose startup.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}