Let’s say the user is logged in and hasn’t logged out.
They just start typing in the address bar “app.mysite.com”. Though they’re logged in, they’re taken to the app.mysite.com page, which shows the login screen. Please note that I can see their auth state in Xano is TRUE at this point, and am able to redirect them using a “On page load (before fetching collections)” workflow where I check their Xano auth state and redirect them to /home if logged in. But the user sees the app.mysite.com (login page) briefly before the redirect happens - which is a subpar UX. Could someone help me achieve this - as soon as the URL is typed in, check for user’s auth state and redirect them directly to the /home page if they’re logged in?
There are a few techniques, but these two are most common:
Make the login page a different page. Make the home page your “dashboard”. Have people come to the home page, and have that page bounce them to the login page when they are not logged in as part of the authorization check.
Make the login page the home page, but on page load, run an authentication check and redirect the user to the main “dashboard” page or what have you if they are logged in.
In truth, both of these are about the same underlying a mechanic: a check on page load that asks, “do you belong here”. They just handle it in opposite ways.
I think what you’ve suggested with the second approach is what I’ve already done? However, WeWeb shows the logged-in user the login page before redirecting to the /home page, which I feel is suboptimal UX. Attaching a screenshot to share how I’ve set this up (so someone can point if I’ve done it wrong).
I thought the “Page loader” (in the above screenshot) being shown before the auth check was an issue, so I removed. But that didn’t solve it either. I also tried doing this workflow “On page load” instead of “On page load before fetching collections”. No luck with that one.
Lastly, I also tried the first approach you’ve suggested. It resulted in the same issue. Home page is shown for a flash second, before redirecting the user to login page.
Basically what you have is a sequencing problem. You are 1) loading the page 2) making an authentication check (via auth/me) and 3) redirecting based on the result. Because (2) takes time, you see the flash.
This experience is very common in authenticated apps, because there is a period of time in which you are on the “wrong page.” Many apps live with this experience.
However, it’s not inevitable. You can put a page loader div (like a curtain that has your brand logo or what have you, 100vw height and width, position fixed) over your page that displays by default and is removed if this is the page you’re supposed to be on. So if you start from the login screen, the login screen just shows your brand glowing or something and then sends you where you should go. If you are supposed to be on that page, just hide the div. This is logically like the page loader but more under your control so that you can dial in the experience you want for the users in the 500ms between when they open the page and when they get sent to the right place.
Another thing you can do is introduce a check for whether the xano auth key is present in cookies. That would let your page determine faster whether it needs to change position. That might require a little JS, but would make the time showing the “wrong” page go down by a lot in most circumstances.
Like a lot of UX questions, this is about feel and your judgment. Try some approaches to dial in the experience that is right for your customers!
