Conditionally Display Login and Logout Buttons

Published: 29 April 2022
on channel: WeWeb

2,204

In this tutorial, I'm going to show you how to display or hide a login or logout button based on whether a user is authenticated or not.

In our case, we're already logged in. If I show you the logout button in the navigator, you see that right below it, there's a login button, but there's this little crossed out eye that means there's also a login button, but it's currently hidden.

If I go on the logout and in my display settings, you see here that I'm using the Xano auth authentication and you see here that this variable is Authenticated is true. So we're saying the display here is true. Please display this log out button. Now, if we go on the login button, which we cannot see on the page right now, if we go to the display settings, you see that again we take that same variable isAuthenticated – and currently this is true – so if we take this out, the not out you will see now we're saying display the login button. So if I go here, you will see it here.

But we want the display to be false in the case of the login button when we are authenticated. So we can just say not authenticated and that'll work. Suddenly the display is false, and you can no longer see the login button.

So that's how you do conditional display based on the user's authentication status.

Watch video Conditionally Display Login and Logout Buttons online, duration hours minute second in high quality that is uploaded to the channel WeWeb 29 April 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 2,204 times and liked it 12 visitors.

419