Creating log in/ log out buttons for access to members area to utilize in mobile

Ask the community
, , ,
1

I’m having trouble with
Due to the limitations with the member login bar, particularly for mobile, I’m hoping to create a simple login and logout button to integrate into my menu that engages the same login lightbox popup as the member bar and functions pretty similiarly.
I’m new to coding and most of what I’ve read from the forums is pretty old and none of the code seems to be doing much.

Thanks in advance!

Working in
Wix Studio Editor

2

It should be pretty straightforward with a button for each (Prompting login, and logging out the member).

You’ll likely need something like this:

import { authentication } from "@wix/site-members";
import { logout } from "@wix/authentication";
import { location } from "@wix/site-location";

$w.onReady(function () {
    // 1. Login
    $w("#loginButton").onClick(async () => {
        try {
            const member = await authentication.promptLogin({ mode: 'login' });
            console.log("Member is logged in:", member);
        } catch (error) {
            // This catches if the user closes the login window or if an error occurs
            console.error("Login failed or cancelled:", error);
        }
    });

    // 2. Logout
    $w("#logoutButton").onClick(async () => {
        try {
            await logout();
            console.log("Logout successful");

            // Redirect to home page or login page
            location.to("/");
        } catch (error) {
            console.error("Logout failed:", error);
        }
    });
});