0

I'm trying to connect firebase with my vue3 project. I want to build a register and login in my website. I can see the register in firebase web, but when I register a user, route.push is not working to redirect on "/".

Here is my code:

Register

export default {
  name: "register",
  data: function () {
    return {
      form: {
        email: "",
        password: "",
      },
      error: null,
    };
  },
  methods: {
    register: function (e) {
      const auth = getAuth();
      createUserWithEmailAndPassword(auth, this.form.email, this.form.password)
        .then((userCredential) => {
          userCredential.user
            .updateProfile({
              displayName: this.form.email,
            })
            .then(() => {
              alert("User successfully registered!");
              this.$router.push("/login");
            });
        })
        .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          console.log(errorCode);
          console.log(errorMessage);
        });
      e.preventDefault();
    },
  },
};

Login

export default {
  name: "login",
  data: function () {
    return {
      user: {
        email: "",
        password: "",
      },
      error: null,
    };
  },
  methods: {
    login: function (e) {
      const auth = getAuth();
      signInWithEmailAndPassword(auth, this.user.email, this.user.password)
        .then((userCredential) => {
          userCredential.$router.replace({ name: "Home" }).then(() => {
            this.$router.push("/");
          });
        })
        .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          console.log(errorCode);
          console.log(errorMessage);
        });
      e.preventDefault();
    },
  },
};

Route.js

import Home from "@/views/Home.vue";
import NotFound from "@/views/NotFound.vue";
import PetDetail from "@/components/PetDetail.vue";
import Login from "@/views/Login.vue";
import Register from "@/views/Register.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },

  {
    path: "/:catchAll(.*)",
    name: "NotFound",
    component: NotFound,
  },

  {
    path: "/pet/:id",
    name: "PetDetail",
    component: PetDetail,
  },

  {
    path: "/login",
    name: "login",
    component: Login,
  },
  {
    path: "/register",
    name: "register",
    component: Register,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

When u do a register, the website have to redirect you to /. When you log in it has to redirect you to 7 too.

I have a problem with login because it is not working. I can't log in with an existed user.

Any help?¿

Thanks

Joan
  • 43
  • 5
  • Hi! Why the `replace()` call? `this.$router.push` is the only thing I do, works just as well. Do you have error messages in the browser console? – Peter Krebs Dec 06 '21 at 13:12
  • I have this mssg error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. – Joan Dec 06 '21 at 13:25
  • But I see the registers on firebase so it's working – Joan Dec 06 '21 at 13:25
  • Mmh have you checked the response itself? Might be something familiar I have answered before [It could be an HTTP 404](https://stackoverflow.com/a/54106185/10441671) – Peter Krebs Dec 06 '21 at 13:32
  • I put: this.$router.push({ name: "Home" }); and it's not working – Joan Dec 06 '21 at 13:43
  • Okay and the error stays the same? Can we see your router as well? – Peter Krebs Dec 06 '21 at 14:13
  • I put the route.js in the post. – Joan Dec 06 '21 at 14:39
  • Good, thanks! So again, the error stays the same? What about the response itself? It is a 404 response, is it not? I noticed you put the 404 page as the second entry. I use this instead and put it at the end of the router object: `path: "*",` – Peter Krebs Dec 06 '21 at 14:48
  • If I put the path "*" in NOTFOUND, my website doesn't work. About route.push. When I register an user, the page goes nowhere. It remains in the record on the same page. – Joan Dec 06 '21 at 15:11
  • Yes I also said you should put the file-not-found page at the end of the router, have you done that? Still, what about the response which leads to the error? – Peter Krebs Dec 06 '21 at 15:48
  • Sorry, I did it but is not working. I puted notfound at the final but is not working. – Joan Dec 06 '21 at 15:51
  • Well okay, hope that is how it works for you. So again what about the "text/html" response? What does it look like? What webserver do you use? What about Vue's built-in dev server, does it happen with that? Do you use Vue developer extension for the browser? – Peter Krebs Dec 06 '21 at 16:13

0 Answers0