Custom Login

Hello folks,

I’m a newbie to Wix programming so please forgive me if this is a stupid question :slight_smile:

I need to direct users to our custom login form when they try to access a members-only page.
Currently, it goes to the default Wix Log In/Sign Up page.
Firstly, we do not allow people to sign up via the web site.
So, we need it to take them directly to our simple custom login form, which has just two fields for email address and pw and a “Go” button.

I’ve tried following the instructions in the tutorial that a tech support person suggested, but this just tells me how to create a custom signup form, which I don’t want.

I also don’t want to use a lightbox if it can be avoided.

See https://csmc77.wixsite.com/csmc and click on the BYLAWS menu item to see what I mean.

Anybody tell me how to accomplish this?

Many thanks!

Pat

Hi Pat.

You can use currentUser.loggedIn to check for the login status of the current user and if they are not llogged in then redirect them to your Login page using WixLocation.to() . To learn how to create a custom login page, check out the Login Page section in this tutorial.

Good luck!

Thank you Sam. I’ve tried following that tutorial, with a few amendments, and cannot get it to work. Here is my code:

export function loginButton_click_1(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w(“#loginButton”).label = “Login”;
} );
}
// user is logged out
else {
let contact1Email = $w(“#userEmail”).value;
let password = $w(“#userPassword”).value;

wixUsers.login(contact1Email, password)
.then( () => {
console.log(“User is logged in”);
} )
.catch( (err) => {
console.log(err);
} ); }
}

userEmail and userPassword are inputs on the login form.
contact1Email and password are the database fields

Can you spot anything obviously wrong there?

Thanks!

Pat

If you have setup your own custom code for login and signup then you do need to be using lightboxes for login and signup,

Then you simply need to change your member signup settings to open up your login or signup lightbox depending on which one you want to show first…
https://support.wix.com/en/article/corvid-enabling-custom-site-registration

Even if you do the Member Profile tutorial as Sam has suggested above which gives the login button on the page and it changes to say logout when the member is logged in.

That will still either open up the Wix default login/signup window or the Wix custom login/signup window or your own custom lightbox for login/signup

For more info about Wix member signup see the three options in more info here.
https://support.wix.com/en/article/about-the-member-signup-form

I’ve used that same tutorial myself on a site and adjusted it for my needs, here is what I have used.

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`);
}

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_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("/account/my-account");  //Change the URL ending to whatever page you want to send the user to after they log in.
   } )
    .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.
   } ); 
}

Signup Lightbox Code

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.
      } );     
    } );
    
});

Just note that on my setup for login I have my login lightbox close and it refreshes the same page as it stays on that page and doesn’t go off to another page.

Therefore I need to have page refreshed as the code from the tutorial needs to be run again so that it recognises that the user is now logged in and changes the login button value to logout and the hidden member strip in my page code is shown.

If you don’t refresh the page, then the code will log the user into your site, however it won’t reflect that on the page itself as it has not been refreshed and will still show the user as not being logged in.

Basically the tutorial from Wix works perfectly if you direct the user to another page after logging themselves in. Otherwise the tutorial needs to be refreshed if you want the user to stay on the same page and show that the user is now logged in etc.

Login Lightbox Code with refresh/reload

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.
   } ); 
}

@givemeawhisky Hey GOS can I hire you to fix this for me? I need to get it working and I’m way behind schedule on this! I think that once I see how it’s set up, it will make sense to me.

Thanks very much for your detailed reply.
I’ve created a lightbox for the login and linked it as described in this article
https://support.wix.com/en/article/corvid-enabling-custom-site-registration

But it isn’t working. It still opens the default Wix log in/signup form.
Any ideas?

Thanks!

@patbensky You may have skipped configuring the correct settings for your login.

See step #8 in this tutorial:
https://support.totallycodable.com/en/article/create-custom-log-in-sign-on-screen-using-wix-code

@code-queen Hi Code Queen! Your site is very interesting and useful.
So, Step 8 says:
Go to side menu and find the Members Pages section. Click on the settings and select Member Sign Up Settings.

But I don’t have a Members Pages section. I do have Members Pages (dynamic) but that doesn’t have the Settings option.

Note that I am not using the Members app - I’m using a custom Collection to manage the members as I was told by Wix that that is the only way to accomplish what I need to do.

You need to choose the second option down, the one that says Member Signup.

Enable custom signup settings:
Click Member Signup .
Click Member Signup Form .
Click the drop-down menu and select Corvid Form .
Select your form from the What does it link to? drop-down menu.

Plus, do bookmark Nayeli’s site as she provides great tutorials and examples that you can learn a lot from :+1:

Thank you GOS … yes I have already done that, but it is not working!

Hello GOS, Nayeli, ANYBODY!!!

Can anybody help me sort this out? We can do a screen-share and you can look at what I’ve done and probably figure out what is wrong quite quickly. I am happy to pay you for your time.

I am desperate to get this fixed! I’ve been working on it for days, tried everything everybody suggested, and still it is not working and I really need to get it working!!!

PLEEEEEEASE can somebody help me?

Pat

@patbensky Good morning Pat.

Then that is what you are missing in order to properly configure a custom login: a members area.

Regardless if you use it or not. It needs to be enabled / added.

@code-queen Thanks Nayeli. This is contrary to what Wix technical support told me!

@code-queen But I don’t want a signup form of ANY description. I just want a Login form.

Just tried your website going through the bylaws page and simply using the Wix Login Bar and they both direct me straight to your login lightbox,