Conditional "show" item based on local storage

JJeremy

Is there a way to access cookies or local storage items within an expression tied to the "show" toggle?

Here's what I would like to be able to do:
system.localStorage.isLoggedIn === "true"

If there's a better way, I'm open to ideas.

33 comments

OOleg Isonen

not at the moment, localStorage is purely client-side api, where expressions are universally running everywhere

OOleg Isonen

need to start with the use case to see if it can be done and how

JJeremy

My use case:
I've got user authentication login/logout working using Appwrite in WS. I'm trying to "show" the "logout" button with an expression.

JJeremy

I've created a data variable, "getAccount," that connects to my users account. I've tried using that in my expression to show/hide the logout button. In the attached images, you can see the logout button changes but this isn't reflected on the front-end when I log in.

OOleg Isonen

basically login/logout depending on the state?

OOleg Isonen

Here is what we do for example on our landing. This allows us to swap the text from "Start for free" to "Dashboard"

Plain Text

<!-- Swap the "Sign in" if visitor has clicked before. -->
<script type="module">
  document.body.addEventListener('click', (event) => {
    const link = event.target.closest('a');
    if (link) {
      const href = link.getAttribute('href');
      if (href && href.includes('/dashboard')) {
        try {
          localStorage.setItem('__webstudio__logged_in_before', true);
        } catch {}
      }
    }
  }, {passive: true, capture: true});

  requestAnimationFrame(() => {
    try {
      const loggedInBefore = localStorage.getItem('__webstudio__logged_in_before')
      if (loggedInBefore) {
        const element = document.querySelector(".sign-in");
        element.textContent = element.dataset.signedInText;
      }
    } catch(error) {
      console.error(error);
    }  
  }) 
</script>

JJeremy

@Oleg Isonen, just to confirm—your snippet is mainly for swapping the button text dynamically, right? If I wanted to show/hide a section on the page based on authentication (like an authenticated-only section), I’d need to use JS to remove it manually, rather than relying on the “Show” toggle with an expression?

Also, this method wouldn’t work for restricting access to an entire page for unauthenticated users, correct? I’d need another approach for that.

OOleg Isonen

yes, because toggle show works with expressions and expressions can't access local storage

OOleg Isonen

if your content is fetched using Resource - then it would technically still fetch it if user disables javascript, so its not fully secure.

problem is that you authenticate on the client but resource knows nothing about it

We need to work on this very soon.

For now there are only options:

Pseudo-secure, using js to disallow accessing restricted area. Ok for not sensitive data
Secure but 100% client-side: auth and data fetching. Rendering is tricky that way, more like a hack, but not impossible

OOleg Isonen

Actually there is a secure method right now, but that would require a backend:

client-side auth
token passed to resource via url query param
backend validates the token and provides a response

OOleg Isonen

Search for "webtoken"

JJeremy

Thank you @Oleg Isonen! I can write an appwrite function to handle client-side auth. I will try this out and post any progress in this discussion.

Your couple of replies has got me further than hours of me using AI.

JJeremy

Hi, Oleg. I'm missing part of the puzzle. Can you correct me if I'm thinking of this wrong?

I wrote a Appwrite function to

I was able to send/receive JWT using my backend function, but I'm not exactly sure what you mean with "token passed to resource via url query param". Should I be using a Webstudio form element and then the {system.params} from it?

OOleg Isonen

well your resourece needs to pass the token from the client to your backend

OOleg Isonen

the easierst way would be to use query parameter and add it in your request

OOleg Isonen

how it gets into query param is potentially multiple ways

OOleg Isonen

you could use a form with a hidden input or you could just set it with js

JJeremy

"how it gets into query param is potentially multiple ways" - is there a "best practices" or recommended preference?

OOleg Isonen

well if form works for you that would be probably ideal

OOleg Isonen

in the end you still need to set the input value with js

OOleg Isonen

I am not sure when is the point where you are getting the token

OOleg Isonen

its probably after you already submitted the form

OOleg Isonen

so to set it with the form you need another form I guess, in that case form isn't practical

JJeremy

Yeah, it's after I've submit the intial form POST. Then on page refresh it maintains the fetched item.

OOleg Isonen

right so its all in js and you will need to check if the token is in the query and set it

OOleg Isonen

I think you will want to do this with js

OOleg Isonen

but not sure

JJeremy

I got far after your suggestion yesterday but maxed out my AI prompting skills and kept getting into AI loops.

I saved a state where I could login/out (when published) and it would record my session in the backend and return the tokens. I'll go back to that state and try again with this extra info that you've given, thanks.

OOleg Isonen

what are you using?

OOleg Isonen

which ai

JJeremy

I've been using 3. Claude, GPT and a combo within Windsurf.

I find my best results come when I create a repo with document files and rules it can reference. It's also helpful to save versions of the code changes so I can go back if needed.

OOleg Isonen

this is good yes

OOleg Isonen

gpt for advanced planing questions, claude for specific code if gpt doesn't do well

Add a reply

Join the Webstudio community

Conditional "show" item based on local storage