# AuthenticationStates
# Example
<template>
<AuthenticationStates @authentication-state-changed="handleAuthenticationStateChanged">
<template #logo>
<div class="u-txt-c u-mb">
<img :alt="$t('login.images.logo.alt')" class="page-login__logo" src="../../static/theme/logo.png" />
</div>
</template>
</AuthenticationStates>
</template>
<script>
import { useLogin, useContext, AuthenticationStates, AUTH_STATE_VALID } from '@jdi/vue-backoffice-library'
export default {
components: {
AuthenticationStates
},
setup(_, context) {
const { route, router } = useContext(context)
const { handleAfterLogin } = useLogin({ route, router })
return {
handleAfterLogin
}
},
methods: {
handleAuthenticationStateChanged(state) {
// Redirect
if (state === AUTH_STATE_VALID) {
this.handleAfterLogin()
}
}
}
}
</script>