The login method will be almost identical to the sign up. The differences are:

• We only send the username and password in the request body, to the /login path
• The response is the user object we need to set into the global state so every component can know if there is a connected user (using the plugin we made exposing the $state property)
• Then we redirect to the home page

It should look like this now:

async login () {
  this.$state.user = await this.$fetch('login', {
    method: 'POST',
    body: JSON.stringify({
      username: this.username,
      password: this.password,
    }),
  })
  this.$router.push({ name: 'home' })
},

You can now try to log in with the username and the password you used to create the account earlier. If the login is successful, you should be redirected to the home page thanks to the router.push() method.

The user object returned by this request contains the username field that will be displayed in the navigation menu.