Authenticating Users

So far, users can now signup with our app. The next thing we want them to be able to do is login into our app. To acheive that, we'll create a new component and call it LogInForm. Within the src/components/Auth, create a LogInForm.vue file, then paste the code below into it:

// src/components/Auth/LogInForm.vue

<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">Log In</h2>

      <Notification
        :message="notification.message"
        :type="notification.type"
        v-if="notification.message"
      />

      <form class="ui form" @submit.prevent="login">
        <div class="field">
          <label>Email</label>
          <input type="email" name="email" v-model="email" placeholder="Email" required>
        </div>

        <div class="field">
          <label>Password</label>
          <input type="password" name="password" v-model="password" placeholder="Password" required>
        </div>

        <button class="fluid ui primary button">LOG IN</button>

        <div class="ui hidden divider"></div>
      </form>

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

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Don't have an account? <router-link to="/signup">Sign Up</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

Within the login form use the Notification component. Once the form is submitted, the login method will be called.

Next, let's add the corresponding JavaScript to the component. Still within src/components/Auth/LogInForm.vue, add the code below just after the template section:

// src/components/Auth/LogInForm.vue

<script>
    import Notification from '@/components/Notification'

    export default {
        name: 'LogInForm',
        components: {
            Notification
        },
        data () {
            return {
                email: '',
                password: '',
                notification: {
                    message: '',
                    type: ''
                }
            }
        },
        beforeRouteEnter (to, from, next) {
            const token = localStorage.getItem('tweetr-token')

            return token ? next('/') : next()
        },
        methods: {
            login () {
                axios
                    .post('/login', {
                        email: this.email,
                        password: this.password,
                    })
                    .then(response => {
                        // save token in localstorage
                        localStorage.setItem('tweetr-token', response.data.data.token)

                        // redirect to user home
                        this.$router.push('/')
                    })
                    .catch(error => {
                        // clear form inputs
                        this.email = this.password = ''

                        // display error notification
                        this.notification = Object.assign({}, this.notification, {
                            message: error.response.data.message,
                            type: error.response.data.status
                        })
                    })
            }
        }
    }
</script>

This is identical to the SignUpForm component. Once the form is submitted, a POST request is made to the /login endpoint of our API passing along the user's email address and password. If the authentication was made successfully, we save the token returned in localstorage then redirect to the user homepage. If there was an error, we display the error returned by passing it to the Notification component.

Adding Login Route

Just as we did with the SignUpForm component, we also need to define a /login route. Open src/router/index.js, and add the code below to it:

// src/router/index.js

import LogInForm from '@/components/Auth/LogInForm'

// add these inside the `routes` array
{
    path: '/login',
    component: LogInForm
},

Now when we visit the /login route, we should see our login form as in the image below: