HELP! Custom Member Login - Prompt Username & Password

I added the Wix Login app to my site. I wanted to customize the login/registration pop up or even under member profile page as I’d like to add a text field where people can also tell me their company name. Not just their first, last, phone & addy.

I see the wix login prompt (username/password) window cannot be edited so I deleted the wix login app and created a custom registration form dynamic page and linked it to the database i created. I added the code from this article to the login page (page code) I created:

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

export function loginbutton_click(event) {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w(“#loginbutton”).label = “Login”;
$w(“#myprofilebutton”).hide();
} );
}
// user is logged out
else {
let userId;
let userEmail;

// prompt the user to log in
wixUsers.promptLogin( {“mode”: “login”} )
.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(“MEMBERPROFILE”)
.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(“MEMBERPROFILE”, toInsert)
. catch ( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w(“#loginbutton”).label = “Logout”;
$w(“#myprofilebutton”).show();
} )
. catch ( (err) => {
console.log(err);
} );
}
}

export function myprofilebutton_click(event, $w) {
wixLocation.to(/MEMBERPROFILE/UPDATE/${wixUsers.currentUser.id});
}

$w.onReady( () => {
if (wixUsers.currentUser.loggedIn) {
$w(“#loginbutton”).label = “Logout”;
$w(“#myprofilebutton”).show();
}
else {
$w(“#loginbutton”).label = “Login”;
$w(“#myprofilebutton”).hide();
}

But when I click the login button on my page nothing happens. It doesn’t prompt a pop-up window where I can enter my username and password which would see if I’m an existing member or a new member? The “My Profile” button also is not hidden. There’s a disconnect somewhere. Am I supposed to use this prompt function?

import wixUsers from ‘wix-users’;

// …

wixUsers.promptLogin()
.then( (user) => {
let userId = user.id; // “r5me-6fem-45jf-djhe-484349”
let isLoggedIn = user.loggedIn; // true
let userRole = user.role; // “member”
return user.getEmail();
} )
.then( (email) => {
let userEmail = email; // “user@something.com
} )
.catch( (err) => {
let errorMsg = err; // “The user closed the login dialog”
} );

I created a lightbox even with a username and password entry field but again I don’t know how to prompt a login. What am i missing? How do I make the connection? What’s that code? Did I delete something I shouldn’t have when I deleted the wix user login app? Should I put it back? HELP!!!

1 Like

Hello Alicia.
I have copied your code and it works for me (i added the ‘})’ at the end). I can only recommend to rewrite your code a little bit, and turn function myprofilebutton_click into $w(‘#myprofilebutton’).onClick.
Also maybe you are trying to use it in preview mod( you can’t logout and login in preview);
This code works for me.

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("#myprofilebutton").show();
  } else {
    $w("#loginbutton").label = "Login";
    $w("#myprofilebutton").hide();
  }

  $w('#myprofilebutton').onClick(event => {
    wixLocation.to(`/MEMBERPROFILE/UPDATE/${wixUsers.currentUser.id}`);
  });

  $w('#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("#myprofilebutton").hide();
        });
    }
 // user is logged out
 else {
 let userId;
 let userEmail;

 // prompt the user to log in 
      wixUsers.promptLogin({
 "mode": "login"
        })
        .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("MEMBERPROFILE")
            .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("MEMBERPROFILE", toInsert)
              .catch((err) => {
                console.log(err);
              });
          }
 // update buttons accordingly
          $w("#loginbutton").label = "Logout";
          $w("#myprofilebutton").show();
        })
        .catch((err) => {
          console.log(err);
        });
    }
  })
})

Also take a look at https://www.wix.com/code/reference/wix-users-backend.html#register. It’s new module function for registration, so you can create your custom registration form without using the wixUsers.promptLogin.

Andrii…you are an angel sent from above. You saved me. It works!!! I cannot thank you enough. Thank you so very much for the code. You did it.

Hi
Is right that collection (“MEMBERPROFILE” in this case) is “replica” of Contacts and Users (+custom fields) and connected to Users by the same “_id”? Are Users and Contacts connected in the same way?
What if I need Users data (e.g. first+last name) grouped by roles or Contacts data by labels, have I triple it in my own collection?

Thanks in advance

zufi zuff, Yes, it’s replica.
Contacts collection is not yet fully accessible with wix-code, only createContact and emailContact(read here ). So you need to create your own collection (like users) and store the data there.

Andriiiiii - I need your brain again PLEASE!!!
This video helped me out a great deal as well. But can you tell me why when i go to my profile after updating all the fields why the information isnt saving? After I hit update, I go back into my profile and the info doesnt repopulate. Any ideas? Help!!

www.werbelmicrowave.com

You have to connect inputs to dataset

OMG IM SO EMBARRASSED!!! I was soooo certain that I had already did that. SMH. Andrii I can’t thank you enough for your help! Thank you so much for your contribution = ) Awesome Human!!!

Hi Andrii,

I can not find a way to directly login a user, without using the promptLogin() method and the built-in pop-up. Is there any way to login directly with email and password fields ?

Thanks !

Hi Othman.
Yes it’s possible with new wix-users function applySessionToken()

How do I get this code to work with a custom login lightbox instead of the default Wix login?

i will make my sign up page but in sign in page how i verify user email and password

@timstumbo

Just create your own login and signup lightboxes and change the custom settings, so that when a user clicks on login button, it then brings up your lightboxes instead.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration

@pasiomkar4

Have a look at this tutorial in your Wix Editor that displays all the elements setup and the code all written for you, obviously you will have to change the code to match your own elements id names etc.
https://www.wix.com/corvid/example/custom-validations

You can also do a email confirmation verification:
Check out the Users API here . Search for " Register a user sending an email for confirmation " for explanation about it.

https://support.wix.com/en/article/working-with-user-input-validation-in-the-settings-panel
https://www.wix.com/corvid/reference/$w.ValidatableMixin.html

the login page is still white! I have double and triple checked everything… What is going on. People have complained over and over that they can’t login to post or comment