title: Cannot POST/ register error in vue using firebase
body: <p>I am building an Vue JS front-end website and trying to install the login and register mechanism using Firebase. I am using Vue CLI and have successfully integrated the app with firebase. When i use the createUserWithEmailAndPassword method in the registration page, and submit the form, it just shows &quot;Cannot POST/ register&quot; and the user is not registered in the firebase console. I am sharing the code below. Any help will be appreciated.</p>
  <p>main.js</p>
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import 'jquery'
  import 'popper.js'
  import './assets/app.css'
  import { initializeApp } from &quot;firebase/app&quot;;
  import router from './router'
  
  Vue.component('Navbar', require('./components/Navbar.vue').default)
  Vue.component('Cart', require('./components/Cart.vue').default)
  Vue.component('Login', require('./components/Login.vue').default)
  Vue.component('Register', require('./components/Register.vue').default)
  Vue.config.productionTip = false
  
  const firebaseConfig = {
    apiKey: &quot;AIzaSyDwKw8bVZVlEOSUYhAbYhjHSzfyBZY0PsU&quot;,
    authDomain: &quot;sit120-project.firebaseapp.com&quot;,
    projectId: &quot;sit120-project&quot;,
    storageBucket: &quot;sit120-project.appspot.com&quot;,
    messagingSenderId: &quot;780558279869&quot;,
    appId: &quot;1:780558279869:web:251ab9e3d9a286d64c83d4&quot;
  };
  
  // Initialize Firebase
  export const firebase_app = initializeApp(firebaseConfig);
  
  
  new Vue({
    router,
    render: h =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  <p>Register.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;register&quot;&gt;
      
      &lt;div class=&quot;center&quot;&gt;
          &lt;h1&gt;Sign Up&lt;/h1&gt;
          &lt;form method=&quot;post&quot;&gt;
              &lt;div class=&quot;txt_field&quot;&gt;
                  &lt;input v-model=&quot;fullname&quot; type=&quot;text&quot; required&gt;
                  &lt;label for=&quot;&quot;&gt;Full Name&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;txt_field&quot;&gt;
                  &lt;input v-model=&quot;email&quot; type=&quot;text&quot; required&gt;
                  &lt;label for=&quot;&quot;&gt;Email&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;txt_field&quot;&gt;
                  &lt;input v-model=&quot;username&quot; type=&quot;text&quot; required&gt;
                  &lt;label for=&quot;&quot;&gt;Username&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;txt_field&quot;&gt;
                  &lt;input v-model=&quot;password&quot; type=&quot;password&quot; required&gt;
                  &lt;label for=&quot;&quot;&gt;Password&lt;/label&gt;
              &lt;/div&gt;  
  
              &lt;button @click=&quot;regist&quot;&gt;Register&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import {firebase_app} from '../main.js'
  export default {
    name: 'Register',
    data(){
        return{
          fullname:null,
          email:null,
          username:null,
          password:null,
        }    
    },
    methods:{
        regist(){
           firebase_app.auth().createUserWithEmailAndPassword(this.email, this.password)
              .then((userCredential) =&gt; {
                  // Signed in 
                  var user = userCredential.user;
                  // ...
              })
              .catch((error) =&gt; {
                  var errorCode = error.code;
                  var errorMessage = error.message;
                  // ..
              });
        }
    },
    props: {
      msg: String
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>router.js</p>
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Home from '../views/Home.vue'
  Vue.use(VueRouter)
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/admin/users',
      name: 'admin-users',
      component: AdminUsers
    },
    {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =&gt; import(/* webpackChunkName: &quot;about&quot; */ '../views/About.vue')
    },
    {
      path: '/login',
      name: 'Login',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =&gt; import(/* webpackChunkName: &quot;login&quot; */ '../components/Login.vue')
    },
    {
      path: '/register',
      name: 'Register',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =&gt; import(/* webpackChunkName: &quot;register&quot; */ '../components/Register.vue')
    },
    {
      path: '/products',
      name: 'Products',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =&gt; import(/* webpackChunkName: &quot;products&quot; */ '../views/Products.vue')
    }
  ]
  
  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
  
  export default router
  </code></pre>