I’m currently trying to set up a custom members area. So far I have created a custom profile page and update profile page based on this tutorial: https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area#login-page
The issue I am having is that when I test out logging in, I get an error page when it tries to go to the profile page I am linking to in the code.
This is the code I have in my lightbox login that I have set up:
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err;
});
});
});
export function loginButton_click(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixLocation.to("/myprofile/{ID}");
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand();
} );
}
Your page url is wrong. It should be the same as in the tutorial that you have used for the members profile page already.
// Change this from:
wixLocation.to(“/myprofile/{ID}”);
//To this:
[wixLocation.to(/myprofile/${wixUsers.currentUser.id});](
wixLocation.to(/Members/${wixUsers.currentUser.id});
//Change)
Also, make sure that you test it on a published website and not just through the preview function.
Finally, remember that only the actual member can access their own unique profile page when they log in themselves, so you will only be able to view your own page and not anybody else’s.
If you use Wix Members app and the My Account page, note that the community url shown on there is only accessible for other members when they are logged in themselves. If that link is given out to a general public user, then they won’t be able to access it as they don’t have the member permissions.
I’m not using the wix members app or the my account page, I’m making a custom members area. That url in the code brought me to the same error page.
I think it has something to do with the /members/privatemembersdata dataset within the data manager that it won’t let me delete. That’s where the wix ID seems to be generating upon registration, how do I get the ID to connect to my custom database for automatically?
@megansauer
I use the exact same tutorial as a starting point for my own members area and it works perfectly for me.
My custom login lightbox code.
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_onclick(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixWindow.lightbox.close();
wixLocation.to(wixLocation.url); //This reloads the same page and allows code to show hidden member parts.
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}
You have missed out the lightbox close function in yours.
wixWindow.lightbox.close();
My code for my members page.
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
}
} );
export function loginbutton_onclick(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();
} );
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( {"mode": "signup"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
} )
.catch( (err) => {
console.log(err);
} );
}
}
export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`);
}
export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`);
}
export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`);
}
Note:
The functionality for logging users in and out of your site only works fully when viewing your published site. You will not be able to fully test your member profile pages in preview mode.
Also, make sure that all your dataset modes and permissions are set correctly for each one.
As for the Wix Members PrivateMembersData Collection, see here for all the field info about that collection.
https://support.wix.com/en/article/corvid-wix-members-privatemembersdata-collection-fields
@givemeawhisky could you send me a screenshot of what your members page looks like? Also where do you put the memebers code, on the members page? or on the site page? I think I’m going to try your workaround and make a hidden members bar that shows up on log in but I want it to accessible on all pages on the site
@megansauer
All in page tab only -
members page code goes on members page
login lightbox code goes on login lightbox page;
signup lightbox code goes on signup lightbox page.
Site tab is only for if you have code that affects your whole site, like having your login button in the header etc, then you can use the page tab to have it setup to be hidden on some pages.
My members page when not logged in is just basically a page with header and footer with only a logo and login button shown on screen (why I have the white footer strip so that the footer aligns with the bottom of the screen when showing on desktop or mobile).
All my members parts are hidden in the members strip which only appears after the user has logged themselves in through the login lightbox and that has closed and automatically refreshed my members page, If you are moving the user onto another page then simply use that page url and not the url that I have.
Then I have important info shown on screen along different buttons to take members to different areas like their account, profile page, members area and if they want to add things to the website (It is much easier to have them all attached and contained inside a strip so that I only have to add code for the strip itself and not every element that I have used on that page).
The member can then simply navigate to the different member parts of the website etc and simply come back to the members page to logout again. On which the member will be logged out and the page will be changed back to the login screen again with only the login button and the log showing.
@givemeawhisky Okay I think I’m starting to get it (sorry I’m completely new to coding and have been trying to teach myself within 5 weeks to meet a deadline for a client). I’ve used your code on the login lightbox and on the members page, however when I click “logout” it doesn’t actually log me out and just pulls up the log in lightbox (and even when I close the lightbox I am still logged in). I’ve found the code for making a button log a user out but I’m unsure about what piece of your code I should remove to make it work without breaking it.
The way my site is set up is I have a login button in the header which brings up the login lightbox. Having the lightbox reload whatever page they are logging in from is fine, but I want a small member strip to have appeared on all pages with links to the member pages on it when the user is logged in.
@givemeawhisky Also I cannot for the life of me get my member profile page to connect to anything still…
for:
wixLocation.to(`/myprofile/${wixUsers.currentUser.id}`);
how is your page info set up? I have the ID field chosen which some other tutorial told me to do but it doesn’t work. I’ve tried removing that field from page info and just having /myprofile - doesn’t work. I’ve tried replacing ${wixUsers.currentUser.id}` with {ID} - doesn’t work. I don’t know wha to do anymore.
