auth and show/hide

Miles · 2024-09-12T12:00:42.001+00:00

Hi guys , I'm struggling with being able to show/hide elements based on the user auth api response. A simple example is I'd like to show the log in button if the user is not authenticated, and hide it if they are (and show the log out button). The current setup is I have an auth wrapper that hold the API request, and sets variables for if the request was successfull "auth-success". But I'm stuck with being able to show/hide other elements on the page (and in other components on the page like the nav bar) based on this. I believe this is because the data and variables are encapsulated within the component. This is obviously a common and basic feature but I'm stumped. Attached an image of the current structure. There are elements I'd like to show/hide within the header component also. This structure might be completely wrong Any help is appreciated. TIA

Miles
1 year ago
Hi guys 👋 ,

I'm struggling with being able to show/hide elements based on the user auth api response. A simple example is I'd like to show the log in button if the user is not authenticated, and hide it if they are (and show the log out button).

The current setup is I have an auth wrapper that hold the API request, and sets variables for if the request was successfull "auth-success". But I'm stuck with being able to show/hide other elements on the page (and in other components on the page like the nav bar) based on this. I believe this is because the data and variables are encapsulated within the component.

This is obviously a common and basic feature but I'm stumped.

Attached an image of the current structure. There are elements I'd like to show/hide within the header component also. This structure might be completely wrong 😂

Any help is appreciated.

TIA 🙏
Tod
1 year ago
Great energy @Miles! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Tom Ireland
1 year ago
Hey, Miles. You’d need to trigger an event from the component to send the variable state back to the page and then you should be able to set show/hide based on that value.
Tom Ireland
1 year ago
If you’re doing the auth check on load, you can probably do that in the same workflow where you’re making the API call. On the page, you need to get the event output from the wrapper component to set the state for the other components.

There’s a few different ways you can probably do it but just thinking off the top of my head and not sure on best practice for that.
Tom Ireland
1 year ago
I just do a redirect to login if not authenticated.l but it depends on your use-case. That results in content flash, which isn’t great and reminds me I need to sort that out.
Miles
1 year ago
got it thanks. I need to learn a bit more about events. Thanks 🙂
👍1
Tom Ireland
1 year ago
https://docs.nordcraft.com is a good start.
🙏1
Miles
1 year ago
Cool. I've set this up. But I am also seeing content flashing for my log in button before the event has fired and set the state.
Do you have a solution in mind for this? Or is there a standard way of dealing with this in Toddle that you know of?
Tom Ireland
1 year ago
Hey, Miles. I don't have a solution off the top of my head. From what I recall, you can implement some kind of loading state but have not really thought about how to put that in place. Have any of the other toddle-hero crew done this?
Tom Ireland
1 year ago
I'd probably have a div with a high z-index with a loading icon or something like that, which is hidden after the response comes back. As I say, would need to think about it but that could work off the top of my head.
👍1

auth and show/hide

Miles

Tod

Tom Ireland

Tom Ireland

Tom Ireland

Miles

Tom Ireland

Miles

Tom Ireland

Tom Ireland