How to create a "log-out" button with Webflow's Beta Membership feature

I’ve managed to sorta successfully create a members only with the new beta. Anyone figure out how to make a “log-out” button? Once logged in, the “log-in” page is redirected to the “Home” page. I’d like to be able to log-out so the Log-in page can be showed to clients, and in the future being able to log-out of computers that are not yours.

Here’s the read only link. Webflow - Allgreens Web V2


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Like this

3 Likes

If I could send you a beer through the mail I would!!! Thanks Lou!

1 Like

Haha, it’s my pleasure! I’m struggling with this. If you have any idea how to tackle it I might send you a beer myself. :slightly_smiling_face::joy:

1 Like

Yes, please if anyone can share their thoughts on how to redirect to a specific page after sign up/login.

You can change the “redirect fallback” in the form settings. User pages overview | Webflow University

The redirect fallback never worked for me…

Instead, it redirected to whatever I set if login failed (not succeed).

Though this in Beta, so that may not be global behavior.

If that’s how it’s working for you too, I’ve come up with an alternate solution that does indeed work well.

Here’s what I did:

Instead of using the login/logout element that comes with the Memberships feature, I just used an ordinary link element.

If you look close at the Memberships login url, it’s always the same:

/log-in

So I just hard coded that for the URL.

Where it gets interesting is the usredir param in the URL.

Webflow Memberships auto populates that for you based upon where they think you should be redirect to upon a succesfull login.

Instead…

I just set to the Webflow static (or collection) page that I want to go to.

Here’s how that flow looks:

It’s a hack, yes.

But it solves the immediate problem.

I found a solution for this.

Step 1:
I created 1 page with giving access to a specific user

Step 2:
I designed the page inside for my client

Step 3:
I added to the user account settings a custom link.

Step 4:
I went to the user account page, and in the user details (My account), that has the email and name, i added the field for the link that adds it like a text field.

Final Step:
I took this text field added a button after it and added this javascript:

To the body tag of the page.

Name the id of the text field of the link “my-dashboard” and the button “edit-button”

So with this way the client can login to the account and go to his dashboard click the link and go to his custom dashboard.

Hope it helps!