Vue
In this guide you will learn how to add authentication to your Vue application using the Hanko custom element.
Install dependencies
Install the @teamhanko/hanko-elements
package:
- npm
- Yarn
npm install @teamhanko/hanko-elements
yarn add @teamhanko/hanko-elements
Register custom element with Vue
Vue needs to know which elements to treat as custom elements, otherwise it will issue a warning regarding component
resolution. To do so, provide a predicate function that determines which elements are to be considered custom elements
to compilerOptions.isCustomElement
in your configuration:
- Vite Config
- Vue CLI Config
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag === "hanko-auth"
}
}
})
]
}
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => ({
...options,
compilerOptions: {
isCustomElement: (tag) => tag === "hanko-auth"
}
}))
}
}
Import & use custom element
Import the register
function from @teamhanko/hanko-elements/hanko-auth
in the component where you want to use the
Hanko custom element. Call register
to register the <hanko-auth>
element with the browser's
CustomElementRegistry
. Then use the
element in your component template.
When adding the <hanko-auth>
element to your template you must provide the URL of the Hanko API via the api
attribute. If you are using Hanko Cloud, you can find the API URL on your project dashboard.
If you are self-hosting you need to provide the URL of your running Hanko backend.
<script setup>
import { onMounted } from "vue";
import { register } from "@teamhanko/hanko-elements/hanko-auth";
const api = import.meta.env.VITE_HANKO_API;
const lang = import.meta.env.VITE_HANKO_LANG;
onMounted(() => {
// register the component
// see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
register({ shadow: true })
.catch((error) => {
// handle error
});
});
</script>
<template>
<hanko-auth :api="api" :lang="lang" />
</template>
Defining login callbacks
The <hanko-auth>
element dispatches a custom hankoAuthSuccess
event on successful login. React to this
event in order to, for example, redirect your users to protected pages in your application.
To do so, you can use Vue's v-on
directive (shorthand: @
) and supply a callback directly on the <hanko-auth>
element:
<script setup>
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import { register } from "@teamhanko/hanko-elements/hanko-auth";
const api = import.meta.env.VITE_HANKO_API;
const lang = import.meta.env.VITE_HANKO_LANG;
onMounted(() => {
// register the component
// see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
register({ shadow: true })
.catch((error) => {
// handle error
});
});
const router = useRouter();
const redirectAfterLogin = () => {
// successfully logged in, redirect to a page in your application
router.push({ path: "..." });
};
</script>
<template>
<hanko-auth @hankoAuthSuccess="redirectAfterLogin" :api="api" :lang="lang" />
</template>
UI customization
The styles of the hanko-auth
element can be customized using CSS variables and parts. See our guide
on customization here.
Backend request authentication
If you want to authenticate requests in your own backend, please view our backend guide.