Local-userpass not working

MongoDB Atlas App Services & Realm
#1

Hello. I’ve got Google authentication working, but email/password authentication is not working properly. Here’s my code for register and login. When I run these functions I never enter the .then or .catch expressions, and only very rarely do they actually lead to a registration/login when I look at my list of users in Stitch. I’ve tried these functions without the async prefix as well, that also doesn’t work. Can anyone suggest what I need to do?

async function loginWithEmailFunction() {

    const app = stitch.Stitch.defaultAppClient

    const credential = new UserPasswordCredential(typedEmail.toString(), typedPassword.toString())

    const loginRes = await app.auth.loginWithCredential(credential)

    .then(authedUser => console.log(`successfully logged in with id: ${authedUser.id}`))

    .catch(err => console.error(`login failed with error: ${err}`))

}

async function registerWithEmailFunction() {

    const emailPasswordClient = stitch.Stitch.defaultAppClient.auth

    .getProviderClient(stitch.UserPasswordAuthProviderClient.factory);

    const registerRes = await emailPasswordClient.registerWithEmail(typedEmail.toString(),typedPassword.toString()) 

    .then(() => console.log("Successfully sent account confirmation email!"))

    .catch(err => console.log("Error registering new user:", err));

}
#2

Hi Daniel – In this case you should be either using await or .then() . It seems like the issue here is likely due to a mix of await/promise syntax – Can you try using one or the other and letting us know if that addresses?

#3

Hi Drew,

I tried both options, and neither has fixed the issues. I can’t spot any pattern, these functions very rarely result in the desired action in my list of stitch users.

I have amended the functions to the following using .then: however the process doesn’t enter the .then or .catch, it seems to redirect back to the same login page after running .registerWithEmail

function registerWithEmailFunction() {

    var typedEmail = document.getElementById("emailAddress").value;

    var typedPassword = document.getElementById("password").value;

    const emailPasswordClient = stitch.Stitch.defaultAppClient.auth

    .getProviderClient(stitch.UserPasswordAuthProviderClient.factory);
    
    emailPasswordClient.registerWithEmail(typedEmail.toString(),typedPassword.toString()) 

    .then(() => console.log("Successfully sent account confirmation email!"))

    .catch(err => console.log("Error registering new user:", err));

}

function loginWithEmailFunction() {

    var typedEmail = document.getElementById("emailAddress").value;

    var typedPassword = document.getElementById("password").value;

    const app = stitch.Stitch.defaultAppClient

    const credential = new UserPasswordCredential(typedEmail.toString(), typedPassword.toString())

    app.auth.loginWithCredential(credential)

    .then(authedUser => console.log(`successfully logged in with id: ${authedUser.id}`))

    .catch(err => console.error(`login failed with error: ${err}`))

}
#4

Hi Daniel – Could you also provide some of the surrounding code for how these functions are called? If you like, you can DM me this.

#5

Hi Drew, I’m not sure if you got the information I sent. I’ve included my login html here:

title 
    <script>

        // const { Stitch, RemoteMongoClient, UserPasswordCredential, getProviderClient, getAuthProviderRoute, UserPasswordAuthProviderClient } = stitch;

        const client = stitch.Stitch.initializeDefaultAppClient('<App ID>');

        if (client.auth.hasRedirectResult()){

            client.auth.handleRedirectResult().then(user => {

                

                let redirectUrl = localStorage.getItem('redirectUrl');

                if (!redirectUrl) {

                    redirectUrl =   "/index.html";

                }

                window.location.replace(redirectUrl);

            });

        };

        // client.auth.logout().then(function() {

            // if (document.referrer === './pages/login.html')

            // {

                // localStorage.setItem('redirectUrl', "/index.html");                    

            // } else {

            //     localStorage.setItem('redirectUrl', document.referrer);

            // }

            

            // let credential = new stitch.GoogleRedirectCredential();

            // client.auth.loginWithRedirect(credential);

        // });

    </script> 

</head>

