Login/Logout custom buttons - Logout refuses to work!

Hello all,

I’m rather new to using code, and I’ve managed fine so far except for today. I cannot seem to get my buttons working properly, despite spending close to 4 hours on google.

Could someone PLEASE help me?

I have ‘signup’, ‘login’ and ‘logout’ buttons. All I want is for the signup and login buttons to be hidden, and the logout button visible if a user is logged in - and vice-versa if they’re logged out.

The problem I’m having is that the logout button refuses to work - nothing happens when I click it. I just want a user to be fully logged out, and redirected to homepage. The code I’ve got is below, if someone can tell me what I’ve done wrong so I don’t do it again, I’ll be forever grateful.

Thanks in advance

import wixUsers from 'wix-users';

$w.onReady(async function(){
 let user = wixUsers.currentUser; console.log("Wix-User-Data: ", user)
 let userId = user.id; console.log("User-ID: ", userId) 
 let isLoggedIn = user.loggedIn; 

 if(isLoggedIn) {console.log("User already logged in!")
        $w("#login").hide('fade'), $w("#logout").show('fade'), $w("#signup").hide('fade');
 }
 else{console.log("User not logged in!")
        $w("#login").show('fade'), $w("#signup").show('fade'), $w("#logout").hide;}
$w('#logout').onClick(logoutAndRedirect);
});
function logoutAndRedirect(event) {Promise.all([wixLocation.to('/home'), wixUsers.logout()]);
    
}

Hey there! wix-users is deprecated, therefore I suggest you use wix-members instead.
Try this code and let me know if this works for you:

import { authentication } from 'wix-members-frontend';
import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {

    const isLoggedIn = authentication.loggedIn();

    if (isLoggedIn) {
        // WHEN USER IS LOGGED IN
        $w('#login').hide();
        $w('#signup').hide();
        $w('#logout').show();
    } else {
        // WHEN USER IS NOT LOGGED IN
        $w('#logout').hide();
        $w('#login').show();
        $w('#signup').show();
    }

    $w('#logout').onClick(() => {
		//WHEN LOGOUT BUTTON IS CLICKED
        authentication.logout();
    });

    authentication.onLogout(() => {
		//WHEN USER IS LOGGED OUT SUCCESSFULLY
        wixLocationFrontend.to("/home");
    });

});

Hi!

Thanks so much - the logout button is now hidden, but when I log in, the login and sign up buttons remain - and the logout button is still hidden so I can’t log out to test it. I’ll try clearing history and checking again.

Thanks so much for replying.

Are the buttons linked to a custom signup / login popup that you have created?

The sign up and login buttons have their own pages with forms on. Clicking the button for login takes you to login page, and once logged in I’m sent to the members page (which is correct)

Try hard refreshing the page then.
Cntrl + F5 on Windows
Cmd + Shift + R on Mac

Or try opening the site in an Incognito tab.

Let me know if the issue persists.

1 Like

You’re my new favourite person! It works (finally).

Thank you so much - what was I doing wrong other than “wix-users”?

1 Like

Glad to hear!

About your code - There’s no need to get the current user email or user id (that is unless you specifically want to log it for your record) and you don’t need a special, dedicated function for logout and redirect. Also you had not imported wixLocation without which you won’t be able to redirect to another URL.

But hey - still a good job for a newbie! I love how you tried it yourself and almost got it working. That’s how I started out with coding too!

And remember if you ever get stuck - the community is here to help you (:

I think I made it more complicated than it needed to be! I might need to collect emails and names on signup for mailing list purposes, but that can probably wait now the important bit is done - my brain is about to burst!

Thank you so much - I’m sure I’ll be back for more questions at some point!

1 Like


And now it does this instead of my login page? Any ideas? (Sorry!)

It’s working fine for me.
Its probably your browser cache (:

Sorry - should have clarified a little there! When a user clicks on"forum" without logging in or signing up the generic one appears. I’m trying to figure it out on my test site but can’t seem to do it.

You might want to try following these steps then:

This article tells you how to set your custom Log in form as the default option.

1 Like

I’ve got that far, but can’t figure out how to add my login page - I don’t have a lightbox.

May leave it until the morning once my brain has rebooted!

Thanks so much for all your help!

As I can see, you can currently have custom Log In and Sign Up on lightboxes only, and not on a page. This is still a feature request.

So I suggest you might as well create the custom lightboxes then? Or get ready to do some more coding if you wish to stick with the pages. (:

1 Like

I’ll have to learn at some point I think, so I’ll have a go tomorrow - at least I’ll have the light boxes to fall back on! :slight_smile: