Learn how to quickly add authentication and user profile in your Vue app using Hanko.
@teamhanko/hanko-elements
hanko-elements
provides you with access to the prebuilt components: hanko-auth
and hanko-profile
.vue-router
to setup our routes and pages with.
APP URL
..env
file.
compilerOptions.isCustomElement
in your configuration.vite.config.js
file to:
shims-vue.d.ts
in our src/
directory.
Add the following content to make TS understand .vue files:
components
and create two in it, HankoAuth.vue
and HankoProfile.vue
.
HankoAuth.vue
file to create a functioning login component.
Here we subscribe to the onSessionCreated
event, this triggers when a user successfully logs in. You can use these event to perform any desired action (e.g. redirect to your dashboard).
For more information please refer to the Auth Component Page.
HankoProfile.vue
file to create a interface where users can.Email Addresses
and credentials.
For more information please refer to the Profile Component Page.
RouterView
component from the vue-router.
First let’s set up our views which will be used by the router.
HomeView.vue
and DashboardView.vue
in a new directory /views
.
These Views will be the content that will be shown on a page.index.ts
in a new directory /router
.
In here we can set up the vue-router
just like this:
<RouterView>
component to your App.vue
file like this:
main.ts
just like this:
/
to see the <HankoAuth>
, and to /dashboard
to see the <HankoProfile>
.
They should look something like this👇
HankoAuth
is not loading please restart the application as it might’ve not loaded the .env correctly the first time.HankoProfile
will only look like the picture while you are logged in.@teamhanko/hanko-elements
to easily logout users. Here we will make a logout button.
Create LogoutButton.vue
and insert the code below.
DashboardView
just like this:
hanko-auth
and hanko-profile
components using CSS variables and parts. Refer to our customization guide.
router/index.ts
file.
For this example we created a isUserAuthenticated
function which validates our cookie using our Backend.
Here we use router.beforeEach
to validate our route if our route is added to the secureRoutes variable: