Greetings Fellow Wixers :)
I hope that all is well
I humbly require any assistance in educating me on how to create a custom signup/login page for my site utilizing the wix-members API versus wix-users. Essentially I followed the guidelines presented at the URL below but altered the code to use wix-members api instead of wix-users but things do not appear to be functioning correctly (probably user error because i'm a noob)
wixfix | custom-login-sign-up-pages
My Code & Data
o For testing I'm using three pages: signup page (to collect user input via forms and store into 'Memberinfo' dataset AND register to the site), login page (to allow user to enter email/password and login to site| this is the part that's not working), and a 'blank' page that the user goes to automatically after logging in.
o signup page
(page permission: everyone can view)
(Memberinfo dataset permission)
(Memberinfo dataset permission: see image)
Code:
import { authentication } from 'wix-members'; import wixLocation from 'wix-location'; $w.onReady(function () { $w('#submitButton').onClick(function ()
{ //Submit User & Pass to 'Contact' CRM let email = $w('#registerEmail').value; let password = $w('#registerPassword').value; //Register User data to contact/site | email, password, & alias authentication.register(email, password, { //Created custom 'alias' (username) field in CRM and I capture that data from my form and register it as well contactInfo: { "Alias": $w('#registerAlias').value, } }) console.log("Registered New User!") .then( (result) => { let resultStatus = result.status; }) }) }); //If someone select 'PC' for selection tag then show option to enter RAM and GPU export function registerSystemsowned_change(event) { if ($w("#registerSystemsowned").selectedIndices.includes(11) ) { $w("#registerRAM").show("fade"); $w("#registerGPU").show("fade"); console.log("User selected PC during signup"); } } //Link to take folks to 'Login' page if they already have an account export function text44_click(event) { console.log("LINK: signup > login") wixLocation.to('/login') }
o login page
(page permission: everyone can view)
(No dataset added to page, because the login function uses the 'site member' data right?)
Code:
import { authentication, currentMember } from 'wix-members'; import wixLocation from 'wix-location'; $w.onReady(function () { $w('#loginButton').onClick(function () { let email = $w('#loginEmail').value; let password = $w('#loginPassword').value; //Logs users in based on the email & password entered right? authentication.login(email, password) .then(() => { let user = currentMember.getMember() console.log(user) wixLocation.to('/blank') }) }) }); //Link to take folks to Sign Up page export function text44_click(event) { console.log('LINK: login > signup') wixLocation.to('/sign-up') }
o blank page
(page permission: members only)
code:
import { authentication, currentMember } from 'wix-members'; import wixLocation from 'wix-location'; $w.onReady(function () { console.log("A member logged in and this is a member only page") let user = currentMember.getMember() let userRole = currentMember.getRoles() console.log(user) console.log(userRole) });
When I publish my site and login with the credentials for a created user it does go to the blank page but the log does not show that a user is actually logged in.
Questions:
In finer detail, what is occuring when we execute authentication.register(email, password)? This is taking user input and registering them with your site by adding their data to the "site member's" portion under CRM correct? There password is saved by the site but hidden correct?
In finer detail, what is occuring when we execute authentication.login(email,password)? Is this taking the entered input from the user (email & password), and comparing it to what is in the CRM (site member page) to determine if its valid and if so logging the user into the site?
Does this generate some special ID or token that is attached to the logged in user for their duration that they are on the site until they log out?
Anyone have any easy to understand code that will generate a message if the login credentials are not valid (i.e not a signed up user/credentials not in the site members database) "i.e. Sorry credentials are not valid, sign up if you are not a member". I'm always looking for more wix-members examples :)
Anyone have examples of how to check for the current user using wix-members? Do I just use currentmember.getMember() and print that to the console to see who my site is detecting as logged in
All my code is on the individual pages, is there anything I need to put on the global pages to help with login issues?
Sorry for the super long post, been hacking away at this for some time and i'm probably mission 1 or 2 small things but I need some help. Thank you to anyone who could offer any idea, or advice. One day when my site is making millions, I will remember the help and throw you a few bones 😀
aLvin
Greetings Wixers
Thank you @Yisrael (Wix) , the links you provided did provide some assistance and has helped me to get on the right track. All of those examples do utilize the wix-users API and NOT wix-members.
I know my post was a bit long but can anyone answer this one simpler question Biggest Question
A site collects email/password from user input via a form and registers the user using "authentication.register(email, password)" or 'wixUsers.register'. Does this create the user in the 'site members' portion. Where is that password stored on the site? Do you need to use a .then and capture the result somehow?
When the user logs into the website via "authentication.login(email, password)" or 'wixUsers.login' what is happening? Is the email and password being compared to what is stored on the 'site-members' tables? Once the user login, how does the site know that the user is logged in for the rest of the time that they are on the site? Do they get issued a special token or id or something?
Pre-Thanks to whoever helps me out :)
aLvin
The Wix Members with Velo documentation has 3 tutorials and additional articles detailing how to use the wix-members and wix-members-backend APIs.
Refer to the documentation on the wix-members API.
As far as the tutorial you are following, you should contact the owner of the tutorial's site for assistance. The code is lengthy and complex and best left to the author to help you decipher what's going on.