Skip to content

Commit b4fa8db

Browse files
lfleischmannlfleischmann
authored
feat(examples): add svelte example
1 parent 562cb15 commit b4fa8db

29 files changed

+3288
-1
lines changed

‎deploy/docker-compose/todo-svelte.yaml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
services:
2+
todo-backend:
3+
build: ../../examples/express
4+
ports:
5+
- "8002:8002"
6+
environment:
7+
- HANKO_API_URL=http://hanko:8000
8+
networks:
9+
- intranet
10+
todo-frontend:
11+
build: ../../examples/svelte
12+
ports:
13+
- "8888:8888"
14+
networks:
15+
- intranet

‎docs/docs/guides/svelte.mdx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Svelte + Hanko
3+
sidebar_label: Svelte
4+
keywords:
5+
- hanko
6+
- svelte
7+
- integration
8+
sidebar_custom_props:
9+
docCardIconName: svelte
10+
---
11+
12+
# Svelte
13+
14+
In this guide you will learn how to add authentication to your Svelte application using the Hanko custom element.
15+
16+
## Install dependencies
17+
Install the `@teamhanko/hanko-elements` package:
18+
19+
```shell npm2yarn
20+
npm install @teamhanko/hanko-elements
21+
```
22+
23+
## Import & use custom element
24+
25+
Import the `register` function from `@teamhanko/hanko-elements/hanko-auth` in the component where you want to use the
26+
Hanko custom element. Call `register` to register the `<hanko-auth>` element with the browser's
27+
[`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).
28+
Then use the `<hanko-auth>` element in your component template.
29+
30+
:::info
31+
32+
When adding the `<hanko-auth>` element to your JSX you must provide the URL of the Hanko API via the `api`
33+
attribute. If you are using [Hanko Cloud](https://cloud.hanko.io), you can find the API URL on your project dashboard.
34+
If you are self-hosting you need to provide the URL of your running Hanko backend.
35+
36+
:::
37+
38+
```js title="Login.svelte" showLineNumbers
39+
<script>
40+
import { onMount } from "svelte";
41+
import { register } from '@teamhanko/hanko-elements/hanko-auth';
42+
43+
const api = import.meta.env.VITE_HANKO_API;
44+
const lang = import.meta.env.VITE_HANKO_LANG;
45+
46+
onMount(async () => {
47+
// register the component
48+
// see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
49+
register({ shadow: true }).catch((e) => {
50+
console.error(e)
51+
});
52+
});
53+
</script>
54+
55+
<div class="content">
56+
<hanko-auth {api} {lang}/>
57+
</div>
58+
```
59+
60+
## Defining login callbacks
61+
62+
The `<hanko-auth>` element dispatches a custom `hankoAuthSuccess` event on successful login. React to this
63+
event in order to, for example, redirect your users to protected pages in your application.
64+
65+
To do so, apply an event listener with an appropriate redirect callback:
66+
67+
```js {2-3,9-14,23,26-28,32} title="Login.svelte" showLineNumbers
68+
<script>
69+
import { onDestroy, onMount } from "svelte";
70+
import { useNavigate } from "svelte-navigator";
71+
import { register } from '@teamhanko/hanko-elements/hanko-auth';
72+
73+
const api = import.meta.env.VITE_HANKO_API;
74+
const lang = import.meta.env.VITE_HANKO_LANG;
75+
76+
const navigate = useNavigate();
77+
let element;
78+
79+
const redirectToTodos = () => {
80+
navigate('/todo');
81+
};
82+
83+
onMount(async () => {
84+
// register the component
85+
// see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
86+
register({ shadow: true }).catch((e) => {
87+
console.error(e)
88+
});
89+
90+
element.addEventListener('hankoAuthSuccess', redirectToTodos);
91+
});
92+
93+
onDestroy(() => {
94+
element.removeEventListener('hankoAuthSuccess', redirectToTodos);
95+
});
96+
</script>
97+
98+
<div class="content">
99+
<hanko-auth bind:this={element} {api} {lang}/>
100+
</div>
101+
```
102+
103+
## UI customization
104+
105+
The styles of the `hanko-auth` element can be customized using CSS variables and parts. See our guide
106+
on customization [here](https://github.com/teamhanko/hanko/tree/main/frontend/elements#ui-customization).
107+
108+
## Backend request authentication
109+
110+
If you want to authenticate requests in your own backend, please view our [backend guide](/guides/backend).

‎docs/sidebars.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const sidebars = {
2929
slug: '/guides/frontend',
3030
keywords: ['guides']
3131
},
32-
items: ['guides/angular', "guides/react", "guides/next", "guides/vue"]
32+
items: ['guides/angular', "guides/next", "guides/react", "guides/svelte", "guides/vue"]
3333
},
3434
'guides/backend'
3535
],

‎docs/src/theme/DocCard/styles.module.css

+5
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,8 @@
3535
display: flex;
3636
align-items: center;
3737
}
38+
39+
.cardIcon img{
40+
max-width: 100%;
41+
max-height: 100%;
42+
}

‎docs/static/img/icons/svelte.svg

+20
Loading

‎examples/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ It contains:
1313
- [Next.js](nextjs)
1414
- [React](react)
1515
- [Vue](vue)
16+
- [Svelte](svelte)
1617

1718
## How to run
1819
### Manual
@@ -38,3 +39,7 @@ docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-
3839
```
3940
docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-vue.yaml -p "hanko-todo-vue" up --build
4041
```
42+
#### Svelte
43+
```
44+
docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-svelte.yaml -p "hanko-todo-svelte" up --build
45+
```

‎examples/svelte/.dockerignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎examples/svelte/.env

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_HANKO_API=http://localhost:8000
2+
VITE_TODO_API=http://localhost:8002

‎examples/svelte/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/svelte/.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["svelte.svelte-vscode"]
3+
}

‎examples/svelte/Dockerfile

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# pull official base image
2+
FROM node:16-alpine
3+
4+
# set working directory
5+
WORKDIR /app
6+
7+
# add `/app/node_modules/.bin` to $PATH
8+
ENV PATH /app/node_modules/.bin:$PATH
9+
10+
# install app dependencies
11+
COPY package.json ./
12+
COPY package-lock.json ./
13+
RUN npm install
14+
15+
# add app
16+
COPY . ./
17+
18+
# start app
19+
CMD ["npm", "start"]

‎examples/svelte/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Hanko Svelte example
2+
3+
## Starting the app
4+
5+
### Prerequisites
6+
7+
- a running Hanko API (see the instructions on how to run the API [in Docker](../backend/README.md#Docker) or [from Source](../backend/README.md#from-source))
8+
- a running express backend (see the [README](../express) for the express backend)
9+
10+
### Set up environment variables
11+
12+
In the `.env` file set up the correct environment variables:
13+
14+
- `VITE_HANKO_API`: this is the URL of the Hanko API (default: `http://localhost:8000`, can be customized using the `server.public.address` option in the [configuration file](../../backend/docs/Config.md))
15+
- `VITE_TODO_API`: this is the URL of the [express](../express) backend (default: `http://localhost:8002`)
16+
17+
### Run development server
18+
19+
Run `npm install` to install dependencies, then run `npm run start` for a development server. Navigate to `http://localhost:8888/`. The application will automatically reload if you change any of the source files.

‎examples/svelte/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Hanko Svelte Example</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)