Issue with custom login form

Ask the community
, ,
1

I am trying to create a custom login form that authenticates users based on a third party API. I am following the documentation found here exactly. generateSessionToken - Velo API Reference - Wix.com

My problem is this. My custom login page does not seem to work at all. If I send a login request for a user that exists in my third party database but not in wix I get the following response from the login function: authentication failed (-19976).

Also the request payload includes a plaintext username and password. In my custom login page I am encoding the password with base 64 before calling the third party login function.

Here is where it gets interesting. Out of curiosity I commented out my function entirely and JUST added the following code to my onReady function.

console.log("we're in here boys")

When I load the custom login lightbox I do not get that string logged to the console, but I DO get the following…

Running the code for the Custom Login page. To debug this code in your browser's dev tools, open h4042.js.

and then…

Cannot find module 'wix-members-backend' in 'public/pages/h4042.js'

This tells me that wix IS loading the custom login lightbox, but for some reason it is not seeing ANY OF THE CODE that I am writing on the lightbox page.

Again it WILL log in a user successfully IF they are a user on the wix site, but it is completely ignoring the function that I wrote to authenticate users. If you want to see the EXACT code that I wrote for my login function simply check out the documentation. It is EXACTLY the same generateSessionToken - Velo API Reference - Wix.com

Oh and here is the setting showing that I am in fact using the custom login page instead of the default one:

2

You are trying to import the ‘wix-members-backend’ from the front end and that’s not possible.
For the front end code you need to import from ‘wix-members’.

3

Thank you for the reply. I was getting frustrated trying to debug this.

4

So I am able to load the page but after sending the login request for a user that is not in wix this is what I am seeing.

5

@amotor Post your code

6

@jonatandor35 Just like the example in the documentation There are three total files to handle the login. Two backend .jsw files and the code on the custom login box. See: generateSessionToken - Velo API Reference - Wix.com

Here they all are:

Send the request to external API:

 import wixSecretsBackend from 'wix-secrets-backend';
import axios from "axios"
import encode from "nodejs-base64-encode";

export async function sendLoginRequest(email, password) {
    const u = await wixSecretsBackend.getSecret("userName")
    const p = await wixSecretsBackend.getSecret("password")
    const baseUrl = await wixSecretsBackend.getSecret("baseUrl")

    //encode data
    const sendEmail = encode.encode(email, "base64")
    const authInfo = await encode.encode(`${u}:${p}`, "base64")

    axios({url: `${baseUrl}/Owners/Authenticate?encodedUserNameOrEmail=${sendEmail}&encodedPassword=${password}`, method:"get", headers:{ Authorization: `Basic ${authInfo}`}}).then(res => {
        console.log("response from API", res) // does not log to the console
    
        return res.Value 
    })
}

Sets up the API Call

import {authentication} from 'wix-members-backend';
import {sendLoginRequest} from "backend/Authentications/Login"

 export function getLoginToken(email, password) {

     return sendLoginRequest(email, password).then((response) => {
         console.log(response) // does not log anything to the console
         let isAuthenticated = response.Valid
         let ownerId = response.OwnerID
         if(isAuthenticated) {
             return authentication.generateSessionToken(email).then((sessionToken) => {
                 return {
                     sessionToken,
                     approved: true
                 }
             })
         }
         return {approved: false}
     })
 }

Front end Custom login form:

import encode from "nodejs-base64-encode";
import {authentication} from 'wix-members';
import {getLoginToken} from "backend/login"

$w.onReady(function () {
    console.log("correct form") // logs to the console
})

export async function login() {
    console.log("calling API login") // logs to the console
    const email = $w("#email")
    const password = await encode.encode($w("#password"), "base64")

    getLoginToken(email, password).then((loginResult) => {
        if(loginResult.approved) {
            authentication.applySessionToken(loginResult.sessionToken)
        } else {
            $w("#generalErrMsg").text = "email or password is incorrect. Please try again"
        }
    })
}

The other weird thing is that the error that I am getting to the console after submitting the form is a POST request error, however I am sending the login information via a GET request. I’m not sure if this is just how Wix readies the login function, however because of the fact that the login works if the user exists in the WIX database without throwing an error it is almost like the custom login form is STILL completely ignoring the function that I wrote.

I also did make sure that I set the onClick function to the custom login function.

7

@amotor Since you’re using some packages I can’t go over your code to see if it fits the docs. But in general error 401 means unauthorized request.
So check the password and make sure it’s correct + try to run a simpler request first via API testing tools and see what you get.