Use Indicative for Auth in React?

Hello everyone,
So I read this medium article that used Indicative in react to make a login and register component. The component(s) communicated with a rest api and indicative handled validating the data. Here is the article (https://blog.usejournal.com/easiest-user-validation-on-authentication-with-indicative-on-reactjs-432e6a8b790c).

This is the code he wrote for the article
https://github.com/sandipguchait/react-blog/blob/master/

I copied this code into my own local environment and does not seem to be working.
Here is the link to my project: https://codesandbox.io/s/sweet-bassi-e44o3
The error messages are not working and it’s not authenticating with the REST api.

Any suggestions?

1 Like

Out of curiosity, I tried it with Vue. It’s working perfectly fine for me. Haven’t tried with react yet.

I think If it is working with Vue, It should with React as well.

I don’t know if you’re familiar with Vue or not but anyway I’m sharing the code. It is same for react as well.

<template>
  <div>
    <div class="error" v-for="error in errors" :key="error.message">
      <h4>{{ error.message }}</h4>
    </div>
    <br />
    <div>
      <input v-model="email" placeholder="enter your email" type="email" />
    </div>
    <br />
    <div>
      <input
        type="password"
        v-model="password"
        placeholder="enter your password"
      />
    </div>
    <br />
    <button @click="submit">Login</button>
  </div>
</template>

<script>
import { validate } from "indicative/validator";

export default {
  data() {
    return {
      email: "",
      password: "",
      errors: []
    };
  },
  methods: {
    submit() {
      const rules = {
        email: "required|email",
        password: "required|min:4"
      };
      const messages = {
        "email.required": "Email is required",
        "email.email": "Email should be valid",
        "password.min": "Password should have at least 4 characters",
        "password.required": "Password is required"
      };
      const data = { email: this.email, password: this.password };
      validate(data, rules, messages)
        .then(data => alert("Everything is good!"))
        .catch(err => (this.errors = err));
    }
  }
};
</script>

<style scoped>
.error {
  background-color: red;
  color: white;
}
</style>

want to see a demo? . Here it is

3 Likes