Hi! I am trying to figure out a way to bypass the Wix Login / Sign up page for Member’s Only Pages. Is it possible to have a custom login page for members to sign in and be redirected to a page on my site?
Just create your own custom login and register lightboxes and change your signup settings to custom.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration
I used this tutorial below and modified it for my own members page
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
I have also added below the code for the members page itself using a strip which contains the member only parts and codes for custom login and signup lightboxes.
Members Page Code:
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`);
}
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 members page 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.
} );
}
Custom Sign Up Lightbox Code:
This works perfectly and closes after registering details before taking new sign up to a signup status page, then both names will be saved in contacts and once site member is manually approved the member details will be added to ‘members’ database.
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#registerButton").onClick( (event) => {
let email = $w("#email").value;
let password = $w("#password").value;
let first = $w("#firstName").value;
let last = $w("#lastName").value;
wixUsers.register(email, password, {
contactInfo: {
"firstName": $w('#firstName').value,
"lastName": $w('#lastName').value,
}
} )
.then( (result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/sign-in-status"); //Change the URL ending to whatever page you want to send the user to after they log in.
} );
} );
});
Thank you!! This is helpful but I am still redirected to the Wix login pop-up page – anyway to bypass this completely? Looking at other posts too – your code and tutorial helped me a lot, thanks again!
Hello! I too am trying to create a custom login that will connect my members to their specific profile page. I’ve created a dynamic page, and inputted the Corvid code in the lightbox, however I get this error whenever I try to test it and access a user profile.
Here is the code I have under the lightbox:
import wixUsers from ‘wix-users’;
import wixWindow from ‘wix-window’;
import wixLocation from ‘wix-location’;
$w.onReady( function () {
$w("#submit").onClick( (event) => {
let email = $w(“#email”).value;
let password = $w(“#password”).value;
wixUsers.register(email, password, {
contactInfo: {
“#email”: $w(‘#email’).value,
“#password”: $w(‘#password’).value,
}
} )
.then( (result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to.to(“/Profiles/email”); //Change the URL ending to whatever page you want to send the user to after they log in.
} );
} );
});
Any help would be much appreciated:)
Change signup settings as above, it is the first link. I forgot to post it there in the original reply.
The code above you have used is for your Signup lightbox and not your Login lightbox, hence the use of wixUsers.register in that code.
Also, note that wixUsers.register already does the email and password, hence the use if it in the code - wixUsers.register(email, password, {
You don’t need to add them again in the contactInfo: { as that is only for additional user inputs like first name and last name which I have used in my existing code as shown and which you have taken out of yours.
Have you got a page on your website with the url address of /Profiles/email?
If you are wanting to move the user onto their own profile page as in the tutorial which has already been linked to in previous post, then simply use this, obviously changing Members to Profiles as it looks like you have called yours Profiles instead.
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
Thanks for the reply!
This is the dynamic page I created with the url, did I do this right? I currently have a database called “Profiles” that records the data from user inputs. I thought by creating a login lightbox that references the Profiles database would send the user to their profile. Do you know a better way to set this up? What would you do if you were in my situation?
Thanks Again!!
When I used this tutorial for my starting point to work off of.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
I simply kept everything as it was in the tutorial, that way I would easily be able to know which parts are which and I wouldn’t have any hassle of having to change code. Plus, my Member Profile pages were seperate to any of the Wix Member app pages.
Note that the {ID} in that page url refers to the members user id, hence why you have to use /${wixUsers.currentUser.id} in your wix location line in your login lightbox code.
I have also got the Members Update Profile page set up on mine too, hence the second page in my list above.
#errorMessage line of code is not a valid selector. Any advice on how this can be fixed?
@niallmagner
Have you got a text box element on your page with the id name of #errorMessage?
If not, then either add a error message so that the user can see if something went wrong.
Otherwise simply remove that line of code.
@givemeawhisky I am relatively new to coding, so you will have to fiorgive me I am confused Here is my full code:
import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;
$w.onReady( function () {
$w(“#forgotPassword”).onClick( (event) => {
wixUsers.promptForgotPassword()
.then( ( ) => {
} )
. catch ( (err) => {
let errorMsg = err;
});
});
});
export function loginButton_onclick(event) {
let user = $w(“#user”).value;
let password = $w(“#password”).value;
wixUsers.login(user, password)
.then( () => {
console.log(“User is logged in”);
wixWindow.lightbox.close();
wixLocation.to(wixLocation.url);
} )
. catch ( (err) => {
console.log(err);
} );
}
export function ResetButton_onclick(event) {
$w(‘#user’).value=“”;
$w(‘#password’).value=“”;
$w(‘#user’).resetValidityIndication();
$w(‘#password’).resetValidityIndication();
}
Can you tell me if I am missing anything?
You can’t have user in your login function, it has to be email. https://www.wix.com/corvid/reference/wix-users.html#login
// rest of code//
export function loginButton_click(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
// rest of code //
So simply change user to email in those five places and you should be okay.
Plus, just make sure that you have matching open and close pairs of { and ( and } and ).
Simple terms you must have equal numbers of those curly brackets {} and parentheses ().
Also, in case you are not aware, with the onClick event handlers, the first one for the forgot password option, it already has the onClick event handler function written into the code itself.
$w("#forgotPassword").onClick( (event) => {
You don’t need to add the onClick event through the element’s properties panel for this.
However, for your other two buttons below.
export function loginButton_onclick(event) {
export function ResetButton_onclick(event) {
Both of these are needing the onClick event added through the properties panel for each of the button elements.
When you add the event handler through the properties panel for that element, it will automatically add the export function… line of code at the bottom of either your page or site tab, depending on where you are working currently. Delete this extra line of code if you already have used it otherwise you will be calling it twice.
@givemeawhisky Wh does it have to be email? I want to enter a username to login with.