Logged in / Logged out Code not refreshing

Ask the community
, ,
1

Hi

I have a log in box on my page from the WIX Forum and I use the wix.users API to determine whether someone is logged in or not.

If they are not logged in, it looks like this:

If they are logged in, it looks like this:

This is my code:

import wixUsers from 'wix-users';
$w.onReady(function(){
    const currentUser = wixUsers.currentUser;
    if (currentUser.loggedIn) {
            $w('#box18').show();
                        $w('#box22').hide();
                        $w('#box17').hide();
                                                $w('#box24').show();
                                                $w('#box21').show();
	} else {
            $w('#box18').hide();
                        $w('#box22').show();
                        $w('#box17').show();
                                                $w('#box24').hide();
                                                $w('#box21').hide();
    }
});

Works a treat if you refresh the page. However, when someone logs in and out it doesn’t refresh the page nor trigger the code to run / change the icons on the screen.

Any ideas on how to achieve this every time someone logs in and out?

Kind regards

Thomas

2

Hey Thomas,

Currently you perform a check during onReady so it’s executed when you load the page and there’re no checks performed later.

You can use wix-users onLogin API to handle changes when user successfullly logs in. For example set your icons in login box the way that it should work.

Regarding log out I don’t see anything in API to help handle this, unless you handle logout via code. In that case you can simply change login box after logout is complete. If that’s not the case you can also use something like native JavaScript setInterval method thus performing regular checks.

3

Hi Maksim

Thanks for the feedback.

The interval options sounds like the better idea, that way I can continually test everything (then add a timeoutfunction to stop it after 10 seconds (should be complete by then)).

I’ve had a look at the link you sent to me, this seems like what I would need. Do you know how would I squeeze that into my code?

var intervalID = window.setInterval(myCallback, 500);

Many thanks for the help!

Alternatively, I’ve tried implementing the onLogin function which doesn’t seem to have worked either?


import wixUsers from 'wix-users';
wixUsers.onLogin( (user) => {
            $w('#box18').show();
                        $w('#box22').hide();
                        $w('#box17').hide();
                                                $w('#box24').show();
                                                $w('#box21').show();
});

Thomas

4

Hey Thomas,

You can simply use setInterval function, without specifying window object.

var intervalID = setInterval(myCallback, 500);

onLogin function it works only when page is already ready, so in order for this to work you can set up onLogin handler inside onReady or afterwards there’s a small note in documentation that clarifies this.

import wixUsers from 'wix-users';
// ...
$w.onReady(() => {
  // ...
  wixUsers.onLogin( (user) => {
    $w('#box18').show();
    $w('#box22').hide();
    $w('#box17').hide();
    $w('#box24').show();
    $w('#box21').show();
  });
})
5

Hi Maksim

Many thanks!

I had to change the interval section code to:

var intervalID = setInterval(500);

(it didn’t recognise ‘mycallback’)

I just placed it at the top of my code and it worked great. That with the onLogin function works perfectly for what I need. Many thanks!

Thomas

6

Scratch that, didn’t quite work perfectly. It wasn’t checking if people were logged in if you closed the tab and re-entered so the displayed information was incorrect. It was almost the reverse of what I had before!

I’ve combined / smashed everything together now and it all seems to be working fine:

It changes when people login/logout, also checks for when people open the site in a new tab and displays the correct information.

var intervalID = setInterval(500);

$w.onReady(function(){
    if (wixUsers.currentUser.loggedIn) {
            $w('#box18').show();
	} else {
            $w('#box18').hide();
    }
});

import wixUsers from 'wix-users';
// ...
$w.onReady(() => {
  // ...
  wixUsers.onLogin( (user) => {
    $w('#box18').show();  
  });
})

Many thanks again, Maksim!

Thomas

7

Hi guys, I have the same issue. Following the tips, i tried the code below:

$w.onReady(function () {
	start();
});

wixUsers.onLogin(() => {
	start();
});

but on login after a logout the page still not run the start function.