How can we remove wix.com's Login/Signup lightbox during the Logout process?

Hi all,

I have created my company’s own Login/Signup page. When the site visitor clicks the “Login/Register” button on the header:


The visitor will be redirected to our own Login/Signup Page. The user can successfully log in through the portal (circled in red) on the Login/Signup Page

Here is the problem : when the customer is done with “member-only” business (e.g. editing his/her “personal profile”) and decides to log out by clicking the “Logout” button in the header
Note: I have coded to automatically change the “Login/Register” button to “Logout” button when the user is logged in.


The user will see wix.com’s signup lightbox, even though I’ve coded with:
export function ProfileButton_click() {
//The log-in process is prompted
if (wixUsers.currentUser.loggedIn) {
//If the user is logged in and decides to log out
wixUsers.logout()
.then( () => {
// update buttons accordingly
wixLocation.to(/home);
$w(‘#loginButton’).label = “Login/Register”;
$w(‘#button39’).show();
$w(‘#button10’).show();
$w(‘#box11’).show();
$w(‘#ProfileButton’).show();
$w(‘#profileButton’).hide();
$w(‘#CoffeeButton’).hide();
} );
}
// user is logged out
else {
wixLocation.to(/login);
}
}

Questions :
(1) What should I do/code to remove Wix.com’s SignUp lightbox?
(2) Why can’t the user be re-directed to my homepage even though I’ve written the wixLocation.to code? Is wixLocation.to code working because wixLocation.to codes on my other webpages are not functioning properly either?

Thanks,

Louise

Have you tried putting this:
// update buttons accordingly
wixLocation.to (/home);

BEFORE the logout?

Where exactly should I put it?

Also, the biggest problem is that I do not want the user to click the “X” sign in order to get rid of the Wix.com’s Sign Up lightbox. What should I do to ensure wix.com SignUp lightbox does NOT pop up after the user click the “Logout” button?

I think the whole problem here is this: once the user logs out with your logout button, he still stays on the same page. This page is set to need login/member Permissions. Now, your own login function does not register within Wix as an alternative to the Wix login, it´s just code. SO, the page is loaded again, Wix sees it needs permission, thus displays the Wix login dialog.
My first solution prob. won´t work, because if you redirect and then logout, that logout will not be executed.

So, instead, I would try this: make a separate logout page with a text like “You are now safely logged out” and “Click here to return to out Home Page” with a button to Home.

Then, on this new Logout Page, you do, in code, the logout. Just make sure this page is NOT set to need Login Permissions, otherwise the whole story repeats.

Does this make sense?

1 Like

Hi Girl, it makes sense. The only page on our website that needs login/member permissions is our “Member Update” page (which is dynamic). Therefore, like what you said, if I clicked the “Logout” button when I was on my “Member Update” page, I would immediately see the Wix login dialog.

Since all pages, besides the “Member Update” page, have been set to open to the Public (i.e. nobody needs to login to view the content), can the user:
(1) Click the “Logout” button in the header, and then
(2) Be re-directed to the “Home” page (which is never set to require login)?

If so, where exactly should I put the wixLocation.To(‘/home’); in the logout prompt?

Place a button on your page and give it an id of “loginButton”

Place some text on your page and give it an id of “successLogoutText”

then use this code:

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;

$w.onReady( function () {

// check if user is logged in

if (wixUsers.currentUser.loggedIn) {

$w("#loginButton").label = "Logout"; 

} else {
$w(“#loginButton”).label = “Login”;
}

$w(‘#loginButton’).onClick( function () {

if (wixUsers.currentUser.loggedIn) {

// logout the user

        setTimeout(() => { 

            wixUsers.logout() 
            $w('#successLogoutText').show('bounce'); 
        }, 1000) 


    } 

})
})

I think it should be even simpler than that.

So the logout function does NOT return anything.

Syntax

function logout(): void

Perhaps simply calling wixLocation.to(‘/home’); before logout() will work?

If not what you could do is send a logout message with the to() request like this:

 wixLocation.to(`/home?logoutRequest=true`); 

Then in your onReady function in the main page you can access the page query using wix-location

import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
...

$w.onReady(() => {
    if (wixLocation.query.logoutRequest) {
        wixUsers.logout();
    }
...
});

Another idea is to use a Lightbox for the user account access info instead of a stand alone page. This will sit over the main page and when you log out will reload the main page in a logged out state and hide the light box.

Steve

1 Like

Thank you, Mike and Steve, for consolidating my codes! I am working on using both of your codes to see which works the best with us.

By the way, WixLocation.to is still not working and I am not the only one encountering the same issue. Check out RedDany’s and Moshe’s concerns.

Hi Steve,

What additional code should I add in my wixUser.logout () to avoid Wix’s login dialog?
(Note: Wix’s login dialog appears ONLY when the user click “Logout” button in the header from a “Member’s only” webpage)


Here are my codes:

export function loginButton_click(event) {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// the user logs himself/herself out
wixUsers.logout()
.then( () => {
// update buttons accordingly
wixLocation.to(/successfullogout);
$w(‘#loginButton’).label = “Login/Register”;
$w(‘#button39’).show();
$w(‘#button10’).show();
$w(‘#box11’).show();
$w(‘#ProfileButton’).show();
$w(‘#profileButton’).hide();
$w(‘#CoffeeButton’).hide();
} );
}
// user is logged out
else {
wixLocation.to(/login);
}
}

@stcroppe Steve, I contemplated giving the URL-answer too, but I judged against it. Problem is, you cannot reset the query part anywhere and it gets attached too every URL in your app, even on menu´s etc. This means that the

logoutRequest=true               

 part will be there forever, probably leading to unwanted side effects (like always login someone out). Only way around it is to reset it to 
 
  
logoutRequest=false

but it seemed a bit wrought to me. 
Have you found out a way to reset the query-part?

OK here‘s another idea, which is obvious but I tripped over it in another post.

Add check using wix-users.currentUser.loggedIn. If not logged in use Wix-location.to to go to your desired page.

import wixUsers from ’wix-users’;
import wixLocation from ’wix-location’;


$w.onReady (() => {
if (!wixUsers.currentUser.loggedIn) {
    wixLocation.to(‘/home’);
}

});

Hope this helps
Cheers
Steve

1 Like

@Giri Zano That makes sense. Perhaps my other suggestion below will be helpful.
Steve

Louise:
I have had a look at the code on your site and the to() call does work when you are logged out and the Login/Register button is pressed. The reason that it doesn’t work when you are logged in is because you have the coding error I mentioned above:

wixUsers.logout()     <<<<===== This doesn't return a Promise 
     .then( (result) => { <<<<<==== So this code will never be run
 // update buttons accordingly ==== and is killing the script
        wixLocation.to(`/successfullogout`);

Try removing this code and using the suggestions I have made (I can help if you want) another idea that you could experiment with is to create a proxy logout page. So your button code would look like this:

export function loginButton_click(event) {
  // user is logged in  
  if(wixUsers.currentUser.loggedIn) {     
      wixLocation.to(`/successfullogout`);        
  }  // user is logged out  
  else {
      wixLocation.to(`/login`);
  }
}

Now in your onReady() function on the successfullogout page you do this:

if (wixUsers.currentUser.loggedIn) {
    wixUsers.logout();
}

Your successfullogout page will reload after logging out and should behave as you would expect.

Hope that helps.
Steve

1 Like

Hi,
If you wish to remove wix’s log-in button, I’d recommend you to check out this article about creating your own members area.

Good luck :slight_smile:

Hi Girl,

Just want to let you know that your suggestion works after I play with it for a few time. Here are my current codes:

export function loginButton_click() {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// log the user out
wixLocation.to(‘/home’);
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w(“#loginButton”).label = “Login/Register”;
$w(“#NotePad”).hide();
$w(“#ProfileButton”).hide();
$w(“#button10”).show();
$w(“#button39”).show();
$w(“#box11”).show();
} );
}
// user is logged out
else {
wixLocation.to(‘/login’);
}
}

@El Roble Home Care
FYI - You don’t need this code as it will not run and may cause an error:

.then( () => {  // update buttons accordingly         
    $w("#loginButton").label = "Login/Register";
    $w("#NotePad").hide();         
    $w("#ProfileButton").hide();         
    $w("#button10").show();         
    $w("#button39").show();         
    $w("#box11").show();
} );

Cheers

Hi Steve,

How do I update the button like “loginButton” if I don’t run these codes ? Any suggestion?

.then( () => { // update buttons accordingly $w(" #loginButton “).label = “Login/Register”; $w(” #NotePad “).hide(); $w(” #ProfileButton “).hide(); $w(” #button10 “).show(); $w(” #button39 “).show(); $w(” #box11 ").show(); } );

Also, the wixLocation.to (‘/success’); worked only for 10 minutes and then stop working again. :-/ I created this " Successful Logout) " webpage because several customers told me they wanted to be re-directed to the “Successful Logout” page to ensure they logged out successfully after they pressed the “Logout” button. The code circled in red is what I am referring to:


I have tried these conditions:


Still, nobody can be re-directed to this webpage and will get “404” instead. I believe it is this specific webpage that acts funny because I’ve tried wix.Location(“/home”); and it works. Can you help me resolve this issue, please?