Integrate Hanko with SvelteKit
Learn how to quickly add authentication and user profile in your SvelteKit app using Hanko.
Create a SvelteKit application
Run the following command to create a new SvelteKit application:
Install @teamhanko/hanko-elements
Once you’ve initialized your SvelteKit app, installing hanko-elements provides you with access to the prebuilt components: hanko-auth
and hanko-profile
.
Setup your Hanko project
Go to the Hanko console and create a project for this application.
During creation make sure to input the URL you will be developing on as the APP URL
.
(Most likely http://localhost:5173/)
Add your Hanko API URL
Retrieve your API URL from the Hanko console, and paste this in a .env
file.
If you are self-hosting you need to provide the URL of your running Hanko backend.
Create Hanko components
Create a folder called components
and create two files in it, HankoAuth.svelte
and HankoProfile.svelte
.
Hanko Auth
Now let’s setup the HankoAuth.tsx
file to create a functioning login page.
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.
Now simply import the component you just created into any page.
By now, your sign-up and sign-in features should be working. You should see an interface similar to this 👇
Hanko profile
After setting up the HankoAuth let’s set up the HankoProfile.jsx
file to create an interface where users can
manage their Email Addresses
and credentials.
For more information please refer to the Profile Component Page.
Now simply import the component you just created into any page.
It should look something like this 👇
Implement logout functionality
You can use @teamhanko/hanko-elements
to easily logout users. Here we will make a logout button.
Create LogoutButton.tsx
and insert the code below.
Customize component styles
You can customize the appearance of hanko-auth
and hanko-profile
components using CSS variables and parts. Refer to our customization guide.
Securing routes
To verify the session token in your SvelteKit application, we’re using the session/validate API request. By checking for a valid session token this middleware will ensure secure access to specific routes, like /dashboard
and /protected
.
The middleware hook extracts and verifies the session token, and redirect unauthorized users back to the home or login page.
For more info on middlewares / hooks in SvelteKit and where to put the hooks.server.ts
file,
please refer to SvelteKid Hooks.
What happens here is that during each request the handle function will be called. It then verifies the session token and redirects the user back if he is on a private route and the session token is not valid.
Hooks like these tends to not always work after creating it, if this is the case try restarting your SvelteKit app.
Getting user data
Let’s use the Hanko SDK to get user data.
Let’s update the dashboard
page to display some of the information from the user.
Try out yourself
SvelteKit example
Full source code available on our GitHub