Learn how to quickly add authentication and user profile in your Nuxt app using Hanko.
@nuxtjs/hanko
@nuxtjs/hanko
module provides you with access to prebuilt components: hanko-auth
, hanko-events
and hanko-profile
APP URL
.@nuxtjs/hanko
module to the modules
section of your nuxt.config.ts
file.
hanko
section to your nuxt.config.ts
file. For all overrides please refer to module’s repository.
<hanko-auth>
, <hanko-events>
, <hanko-profile>
). These will render only on client-side and all the props you can pass are strongly typed.If you prefer not to auto-register these components, especially if you plan to use Hanko exclusively on the server side or wish to handle component registration programmatically, you can disable this feature. To do so, set the registerComponents
option to false in your nuxt.config.ts
file:NuxtPage
component to app.vue
to use the Nuxt Page Router.
/pages
and in there we will create index.vue
and dashboard.vue
.
<hanko-auth>
component<hanko-auth>
web component adds a login interface to your app.
By default no action is taken after a successful login. But when you add the hanko-logged-out
middleware to the login page it will automatically redirect the user to the page they were on before logging in, or to the optional redirects.success
value in the module config.
Lets try this out in the index.vue
page.
<hanko-events>
component to your page and listening for the onSessionCreated
event.
<hanko-events>
component to your page and listen for the events you are interested in.
<hanko-profile>
<hanko-profile>
component provides an interface, where users can manage their email addresses and passkeys.
Lets try this out in the dashboard.vue
page.
@nuxtjs/hanko
module’s built-in composable useHanko
and call the logout
method.
useHanko
composable provides access to the Hanko SDK which in turn allows access to the Hanko API, e.g. for accessing the current user info.
The composable is auto-imported across the app and can simply be used with useHanko()
anywhere in your code.hanko-auth
and hanko-profile
components using CSS variables and parts. Refer to our customization guide.
The styles can be scoped to the login/profile page to ensure they dont affect other parts to the app.
hanko-logged-in
middleware to secure any route and force unauthenticated users to redirect back to the login
redirect we set in the nuxt.config.ts
.
@nuxtjs/hanko
. After decoding and validating the session token for the request, a new hanko
property is added to the event context.
You can check the value of event.context.hanko
to see if the request was authenticated. The user’s id is accessible though the sub
claim/property.