Login with just an email address?

Discussion Ask a question
, ,
1

Hi,

My scenario is very simple but I am struggling to implement the correct code!

I have a page that I want only to be viewable by Members but in order to approve a member it is essential that we have additional information to ensure that they meet approval. Therefore the Wix Members login will not work for what I am trying to achieve. Once approved it is not essential that the page is password protected but I would like ONLY members to be able to view the specific page by using their email address to login (and checking their approval status - set as a boolean field)

So far, I have a custom sign up form which inputs data into a collection ‘MembersOnly’. How do I check that an inputted email address matches one in the MembersOnly collection and how do I secure the page so that only logged in members can view it?

It really isn’t viable to use the current Wix Members Login (unless there is a way of capturing additional data?) so I would be really grateful if someone could point me in the right direction.

Many thanks,
Rachel

2

Hi Rachel:

I think you may be confusing two different actions, registration and login.

It seems to me what you want to do is register the user with the properties that you need to check and then use the registered information that you get during registration to verify that the visitor is a member.

If you follow the process and most of the code here you can do just what you are looking to do.

For your purpose you probably don’t need to use the wix-users or wix-crm APIs as all these really do is provide a more secure registration and login/logout process that forces you to use the Dashboard CRM. While this may be more secure, it is more difficult to use and highly restricts what you can do without interacting with the dashboard interface.

3

Hi,

Sorry, I possibly didn’t word my post correctly but what you said is exactly what I am trying to achieve! I have tried following the wix code tutorial on building a members area but this still directs the user to the standard wix login, where as I just want users to login with an email address?

I’m also unsure how to secure a specific page without actually setting the permissions of the page (which prompts the wix login). I’m assuming my page needs to be dynamic but how do I create a logged in session on that page?

Thanks,
Rachel

4

Hi Rachel:

The trick is to ignore the section about logging in because you have to create your own log in page.

Basically what you want to do is intercept the page request and examine the fields you use from your own login form to manage access.

So one approach would be to use lightboxes.

Design all of your member only pages as light boxes. This way when your page loads you have control of when a lightbox loads and if it loads.

The other thing you will need to do (which wix handles for you with wix-users) is remember that the user is a member. Depending on what you are trying to do you will probably need to keep a cookie with information that you can use to determine if a visitor has registered. This means you will probably need to use wix-storage (wix-storage-frontend - Velo API Reference - Wix.com) to save some unique information such at the Member record _id from the data collection. So if they have visited your site and ‘logged in’ before you take their information store it in the member data collection and then save the record id in a local store key value pair. Whenever you load a new page you can then check the cookie using wix-storage to see if the id is there. If not you show them a login screen and if the record they try to login with doesn’t match any record in your data collection then they need to register.

So when your special pages load you have a check in the $w.onReady() function that uses wix-storage to look for a membership token cookie.

