Handling Authentication Across Multiple Pages (Persisting Token + Role Guards)

Ask us anything
1

Hey everyone,

I’m working on an app where users log in through a Xano backend. I’ve got a login flow that works:

  • I send email/password to my Xano /auth/login endpoint.

  • The token returned gets stored in localStorage and mirrored into a WeWeb variable (authToken).

  • I also fetch /auth/me to grab user details and figure out which portal (student, scheduler, executive, etc.) they should land on.

That part works fine.

The problem: once the user navigates to another page, the other pages don’t seem to “know” they’re authenticated. The token exists in localStorage, but unless I explicitly re-sync or re-validate it, the page just acts as if the user isn’t logged in. That forces me to add a guard/check on each page load, which feels a little clunky and it still does not work.

So right now I’ve got:

  • A global auth utility that stores and clears the token.

  • A login workflow that sets both localStorage and a WeWeb variable.

  • An app-level init workflow to reload the token on refresh.

  • Page-level guards that check the token against /auth/me and redirect based on role.

My question:
Is there a simpler or more “native” way to persist authentication and enforce role-based access across pages in WeWeb, without manually handling localStorage + variables + guards on every page?

Would love to hear how others are structuring this — especially if you’ve got a cleaner pattern for:

  • Persisting tokens across navigation

  • Automatically attaching Authorization: Bearer … headers

  • Protecting pages by role without copy/pasting guard logic

Thanks in advance for any insights!

2

Hi Brian, welcome to the community :waving_hand:

There’s no fully “native” one-click solution for seamless auth persistence + role guards, but your flow is actually pretty close to best practice.

Instead of duplicating guard logic everywhere, could you centralize your auth check in a global init or layout page, and auto-redirect if not authenticated? That way, each page doesn’t need manual checks, just inherits from your main wrapper logic.

Also, make sure your API client grabs the token from storage on all requests, so headers stay in sync.

Would be curious to hear if other users have clever patterns to share!