If you are having problems logging out of your Wix site AND redirecting the user to a new page then keep reading!
If you have created a custom login page you may find that logging out of the Wix site while on a Members Only page results the generic Wix login screen being displayed or some other effect that you don’t want.
What you really want is to redirect the user to a page of your choosing (e.g. the home page) and not have to deal with the generic home page. What is the problem we need to solve? Well it is two fold:
The current implementation of the wixUsers.logout() function doesn’t currently allow you to take a follow on action upon logout, like redirect to another page. It just logs you out. If you are on a restricted page then you get the generic Wix login. Not always the desired outcome.
The current implementation of wixLocation.to() does the same thing. It doesn’t have a follow on action you can activate once the redirect has completed so that you can say logout.
What we need is a way to execute both functions simultaneously. Logout AND redirect to a new page. That’s a tall order right?
Wrong! - this is where those pesky Promises come in handy.
One handy little feature of the Promise object is something called all(). Promise.all() allows us to execute multiple promises simultaneously and will wait until all Promises have done the job they were asked before completing.
Promise.all takes an array of promises (or functions) that are each executed independently. But the all() doesn’t allow the page to exit and redirect/logout until both functions in the array have returned. So we have simultaneous execution. Neat hey?
So we can now use this to work around the dilemma of simultaneously logout() and redirect().
The big reveal
Here is the code you need to address perhaps one of the more frustrating aspects of the wixUsers API.
Hi @stcroppe BIG !!
Thansk a lot, I realized your code, I tried it, it works and I solved, thanks so much. @yisrael-wix could you suggest this in Wix references in the online examples please ?
thx to all
Mauro
how can i get the element from login box , like logout / My Account … The scenario is to redirect the page to home on clicking logout… i didnt used custom login or log out page …i want like , on cloking logout from #navbar1 , it has to redirect to home page . Please help me with inputs.
Similiarly with horizantal Menu pages also
Code
if (wixUsers.currentUser.loggedIn) {
// log the user out
// here what should i wirte the condition for on click logout ( note i didnt use custom pages)… or any other … $w(‘#accountNavBar1’).
wixUsers.logout()
.then( () => {
// redirect to homepage
wixLocation.to(“/home”);
} )
}
@stevesoftwareservice Does this mean redirection to your homepage upon logout DOES NOT work with the logout button from the Wix User native app #loginsocialbar
Yes this is a big headache. The members NavBar that is installed with the Member “App” does not utilise any of the wixUser capabilities. Sadly it is a closed black box with no corvid access. As givemeawhiskey states above. The only way to customise the logout experience is to replace the login navBar and DIY
wixUsers.currentUser will always be ’ truthy ’ because it always returns a User object so the test before setting count=1 should not be necessary. So setting count = 1 when you declare it in your let should be sufficient.
Now wixusers.logout() doesn’t return anything:
function logout(): void
per the API docs . So it is not clear why the second if test would work unless it is a browser peculiarity. Note this link (Microsoft Typescript repo) points out that:
An expression of type ‘void’ cannot be tested for truthiness
I do not think that this would be reliable code to use and it may be a fluke that it works at all.
Console logging return values from the Corvid API can be helpful. When I did so on wixUsers.logout(), it seems to return a Promise, not a ‘void’. Maybe someone else can confirm that?
// see what wix api wixUsers.logout() returns ...
// this is treating the call as a regular old method
$w.onReady(function () {
// if return is a 'void', this should output 'undefined'
console.log(wixUsers.logout());
//Chrome DevTools console output:
// "wixcode-users.js:1334 Uncaught (in promise) No
// member is logged in"
});
// now treat as if returning a Promise
$w.onReady(function () {
wixUsers.logout().then(result => {
console.log('accepted result of calling logout as promise...' +
result);
}).catch(e => {
console.log('rejected result of calling logout as promise...' +
e);
});
// Chrome DevTools console output:
// "rejected result of calling logout as promise...No member is
// logged in"
});
To me, the ‘it looks like a duck and quacks like a duck’ adage applies. The return type of wixUsers.logout() is quacking like a Promise.
According to MDN, a javascript function that does not explicitly return something has a return type of undefined. If the logout() was a function prefixed with the keyword ‘void’, its return value would be ‘undefined’.
Conclusions?
First, it’s a reminder that the Wix Corvid APIs are not a first-class language, they are libraries that ultimately produce ECMA script.
Second, @Steven Cropper’s original solution seems the best route to go (I think there’s typo in the ‘wixLocation.to.to(’/‘)’ … too many .to). So again, thanks Steven!
