# What's authentication?
Authentication is the operation of recognizing the user's identity. It allows us to associate incoming requests with an account or a person. To do that, provided credentials are compared with ones in the database.
The whole logic related to this process can be handled with methods shared by useUser
composable
# Registering a new user
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 { useUser } from '{INTEGRATION}';
import { ref } from '@vue/composition-api';
export default {
setup () {
const { register, loading } = useUser();
const form = ref(/* object for create user */);
return {
register,
loading,
form
}
}
}
</script>
# Checking if the user is logged in
Many interactions in the application are only available ( useUserX
functions) or look different if the customer is logged in. To check that, we will use useUser, which is one of (if not the most) widely used composable in Vue Storefront.
Like with all other composables, it's important to remember to call load
before accessing any other property or function of useUser
. Otherwise, isAuthenticated
will always return false
.
import { useUser } from '{INTEGRATION}';
import { onSSR } from '@vue-storefront/core';
export default {
setup () {
const {
load,
isAuthenticated
} = useUser();
onSSR(async () => {
await load();
});
return {
isAuthenticated
};
}
}
# Logging in
Signing in can be done using login
method.
<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 { useUser } from '{INTEGRATION}';
import { ref } from '@vue/composition-api';
export default {
setup () {
const { login, isAuthenticated, user, loading } = useUser();
const form = ref(/* object for login user */)
return {
login,
form,
user,
isAuthenticated,
loading
}
}
}
</script>
user
ref (opens new window) either contains an object of the signed-in user or equals null
# Logging out
Signing out can be done using logout
method.
<template>
<button
v-if="isAuthenticated"
:disabled="loading"
@click="logout"
>
Logout
</button>
</template>
<script>
import { useUser } from '{INTEGRATION}';
import { ref } from '@vue/composition-api';
export default {
setup () {
const { logout, isAuthenticated, loading } = useUser();
return {
logout,
isAuthenticated,
loading
}
}
}
</script>
# How does it work in integrations?
Below you can find detailed information on how we're handling authentication in different integrations.
- Commercetools
- Shopify WIP