How to auto-refresh Memberstack login status in header without manual page reload? Answered
Hello everyone!
I'm currently working on enhancing the user experience on my website, specifically around the login and profile update functionalities. I have placed signup and login buttons in the header of the website, and I'm utilizing a pre-built modal for the login process.
I'm looking for a way to automatically refresh the original page or at least update the login status on the original page once a user logs in through the modal or updates their profile. The goal is to have the login status updated automatically without requiring the user to manually refresh the page.
Has anyone implemented a similar feature or have suggestions on the best approach to achieve this? Any guidance or examples would be greatly appreciated!
Thank you!
Comments
6 comments
Hey Jasontopia 👋
Great question! Please watch this 1min video for my recommended solution. TDLR: you can add something like ?event=login to your redirects to refresh the page.Â
https://www.loom.com/share/3b80af2856474c029a875814d9eb4312
Hello everyone, I am new to this channel and I really really love Memberstack, however I am having some problems with integrating it to webflow.
So I have two current plans on my Memberstack, Explorer Plan (FREE) and Pathfinder Plan (Paid)
However when I try to login any of the membership account levels, and hit the login button, the login button does not update automatically, it still stays on "Login" text state instead of the "Logout" since the user is already logged in and the navigation links for Pathfinder is already on the navigation bar.
There are also times when I log out the account, the pathfinder navigation link will still be on the navigation bar instead of disappearing since I already logged out of a pathfinder account, needs some refresh before it disappears
here is a video showing the issue
I would appreciate if you can help me with this, thanks in advance and sorry for my english :))
https://www.loom.com/share/93baa86165514c7998392829ce01e248?sid=99903aad-e29f-4f3f-bcf9-b8961a770ae3
Read-only link -https://preview.webflow.com/preview/bestschooloptions?utm_medium=preview_link&utm_sour[…]s&preview=22ba79c4363a04f18be19a63e7afc715&workflow=preview
Francis Billy Raposas, I can see you are combining Webflow User account settings with the buttons login and logout. When using Memberstack, you don't need to control visibility based on 'User state' or any such setting.
You can have 2 simple buttons without any settings applied (on the right sidebar) for login and logout and just add the custom attribute data-ms-content="!members" for the Login button and add the custom attribute data-ms-action="logout" for the Logout button.
I can see you are already using the logout attribute for the button, but the button type is Webflow's login / logout feature which might provide some inconsistent experience when using Memberstack for member management.
So I would suggest create 2 fresh buttons, style it the way you want and add 2 custom attributes mentioned above and let me know if it works.
Hello A J thanks for the fast response, I really appreciate it. I will try this and let you know
I actually tried something similar to this, but the logout button with that attribute, when you click on it, it only logs you out of memberstack membership, but not on webflow, it seems like the webflow is reading that you are still logged in, while on memberstack, you are already logged out, that is the reason why I added the logout attribute to the Login/Logout element from webflow
Francis Billy Raposas, yes got it. But is there a reason why you want to use Webflow user states? Like is there any element dependent on webflow user accounts? Just wanted to add that Webflow made a decision to sunset user accounts.
And you can handle all member authentication and management just via Memberstack and use Webflow as an interface the user interacts with, browses pages, and anything else that you want to offer via the site.
So in this case, better way would be to handle all users via Memberstack and the development via Webflow if that makes sense.
Ahhh I see, I thought we still needed the webflow user system
Thanks for this I really really appreciate it
Please sign in to leave a comment.