<body class="grey lighten-4"> 

    <nav class="z-depth-0">

      <div class="nav-wrapper container">

        <a href="/">title<span>title</span></a>

        <span class="right grey-text text-darken-1">

          <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>

        </span>

      </div>

    </nav>

    <ul id="side-menu" class="sidenav side-menu">

        <li><a class="subheader">title</a></li>

        <li><a href="/" class="waves-effect">Home</a></li>

        <li><a href="/pages/about.html" class="waves-effect">About</a></li>

        <li><div class="divider"></div></li>

        <li><a href="/pages/contact.html" class="waves-effect">

        <i class="material-icons">mail_outline</i>Contact</a>

        </li>

    </ul>

    <div class="container grey-text center">

        <h5>Welcome</h5>

        <br>   

        <h3 id="headerTag"></h3>

          <button class="loginBtn loginBtn--facebook">

            Login with Facebook

          </button>

           <br>

          <button class="loginBtn loginBtn--google"  id="google-login-btn">

            Login with Google

          </button>

        <br>    

        <p>-- or --</p>

    </div>

    

    <div class="row">

        <form class="sign-in container section" id="form-username-password">

        <div class="divider"></div>

        <div class="input-field">

            <input placeholder="" value="test5@test.com" id="emailAddress" type="text" class="validate"> 

            <label for="emailAddress">Email Address</label>

        </div>

        <div class="input-field">

            <input placeholder="" value="PwdStrong1" id="password" type="text" class="validate">

            <label for="password">Password</label>

        </div>

        <div class="input-field center">

            <button class="btn-small" id="emailPwd-login-btn">Login</button>

            <button class="btn-small" id="emailPwd-register-btn">Register</button>

        </div>

        </form>

    </div>

   

    <p><a id="emailPwd-reset-btn">I've forgotten my password</a></p>

    

</body>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>

if (client.auth.isLoggedIn) {

        headerTag.innerText = "Logged in as " + client.auth.currentUser.id;

} else {

        headerTag.innerText = "Not logged in.";

}

</script>

<script>

$(document).ready(function(){

        // function logoutFunction() {

        //     document.getElementById("logout-btn").innerHTML = "Logging out!";

        //     client.auth.logout()

        // }

        $('#google-login-btn').click(function() {

            document.getElementById("google-login-btn").innerHTML = "Logging in!";

            let credential = new stitch.GoogleRedirectCredential();

            client.auth.loginWithRedirect(credential);

        })   

        $('#emailPwd-login-btn').click(function() {

            var typedEmail = document.getElementById("emailAddress").value;

            var typedPassword = document.getElementById("password").value;

            const app = stitch.Stitch.defaultAppClient

            const credential = new stitch.UserPasswordCredential(typedEmail.toString(), typedPassword.toString())

            console.log('login:', typedEmail.toString(),typedPassword.toString());

            app.auth.loginWithCredential(credential) // loginWithCredential

            .then(authedUser => console.log(`successfully logged in with id: ${authedUser.id}`))

            .catch(err => 

            console.error(`login failed with error: ${err}`))

        })

        $('#emailPwd-register-btn').click(function() {

            var typedEmail = document.getElementById("emailAddress").value;

            var typedPassword = document.getElementById("password").value;

            const emailPasswordClient = stitch.Stitch.defaultAppClient.auth

            .getProviderClient(stitch.UserPasswordAuthProviderClient.factory);

            

            console.log('register:', typedEmail.toString(),typedPassword.toString());

            emailPasswordClient.registerWithEmail(typedEmail.toString(),typedPassword.toString()) 

            .then(() => console.log("Successfully sent account confirmation email!"))

            .catch(err => 

            console.log("Error registering new user:", err));

        })

        $('#emailPwd-reset-btn').click(function() {

            var typedEmail = document.getElementById("emailAddress").value;

            if (typedEmail === "")

            {

                alert("enter email address");

            } else {

                const emailPassClient = stitch.Stitch.client.auth

                .getProviderClient(stitch.UserPasswordAuthProviderClient.factory);

                emailPassClient.sendResetPasswordEmail(typedEmail).then(() => {

                console.log("Successfully sent password reset email!");

                }).catch(err => {

                console.log("Error sending password reset email:", err);

                });

            }

        })

    })

</script>