if you don’t find a membership token cookie then you can launch a login lightbox page using wix-windox.openLightBox function (https://www.wix.com/code/reference/wix-window.html#openLightbox to ask the user to log into your site. If the login credentials match a Member record then you save a membership token in local storage using wix-storage.

If the login doesn’t find a member record then you need to have the user register as a member.

If you find a membership token cookie you look for the membership token in your member database (I would consider doing this in backend code). If the token matches a member database record then you launch the target lightbox using the wix-windox.openLightBox function (https://www.wix.com/code/reference/wix-window.html#openLightbox).

If you don’t find a member record that matches the member token cookie data then the membership data may have been deleted or the cookie data could be fake. Either way you need the user to register again.

Typically this is the functionality you would put in a router (wix-router - Velo API Reference - Wix.com) but this would be more complicated as you need to load a page to be able to read the cookie data. Routers run on the server before a page loads and makes decisions that determine what page or error message should be returned to the user. Technically you could redirect the router to a cookie reader page that doesn’t load content but merely reads information from cookies and then uses wix-locationto() to redirect the original call with added query parameters from cookies to the router.

I may have overloaded you with data here. There are many different approaches you can take but they all need you to remember the user after they register with you and login at most one time per visit (session) to your site. Otherwise they will likely get frustrated.

Lastly, make sure you are recording the visitors permission to record cookies during registration (that’s a legal requirement).

Hope this helps!

5

Wow! Thank you so much for providing me with detailed information :slight_smile:

Since my last post I decided to follow this tutorial Velo Tutorial: Creating a Custom Registration Form with Code | Help Center | Wix.com which has allowed me to enter all the information I require directly into the Wix Site Members List and will also allow me to easily approve them. I’ve also decided to include a password as I’m sure this may be something I require, in the future.

So, with that in mind and the fact I still need to ignore the Wix Login (as, by default, this would allow users to signup just with email and password by following the pre-determined link) do the steps you mentioned still apply?

I know I’m punching above my weight to try and get this sorted. I understand all the logic, I’m just struggling with how to achieve it!

Your time is very much appreciated!

Rachel

6

Well the real problem with the code backend for crm is that you cannot create your own login page. You can create your own register page but not a login page (not sure why but asking for this feature is a good idea).

If you do decide to use the wix-crm/wix-users apis for secure user access you really have to maintain your own member data collection, that duplicates the crm data, because there isn’t a way to get pre-existing data that might exist in the crm data collection for you to provide edit capabilities for.

So the only way to effectively manage crm data is keep a copy in your members data collection and whenever you change the data use the wix-crm.createContact() function to make the same changes.

Also note you can add new properties to the crm for your members using the Dashboard CRM page. You can update these properties using register() with crm properties mentioned here:

BUT note that you need to manage the custom field mappings because the keys are generated for you using the generic customField format. See my post here on this issue:

As I mentioned earlier, this is still a pretty complicated area due to several design issues with the crm api.
You might want to take a look at and participate in this thread:

7

Ah ok, I was struggling to understand why I couldn’t create a login page that queried the Members List directly!

So, here’s my next thought…

I use the wix signup/ login feature which, if not signed up allows the user to sign up then directs them to a form to capture additional information. But, if I set the page I want viewable to Members as ‘Members Only’ then this will just take them to the Wix Signup form but wouldn’t then direct them to the page to capture additional information, is that correct? So, how do I direct a user to capture the additional information? Would I need the page to be dynamic and if not logged in then redirect them to the signup that then captures additional info?

I’m so sorry if this is all sounding a bit confusing, I’m sure what I’m trying to do is really very simple!

Thank you for you continued help.

Rachel

8

Hi Rachel:

This is where promises come into play and can also be a little hard to understand.

If you look at the wix-users.promptForLogin() function (https://www.wix.com/code/reference/wix-users.html#promptLogin) you will see they return a Promise.

You can familiarize yourself with what a Promise is here (Using promises - JavaScript | MDN). Essentially because you have to wait for the registration/login to happen (it is an asynchronous operation) the login function gives you an object called a promise which operates in a similar way to a callback function. When the login/register completes then the promise completes (this is called resolving). Once this happens you can .then() do something else.

So if you add a .then() call to the promptForLogin() call you can do something else when the function completes successfully. So for example

import wixUsers from 'wix-user';
import wixWindow from 'wix-window';

// Launch Wix sign up page
wixUsers.promptForLogin({'mode':'signup'})
    .then((userRecord) => {
        if (userRecord) {
            // We have a user Record to work with

        } else {
            // Tell user that there was a problem - this is likely to be that they cancelled the login screen
            // By clicking the X in the top left of the screen.
            // Load form to capture other user info.
            wixWindow.openLightbox('additionalUserInfoForm");

        }
    }
    .catch((error) => {
        // If a problem occurs with the prompt login then it will throw and exception so you should 
        // catch it and report the error to the user
   }
9

Thank you, you’re being most helpful!

With this in mind I think I need to go back to my original thought of allowing users to login just by email so I have decided to completely bypass using the Wix signup/ login and approve members by using a boolean field in a members collection I’ve created myself.

I have the form where members can sign up and this inserts info correctly into the dataset. I will then use a lightbox on the page that is only to be accessible by members, prompting them to enter their email address before they can view the page.

I’m assuming this can be done by simply checking the email address against the relevant field in the database? It really doesn’t need to be overly complicated as the site will be used by a very limited number of people (all I’m really trying to avoid is someone randomly coming across the page and being able to access the data)

So, do I just have to do something like…

Always load lightbox when page loads

User enters email address and submits

if user exists in database, close the lightbox

else, prompt user to go to the sign up page

:slight_smile:

10

You may still want to remember that the visitor/member is working in the session that they have ‘logged into’. So for example if they log in and you remove the lightbox and the user refreshes the page in the browser then the lightbox will return and they will be asked to log in again. If that is what you want them to do then your outline above seems reasonable. If it isn’t then you need to use wix-storage to remember that they have logged in and effectively log them in behind the scenes and don’t show the login light box again.

Hope that makes sense.

11

Hi,

I have started putting together the basic functionality for checking an email address and once I have this working I will then look to moving it to a lightbox and applying session tokens etc.

The code works in so far as it will redirect me to a page if the email exists and approved status is true but it doesn’t show #textError if the email does not exist. What am I missing?!!

export function btnLogin_click(event, $w) {

    wixData.query("MembersOnly")
        .eq('email', $w('#inputEmailAddress').value)
        .eq('approved', true)
        .find()
        .then((results) => {
 let items = results.items;
 let item = items[0];
 let email = item.email;

 if (results.length > 0) {
                console.log(email);
                wixLocation.to("/isw");
            }
 else {
                console.log("Email address does not exist");
                $w('#textError').show()
            }
 
        })
        .catch((err) => {
 let errorMsg = err;
            console.log(errorMsg);
        });

}

Thank you so much for all your help.
Rachel

12

Rachel:

I think you should review your logic on this.

I would start by checking the length of the queryResult. If the length is 0 then the statement:

let item = items[0];

will fail and generate an exception which should be being caught by your catch() statement.

You don’t need to be trying to grab the email value if there isn’t one :wink: