Integrate Hanko with Svelte
Learn how to quickly add authentication and user profile in your Svelte app using Hanko.
Create a Svelte application
To setup our Svelte Frontend we will use vite as a build tool.
Run the following command to create a new Vite Svelte application:
Install @teamhanko/hanko-elements
Once you’ve initialized your svelte app, installing hanko-elements provides you with access to the prebuilt components: hanko-auth
and hanko-profile
.
We will also install the svelte-routing
package to handle routing and navigation.
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 the Hanko API URL
Retrieve the API URL from the Hanko console and place it in your .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 set up the HankoAuth.svelte
file to create a functioning login page.
For more information please refer to the Auth Component Page.
After you created the HankoAuth
component, import and add it in any page.
Just like this.
Hanko profile
After setting up the HankoAuth let’s set up the HankoProfile.svelte
file to create a interface where users can.
manage their Email Addresses
and credentials.
For more information please refer to the Profile Component Page.
After you created the HankoProfile
component, simply import it into any page.
In our case we created a dashboardPage.svelte file to show the HankoProfile as our Hanko Auth redirects to /dashboard
.
Setup your routes
After you created the HomePage.svelte
and DashboardPage.svelte
you are able to import them into your svelte App.svelte
.
We will use svelte-router
to setup the routes of your app.
By now you should be able to go to /
to see the <HankoAuth>
, and to /dashboard
to see the <HankoProfile>
.
They should look something like this👇
Implement logout functionality
You can use @teamhanko/hanko-elements
to easily log users out. Here we will make a logout button component that you can use anywhere.
For this QuickStart we will create a file at components/LogoutButton.svelte
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 secure our routes we should validate the session token at the backend. Please refer to our backend guides.
Let’s set up a Protected route to do this for us.
Create a new Svelte component at components/ProtectedRoute.svelte
.
Let’s import this ProtectedRoute.svelte
to your App.svelte
file.
To use the Protected route wrap your Dashboard
in the Protected Route;
Getting User and Session Data
Lets use the Hanko SDK to Get User Data to display on the dashboard. For the User Information we will use hanko.GetUser()
Lets update the dashboard
page to log some of the information from the User And Session.
Try it yourself
Svelte example
It uses Express.js for the backend, full source code available on our GitHub.