Passing invalid password notification to the user

I am building a sign up flow and when a user is creating an account and enters an invalid password, nothing is shown to them, so it appears as if the app does not work. When you go into the development environment you can see the invalid password error.

Is there a way to notify the user that the password that they have entered does not meet the requirements (upper case, special character, etc.)? Thank you! Sign up code below:

`<script>
 (() => {
   new Vue({
     // Mounts component on the element with ID sign-up-form
     el: "#sign-up-form",
     data: {
       errors: [],
       // We'll store our data in a object with the key "form"
       form: {
         email: "",
         password: "",
         lastName: "",
         firstName: "",
         phone: "",
         authProfileId: EightBase.config.authProfileId,
       },
       // This mutation is what the gql api will use to signIn the user after signUp
       signInMutation: `
       mutation(
         $email: String!,
         $password: String!,
         $authProfileId: ID!
       ) {
         userLogin(data: {
           email: $email,
           password: $password,
           authProfileId: $authProfileId
         }) {
           success
           auth {
             idToken
             refreshToken
           }
         }
       }
     `,
       // This mutation is what the gql api will use to sign up the
       signUpMutation: `
       mutation(
         $authProfileId: ID!
         $password: String!
         $firstName: String
         $lastName: String
         $email: String!
         $phone: String

       ) {
         userSignUpWithPassword(
           authProfileId: $authProfileId,
           password: $password
           user: {
             firstName: $firstName
             lastName: $lastName
             email: $email
             phone: $phone
           }
         ) {
           id
           createdAt
         }
       }
     `,
     },
     methods: {
       handleError(error) {
         console.log(error);
       },
       // If there are no errors after signUp, this method logs in the user
       login(result) {
         if (result.errors) { //fix**
           this.errors = result.errors;
           return;
         }

         /* Submit request to API */
         EightBase.api.request({
           data: JSON.stringify({
             query: this.signInMutation,
             variables: this.form,
           }),
           success: (result) => {
             EightBase.store.set("auth", result.data.userLogin.auth);
             window.location.replace(EightBase.config.routes.loginRedirect);
           },
           error: this.error,
           /* Skips auth */
           beforeSend: null,
         });
       },

       // This is the method we bound to our form button, which executes the sign up request.
       signUp(event) {
         if (event) event.preventDefault();
         if (event) event.stopPropagation();

         console.log("Logging in user...");

         /* Submit request to API */
         EightBase.api.request({
           data: JSON.stringify({
             query: this.signUpMutation,
             variables: this.form,
           }),
           success: this.login,
           error: this.handleError,
           /* Skips auth */
           beforeSend: null,
         });

         return false;
       },
     },
     watch: {
       errors(errors) {
         errors.forEach(console.log);
       },
     },
   });
 })();
</script>`

Hello!

You can catch the error from your request and then, use external modules such as vue-toastify or sweetalert to display request’s error message or your own custom error message.

1 Like

Thanks Juan!

I’ve added alert(result.errors) inside of the login method’s if(result.errors) section, but it is not returning the specific error, just showing the user “[Object Object]” as the error message. Do you know how to pass the specific error to the user? Thank you!

Hey, did you tried printing JSON.stringify(result.errors) ?