Automatic Login Code

Hi! I’ve made a website where there is a default avatar in the header that appears on every page. With help of some here, I created a code in Wix Dev that successfully replaces the header with the member’s custom profile picture once they are logged in. (See attached picture and code below)

Here is my issue:

The code I have must have something in it that makes the site log-in page pop up automatically on each new page, until the visitor signs up. This is very annoying for the user.

How can I fix this code so the log-in page doesn’t pop up automatically? I want the default header avatar to be replaced with the user’s choice…but I don’t want the log-in page to pop up, until they actually choose for themselves to click the button at the bottom of the page to “sign up”!

~SEE CURRENT CODE BELOW~

import { authentication, currentMember } from “wix-members-frontend”;

import { authentication, currentMember } from “wix-members-frontend”;

$w.onReady(function () {

**const** isLoggedIn = authentication.loggedIn();

**if** (isLoggedIn) {

fetchMemberData();

} **else** {

authentication

    .promptLogin({ mode: 'login', modal: \*\*false\*\* })

    .then(() => {

        fetchMemberData();

    })

    .\*\*catch\*\*((error) => {

        console.error(error);

    });

}

});

function fetchMemberData() {

currentMember

.getMember({ fieldsets: \\\['FULL'\\\] })

.then((member) => {

    $w('#image857').src = member.profile.profilePhoto.url;

})

.\*\*catch\*\*((error) => {

    console.error(error);

});

}

The login popup is happening because your code is explicitly calling promptLogin() whenever the visitor is not logged in.

That means on every new page load, Wix is being told to open the login screen automatically.

To fix it, remove the promptLogin() section entirely and only fetch the member data if the user is already logged in. If they are not logged in, just leave the default avatar showing.

Use this code instead:

import { authentication, currentMember } from 'wix-members-frontend';

$w.onReady(function () {
    if (authentication.loggedIn()) {
        fetchMemberData();
    }
});

function fetchMemberData() {
    currentMember.getMember({ fieldsets: ['FULL'] })
        .then((member) => {
            const profilePhoto = member?.profile?.profilePhoto?.url;

            if (profilePhoto) {
                $w('#image857').src = profilePhoto;
            }
        })
        .catch((error) => {
            console.error('Error fetching member data:', error);
        });
}

This will keep the default avatar for logged-out visitors, replace it with the member’s profile photo only after they are logged in and stop the login page from appearing automatically

Also, I noticed your import line is duplicated, so make sure you only have it once.

If you want the signup/login popup to appear only when they click a button, then that popup should be triggered from the button click instead of inside $w.onReady().

1 Like