Authentication

Authentication is the process of recognizing a user's identity. If a user is logged in, it adds authentication information to your requests. Then, by comparing this information to the credentials stored in your backend, we can associate a request with the specific user making it.

All operations related to this process can be handled with methods exposed by useUser composable

User registration

Registering a new user can be done using register method.

<template>
  <form @submit.prevent="register({ user: form })">
    <!-- form fields -->
    <button type="submit" :disabled="loading">Submit</button>
  </form>
</template>

<script>
import { ref } from '@nuxtjs/composition-api';
import { useUser } from '@/composables';

export default {
  setup () {
    const { register, loading } = useUser();
    const form = ref({
      email: '',
      password: '',
      firstName: '',
      lastName: '',
      acceptsMarketingEmails: false
    });

    return {
      register,
      loading,
      form
    }
  }
}
</script>

User login and logout

The useUser composable also provides a login method that accepts a username and password.

<template>
  <form @submit.prevent="login({ user: form })" v-if="!isAuthenticated">
    <!-- form fields -->
    <button type="submit" :disabled="loading">Login</button>
  </form>
  <div v-else>
    Hello {{ user }}
  </div>
</template>

<script>
import { ref } from '@nuxtjs/composition-api';
import { useUser } from '@/composables';

export default {
  setup () {
    const { login, isAuthenticated, user, loading } = useUser();
    const form = ref({ 
      username: '', 
      password: '' 
    })

    return {
      login,
      form,
      user,
      isAuthenticated,
      loading
    }
  }
}
</script>

user ref (opens new window) either contains an object of the signed-in user or equals null

Similarly, useUser has logout method that we can use to log out the logged-in user.

<template>
  <button 
    v-if="isAuthenticated"
    :disabled="loading"
    @click="logout"
  >
    Log out
  </button>
</template>

<script>
import { useUser } from '@/composables';

export default {
  setup () {
    const { logout, isAuthenticated, loading } = useUser();

    return {
      logout,
      isAuthenticated,
      loading
    }
  }
}
</script>

Changing password

Changing a user's password can be done with changePassword method of useUser composable.

<template>
  <form @submit.prevent="changePassword({ ...form.value })">
    <!-- form fields -->
    <button type="submit" :disabled="loading">Submit</button>
  </form>
</template>

<script>
import { ref } from '@nuxtjs/composition-api';
import { useUser } from '@/composables';

export default {
  setup () {
    const { changePassword, loading } = useUser();
    const form = ref({
      current: '',
      new: ''
    });

    return {
      changePassword,
      form,
      loading
    }
  }
}
</script>

Error handling

useUser composable stores error messages returned from the backend, making them user-accessible through the error property.

<template>
  ...
    <div v-if="loginError">
      {{ loginError.message }}
    </div>
    
    <div v-if="registerError">
      {{ registerError.message }}
    </div>

    <div v-if="changePasswordError">
      {{ changePasswordError.message }}
    </div>
  ...
</template>

<script>
import { useUser } from '@/composables';

export default {
  setup () {
    const { error } = useUser();
    const loginError = error.value.login
    const registerError = error.value.register
    const changePasswordError = error.value.changePassword

    return {
      loginError,
      registerError,
      changePasswordError
    }
  }
}
</script>

The error property contains possible errors for every action performed around useUser composable: login, register, updateUser, load, changePassword and logout.

When no error is returned by a given action, its value equals null.