Learn how to quickly add authentication and user profile in your Svelte app using Hanko.
@teamhanko/hanko-elements
hanko-elements
to access the pre-built hanko-auth
and hanko-profile
components.
Also install the svelte-routing
package to handle routing and navigation.
APP URL
.
(Most likely http://localhost:5173/)components
and create two files in it, HankoAuth.svelte
and HankoProfile.svelte
.
HankoAuth.svelte
file to create a functioning login component.
For more information please refer to the Auth Component Page.
HankoAuth
component, import and add it in any page.HankoProfile.svelte
file to create an interface where users can manage their email addresses and credentials.
For more information please refer to the Profile Component Page.
HankoProfile
component, simply import it into any page./dashboard
.
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.
/
to see the <HankoAuth>
, and to /dashboard
to see the <HankoProfile>
.
They should look something like this👇
@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.
hanko-auth
and hanko-profile
components using CSS variables and parts. Refer to our customization guide.
components/ProtectedRoute.svelte
.
ProtectedRoute.svelte
to your App.svelte
file.Dashboard
in the Protected Route;
dashboard
page to log some of the information from the User And Session.