webAuth.login returns 403 access denied. custom username and password login

Help
1

Hello All,
As am completely new to Auth0, I am really stuck at one point. I will try my best to explain my scenario.
I am on to a project(Nodejs and MongoDB, plain javascript at front end along with ajax to make API calls)
I am using Auth0.js SDK for Web to call auth0 Apis at frontend as because I have a requirement saying we should use custom login screens
and redirection shouldn’t happen to auth0 screens.

Whenever I am using webAuth.login with username and password and setting my Default Directory to “Username-Password-Authentication”
to do “custom login” along with Google and Facebook(these are achieved)
I get an error stating 403 access denied “wrong username and password”.

Note - created a rule “whitelisting email domain”.
I am confused with implementation i.e

  • what category does app fall into “Regular web app” or “SPA”? currently - its “Regular web App”
  • why do i need to have a database integrated with Auth0 ?
  • Am I on the right authorization flow ?

my configuration looks like.

const REDIRECT_URL = window.location.origin + "/callback";

//configuring auth js client 

        const webAuth = new auth0.WebAuth({
            domain : 'MY_DOMAIN',
            clientID : 'MY_CLIENTID',
            responseType: 'token id_token',
            redirectUri: REDIRECT_URL,
            scope: 'openid'
            });

my webAuth login function looks like.

function emailLogin(){
    console.log("custom login");
    const username = $("#uname").val();
    const password = $("#psw").val();
    console.log("uname", username);
    webAuth.login({
        username : username,
        password : password,
        connection : 'username-password-authentication'
    },function(err, authResult){
        if(err){
            console.log("errorrr-->", err);
        }
        else{
            console.log("sucess-->", authResult);
			//ajax call to my apis
        }
    });
}

function callback(){
	console.log("Hello from callback")
 }

my flow of implementation is once I hit the Auth0 API from javascript
and receive auth response i.e tokens and all, will send them to my backend using ajax( ajax call in the callback) and save them in my tables.

My confusion may seem really simple but I see a great learning experience and little help will be a great guide and highly appreciated.

Thanks in advance.