Learn how to quickly add authentication and user profile in your Nuxt app using Hanko.
@teamhanko/hanko-elements
package. You’ll learn to set up authentication components, implement session management, secure routes with middleware, and handle user data across both client and server-side contexts.Key Technologies: Modern fullstack framework with TypeScript, server-side rendering capabilities, Hanko Elements, Hanko Cloud Console, session management, and middleware protectionPrerequisites: Node.js, basic knowledge of your chosen fullstack framework, Hanko Cloud account (free at cloud.hanko.io)Integration Tasks You’ll Complete:@nuxtjs/hanko
@nuxtjs/hanko
module to integrate Hanko authentication. It provides pre-built components (hanko-auth
, hanko-events
, hanko-profile
), server middleware for route protection, and Vue composables for easy authentication management.
Install the module as a development dependency:
APP URL
to your development URL (typically http://localhost:3000/). This ensures proper CORS configuration and redirect handling.NUXT_PUBLIC_
prefix makes this environment variable accessible in both server and client-side code.
Retrieve the API URL from the Hanko console and add it to your environment file:
@nuxtjs/hanko
module to 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:pages/
directory becomes a route. To enable this routing system, add the NuxtPage
component to your main application template.
Update your app.vue
file 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 provides a complete login and registration interface with passwordless authentication. The hanko-logged-out
middleware ensures that already authenticated users are automatically redirected to the dashboard.
Create your login page at pages/index.vue
:
<hanko-events>
component to listen for authentication events and implement custom logic.
Here’s an alternative approach with custom redirect handling:
<hanko-events>
component to subscribe to authentication events:
<hanko-profile>
<hanko-profile>
component provides a user-friendly interface for managing authentication credentials. Users can add/remove email addresses, register new passkeys, and manage their authentication methods.
Create a dashboard page at pages/dashboard.vue
:
@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.