Membership beta login in/log out button

Hi there!

I was wondering if there’s a way or some hack to to have a custom login in/log out button with webflow membership. The goal is when logged in, the user can access a dropdown menu with two links:
1- an access to the user account
2- a log out link

when not connected it would be a simple log in button

I hope I was clear

Here is an example of the two button states (first one is a dropdown and second one is when not connected)
Screen Shot 2022-11-10 at 4.00.14 PM

Yes, but it’s quite hacky.
Are you comfortable writing some script?

I’ve been considering building this as part of my tools lib, however I’m anticipating an updated version of the login / logout control sometime soon, even though one has not been announced yet.

It just seems like it would be a priority since Webflow is all about designer control.

The login and user account links are simple.

Nothing special about these.

  • Every login has the same url /log-in.
  • Every account page has the same url /user-account

Just drop an element onto the canvas, customize it, and set those as the links.

The logout is a bit more complicated. They log you out by making an API call. You could very easily inspect that in your browser and just call it yourself, but…

Be aware of non-technical reasons you should consider before doing that. Not sure how happy Webflow would be to have folks hitting their undocumented API’s. Or if it breaks any of their terms.

Things to keep in mind.

I tried with the F’nsweet class adder with no success. It has to be done this month so I have to find a solution or work around to make it work. I have a basic understanding of coding so it might take me some time if I take that route.

So the approach I’ve been considering would take a few hours to build and test, but here’s how I’d approach it.

1 Like

Hey Michael!!

I didn’t expect this. Thank you for taking the time and explaining your approach. For the first part, this is exactly what I’ve done. I wrote a piece of code (with the help of the class adder from f’nsweet) and made the switch by adding and removing a .hide class on both components with a trigger.

When clicking on the trigger I could see the switch being made but after the page loaded nothing changed.

I’m not sure I understood everything you said but it’s worth the try since we are launching the website in less than 2 weeks and I need to get better at coding. I’ll get back to you after trying it.

Once again, I really appreciate your help!

1 Like