flo-bit.dev
simple atproto oauth for static svelte apps
flo-bit.dev/svelte-atproto-client-oauth/
cleanup
+69
-21
README.md
+69
-21
README.md
···
1
-
# sv
2
3
-
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
4
5
-
## Creating a project
6
7
-
If you're seeing this, you've probably already done this step. Congrats!
8
9
-
```bash
10
-
# create a new project in the current directory
11
-
npx sv create
12
13
-
# create a new project in my-app
14
-
npx sv create my-app
15
```
16
17
-
## Developing
18
19
-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20
21
-
```bash
22
-
npm run dev
23
24
-
# or start the server and open the app in a new browser tab
25
-
npm run dev -- --open
26
```
27
28
-
## Building
29
30
-
To create a production version of your app:
31
32
-
```bash
33
-
npm run build
34
```
35
36
-
You can preview the production build with `npm run preview`.
37
38
-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
···
1
+
# svelte atproto client oauth demo
2
+
3
+
this is a scaffold for how to get client side oauth working with sveltekit and atproto
4
+
using the `@atcute/oauth-browser-client` library.
5
+
6
+
perfect for static builds e.g. using github pages.
7
+
8
+
## how to install
9
+
10
+
### either clone this repo
11
+
12
+
1. clone this repo
13
+
2. run `npm install`
14
+
3. run `npm run dev`
15
+
4. go to `http://127.0.0.1:5179`
16
+
5. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts`
17
+
(e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js`
18
+
(e.g. for github pages: `base: '/your-repo-name/'`)
19
+
20
21
+
### or manually install in your own project
22
23
+
- copy the `src/lib/oauth` folder into your own project
24
+
- also copy the `src/routes/client-metadata.json` folder into your project
25
+
- add the following to your `src/routes/+layout.svelte`
26
27
+
```svelte
28
+
<script>
29
+
import { initClient } from '$lib/oauth';
30
31
+
onMount(() => {
32
+
initClient();
33
+
});
34
+
</script>
35
36
+
{@render children()}
37
```
38
39
+
## how to use
40
41
+
### login flow
42
43
+
Either use the `LoginModal` component to render a login modal or use the `client` object to handle the login flow yourself.
44
45
+
```ts
46
+
// handlin login flow yourself
47
+
import { client } from '$lib/oauth';
48
+
49
+
// methods:
50
+
client.login(handle); // login the user
51
+
client.isLoggedIn; // check if the user is logged in
52
+
client.logout(); // logout the user
53
```
54
55
+
LoginModal is a component that renders a login modal, add it for a quick login flow.
56
+
57
+
```svelte
58
+
<script>
59
+
import { LoginModal, loginModalState } from '$lib/oauth';
60
+
</script>
61
62
+
<LoginModal />
63
64
+
<button onclick={() => loginModalState.show()}>Show Login Modal</button>
65
```
66
67
+
### make requests
68
+
69
+
Get the user's profile and make requests with the `client.rpc` object.
70
+
71
+
```ts
72
+
import { client } from '$lib/oauth';
73
74
+
// get the user's profile
75
+
const profile = client.profile;
76
+
77
+
// make requests with the client.rpc object
78
+
const response = await client.rpc.request({
79
+
type: 'get',
80
+
nsid: 'app.bsky.feed.getActorLikes',
81
+
params: {
82
+
actor: client.profile?.did,
83
+
limit: 10
84
+
}
85
+
});
86
+
```
src/lib/UI/Button.svelte
src/lib/oauth/UI/Button.svelte
src/lib/UI/Button.svelte
src/lib/oauth/UI/Button.svelte
-15
src/lib/UI/Input.svelte
-15
src/lib/UI/Input.svelte
···
1
-
<script lang="ts">
2
-
import type { HTMLInputAttributes } from 'svelte/elements';
3
-
4
-
type Props = HTMLInputAttributes & {
5
-
value?: string;
6
-
};
7
-
8
-
let { value = $bindable(), ...props }: Props = $props();
9
-
</script>
10
-
11
-
<input
12
-
bind:value
13
-
class="block w-full rounded-full border-0 py-1.5 text-neutral-900 shadow-sm ring-1 ring-neutral-300 ring-inset placeholder:text-neutral-400 focus:ring-2 focus:ring-rose-600 focus:ring-inset sm:text-sm/6 dark:bg-neutral-950 dark:text-neutral-100 dark:ring-neutral-700 dark:placeholder:text-neutral-600"
14
-
{...props}
15
-
/>
···
+28
-10
src/lib/UI/LoginModal.svelte
src/lib/oauth/UI/LoginModal.svelte
+28
-10
src/lib/UI/LoginModal.svelte
src/lib/oauth/UI/LoginModal.svelte
···
1
<script lang="ts">
2
-
import { showLoginModal } from '$lib/state.svelte';
3
-
import { trySignIn } from '$lib/auth.svelte';
4
-
import Input from './Input.svelte';
5
import Button from './Button.svelte';
6
import { tick } from 'svelte';
7
···
17
loading = true;
18
19
try {
20
-
await trySignIn(value);
21
} catch (err) {
22
error = err instanceof Error ? err.message : String(err);
23
} finally {
···
28
let input: HTMLInputElement | undefined = $state();
29
30
$effect(() => {
31
-
if (!showLoginModal.visible) {
32
error = null;
33
value = '';
34
loading = false;
···
40
});
41
</script>
42
43
-
{#if showLoginModal.visible}
44
<div
45
class="fixed inset-0 z-[100] w-screen overflow-y-auto"
46
aria-labelledby="modal-title"
···
49
>
50
<div
51
class="fixed inset-0 bg-neutral-50/90 backdrop-blur-sm transition-opacity dark:bg-neutral-950/90"
52
-
onclick={() => (showLoginModal.visible = false)}
53
aria-hidden="true"
54
></div>
55
···
63
<h3 class="font-semibold text-neutral-900 dark:text-neutral-100" id="modal-title">
64
Login With Bluesky
65
</h3>
66
-
<form onsubmit={onSubmit} class="mt-2 flex w-full flex-col gap-2">
67
<div class="w-full">
68
<label
69
for="bluesky-handle"
70
class="block text-sm/6 font-medium text-neutral-900 dark:text-neutral-100"
71
-
>Handle</label
72
>
73
<div class="mt-2">
74
<input
···
78
id="bluesky-handle"
79
placeholder="yourname.bsky.social"
80
bind:value
81
-
class="block w-full rounded-full border-0 py-1.5 text-neutral-900 caret-rose-500 shadow-sm ring-1 ring-neutral-300 ring-inset placeholder:text-neutral-400 focus:ring-2 focus:ring-rose-600 focus:ring-inset sm:text-sm/6 dark:bg-neutral-950 dark:text-neutral-100 dark:ring-neutral-700 dark:placeholder:text-neutral-600"
82
/>
83
</div>
84
</div>
···
91
<Button type="submit" disabled={loading} class="w-full"
92
>{loading ? 'Loading...' : 'Login'}</Button
93
>
94
</div>
95
</form>
96
</div>
···
1
+
<script lang="ts" module>
2
+
export const loginModalState = $state({
3
+
visible: false,
4
+
show: () => (loginModalState.visible = true),
5
+
hide: () => (loginModalState.visible = false)
6
+
});
7
+
</script>
8
+
9
<script lang="ts">
10
+
import { login } from '../auth.svelte';
11
import Button from './Button.svelte';
12
import { tick } from 'svelte';
13
···
23
loading = true;
24
25
try {
26
+
await login(value);
27
} catch (err) {
28
error = err instanceof Error ? err.message : String(err);
29
} finally {
···
34
let input: HTMLInputElement | undefined = $state();
35
36
$effect(() => {
37
+
if (!loginModalState.visible) {
38
error = null;
39
value = '';
40
loading = false;
···
46
});
47
</script>
48
49
+
{#if loginModalState.visible}
50
<div
51
class="fixed inset-0 z-[100] w-screen overflow-y-auto"
52
aria-labelledby="modal-title"
···
55
>
56
<div
57
class="fixed inset-0 bg-neutral-50/90 backdrop-blur-sm transition-opacity dark:bg-neutral-950/90"
58
+
onclick={() => (loginModalState.visible = false)}
59
aria-hidden="true"
60
></div>
61
···
69
<h3 class="font-semibold text-neutral-900 dark:text-neutral-100" id="modal-title">
70
Login With Bluesky
71
</h3>
72
+
<form onsubmit={onSubmit} class="mt-4 flex w-full flex-col gap-2">
73
<div class="w-full">
74
<label
75
for="bluesky-handle"
76
class="block text-sm/6 font-medium text-neutral-900 dark:text-neutral-100"
77
+
>Your handle</label
78
>
79
<div class="mt-2">
80
<input
···
84
id="bluesky-handle"
85
placeholder="yourname.bsky.social"
86
bind:value
87
+
class="block w-full rounded-full border-0 py-1.5 text-neutral-900 caret-rose-500 shadow-sm ring-1 ring-neutral-300 ring-inset placeholder:text-neutral-500 focus:ring-2 focus:ring-rose-600 focus:ring-inset sm:text-sm/6 dark:bg-neutral-950 dark:text-neutral-100 dark:ring-neutral-700 dark:placeholder:text-neutral-600"
88
/>
89
</div>
90
</div>
···
97
<Button type="submit" disabled={loading} class="w-full"
98
>{loading ? 'Loading...' : 'Login'}</Button
99
>
100
+
</div>
101
+
102
+
<div class="mt-4 border-t border-neutral-200 pt-4 text-sm leading-7 text-neutral-800">
103
+
Don't have an account?
104
+
<br />
105
+
<a
106
+
href="https://bsky.app"
107
+
target="_blank"
108
+
class="font-medium text-rose-600 hover:text-rose-500"
109
+
>
110
+
Create one on bluesky
111
+
</a>, then sign in here.
112
</div>
113
</form>
114
</div>
+61
-56
src/lib/auth.svelte.ts
src/lib/oauth/auth.svelte.ts
+61
-56
src/lib/auth.svelte.ts
src/lib/oauth/auth.svelte.ts
···
9
} from '@atcute/oauth-browser-client';
10
import { dev } from '$app/environment';
11
import { XRPC } from '@atcute/client';
12
-
import { base } from '$app/paths';
13
-
14
-
export const URL = 'https://flo-bit.dev';
15
16
-
export const data = $state({
17
agent: null as OAuthUserAgent | null,
18
session: null as Session | null,
19
rpc: null as XRPC | null,
···
29
followsCount?: number;
30
postsCount?: number;
31
} | null,
32
-
isInitializing: true
33
});
34
35
-
export async function initOAuthClient() {
36
-
data.isInitializing = true;
37
38
const clientId = dev
39
? `http://localhost` +
40
`?redirect_uri=${encodeURIComponent('http://127.0.0.1:5179')}` +
41
-
`&scope=${encodeURIComponent('atproto transition:generic')}`
42
-
: `${URL}${base}/client-metadata.json`;
43
44
configureOAuth({
45
metadata: {
46
client_id: clientId,
47
-
redirect_uri: `${dev ? 'http://127.0.0.1:5179' : URL + base}`
48
}
49
});
50
···
58
await resumeSession(did);
59
}
60
61
-
data.isInitializing = false;
62
}
63
64
async function finalizeLogin(params: URLSearchParams, did?: string) {
···
66
history.replaceState(null, '', location.pathname + location.search);
67
68
const session = await finalizeAuthorization(params);
69
-
data.session = session;
70
71
setAgentAndXRPC(session);
72
73
await loadProfile(session.info.sub);
74
-
localStorage.setItem('last-login', session.info.sub);
75
} catch (error) {
76
console.error('error finalizing login', error);
77
if (did) {
···
83
async function resumeSession(did: string) {
84
try {
85
const session = await getSession(did as `did:${string}`, { allowStale: true });
86
-
data.session = session;
87
88
setAgentAndXRPC(session);
89
90
await loadProfile(session.info.sub);
91
} catch (error) {
92
console.error('error resuming session', error);
93
}
94
}
95
96
function setAgentAndXRPC(session: Session) {
97
-
data.agent = new OAuthUserAgent(session);
98
99
-
data.rpc = new XRPC({ handler: data.agent });
100
}
101
102
async function loadProfile(actor: string) {
···
104
const profile = localStorage.getItem(`profile-${actor}`);
105
if (profile) {
106
console.log('loading profile from local storage');
107
-
data.profile = JSON.parse(profile);
108
return;
109
}
110
111
console.log('loading profile from server');
112
-
const response = await data.rpc?.request({
113
type: 'get',
114
nsid: 'app.bsky.actor.getProfile',
115
params: { actor }
116
});
117
118
if (response) {
119
-
data.profile = response.data;
120
localStorage.setItem(`profile-${actor}`, JSON.stringify(response.data));
121
}
122
}
123
124
-
export async function trySignIn(value: string) {
125
-
if (value.startsWith('did:')) {
126
-
if (value.length > 5) await signIn(value);
127
-
else throw new Error('DID must be at least 6 characters');
128
-
} else if (value.includes('.') && value.length > 3) {
129
-
const handle = value.startsWith('@') ? value.slice(1) : value;
130
-
if (handle.length > 3) await signIn(handle);
131
-
else throw new Error('Handle must be at least 4 characters');
132
-
} else if (value.length > 3) {
133
-
const handle = (value.startsWith('@') ? value.slice(1) : value) + '.bsky.social';
134
-
await signIn(handle);
135
-
} else {
136
-
throw new Error('Please provide a valid handle, DID, or PDS URL');
137
-
}
138
-
}
139
-
140
-
export async function signIn(input: string) {
141
-
const { identity, metadata } = await resolveFromIdentity(input);
142
143
const authUrl = await createAuthorizationUrl({
144
-
metadata: metadata,
145
identity: identity,
146
-
scope: 'atproto transition:generic'
147
});
148
149
await new Promise((resolve) => setTimeout(resolve, 200));
···
158
window.addEventListener('pageshow', listener, { once: true });
159
});
160
}
161
-
162
-
export async function signOut() {
163
-
const currentAgent = data.agent;
164
-
if (currentAgent) {
165
-
const did = currentAgent.session.info.sub;
166
-
167
-
localStorage.removeItem('last-login');
168
-
localStorage.removeItem(`profile-${did}`);
169
-
170
-
await currentAgent.signOut();
171
-
data.session = null;
172
-
data.agent = null;
173
-
data.profile = null;
174
-
} else {
175
-
throw new Error('Not signed in');
176
-
}
177
-
}
···
9
} from '@atcute/oauth-browser-client';
10
import { dev } from '$app/environment';
11
import { XRPC } from '@atcute/client';
12
+
import { metadata } from './const';
13
14
+
export const client = $state({
15
agent: null as OAuthUserAgent | null,
16
session: null as Session | null,
17
rpc: null as XRPC | null,
···
27
followsCount?: number;
28
postsCount?: number;
29
} | null,
30
+
isInitializing: true,
31
+
isLoggedIn: false
32
});
33
34
+
export async function initClient() {
35
+
client.isInitializing = true;
36
37
const clientId = dev
38
? `http://localhost` +
39
`?redirect_uri=${encodeURIComponent('http://127.0.0.1:5179')}` +
40
+
`&scope=${encodeURIComponent(metadata.scope)}`
41
+
: metadata.client_id;
42
43
configureOAuth({
44
metadata: {
45
client_id: clientId,
46
+
redirect_uri: `${dev ? 'http://127.0.0.1:5179' : metadata.redirect_uris[0]}`
47
}
48
});
49
···
57
await resumeSession(did);
58
}
59
60
+
client.isInitializing = false;
61
+
}
62
+
63
+
export async function login(handle: string) {
64
+
if (handle.startsWith('did:')) {
65
+
if (handle.length > 5) await authorizationFlow(handle);
66
+
else throw new Error('DID must be at least 6 characters');
67
+
} else if (handle.includes('.') && handle.length > 3) {
68
+
const processed = handle.startsWith('@') ? handle.slice(1) : handle;
69
+
if (processed.length > 3) await authorizationFlow(processed);
70
+
else throw new Error('Handle must be at least 4 characters');
71
+
} else if (handle.length > 3) {
72
+
const processed = (handle.startsWith('@') ? handle.slice(1) : handle) + '.bsky.social';
73
+
await authorizationFlow(processed);
74
+
} else {
75
+
throw new Error('Please provide a valid handle, DID, or PDS URL');
76
+
}
77
+
}
78
+
79
+
export async function logout() {
80
+
const currentAgent = client.agent;
81
+
if (currentAgent) {
82
+
const did = currentAgent.session.info.sub;
83
+
84
+
localStorage.removeItem('last-login');
85
+
localStorage.removeItem(`profile-${did}`);
86
+
87
+
await currentAgent.signOut();
88
+
client.session = null;
89
+
client.agent = null;
90
+
client.profile = null;
91
+
92
+
client.isLoggedIn = false;
93
+
} else {
94
+
throw new Error('Not signed in');
95
+
}
96
}
97
98
async function finalizeLogin(params: URLSearchParams, did?: string) {
···
100
history.replaceState(null, '', location.pathname + location.search);
101
102
const session = await finalizeAuthorization(params);
103
+
client.session = session;
104
105
setAgentAndXRPC(session);
106
+
localStorage.setItem('last-login', session.info.sub);
107
108
await loadProfile(session.info.sub);
109
+
110
+
client.isLoggedIn = true;
111
} catch (error) {
112
console.error('error finalizing login', error);
113
if (did) {
···
119
async function resumeSession(did: string) {
120
try {
121
const session = await getSession(did as `did:${string}`, { allowStale: true });
122
+
client.session = session;
123
124
setAgentAndXRPC(session);
125
126
await loadProfile(session.info.sub);
127
+
128
+
client.isLoggedIn = true;
129
} catch (error) {
130
console.error('error resuming session', error);
131
}
132
}
133
134
function setAgentAndXRPC(session: Session) {
135
+
client.agent = new OAuthUserAgent(session);
136
137
+
client.rpc = new XRPC({ handler: client.agent });
138
}
139
140
async function loadProfile(actor: string) {
···
142
const profile = localStorage.getItem(`profile-${actor}`);
143
if (profile) {
144
console.log('loading profile from local storage');
145
+
client.profile = JSON.parse(profile);
146
return;
147
}
148
149
console.log('loading profile from server');
150
+
const response = await client.rpc?.request({
151
type: 'get',
152
nsid: 'app.bsky.actor.getProfile',
153
params: { actor }
154
});
155
156
if (response) {
157
+
client.profile = response.data;
158
localStorage.setItem(`profile-${actor}`, JSON.stringify(response.data));
159
}
160
}
161
162
+
async function authorizationFlow(input: string) {
163
+
const { identity, metadata: meta } = await resolveFromIdentity(input);
164
165
const authUrl = await createAuthorizationUrl({
166
+
metadata: meta,
167
identity: identity,
168
+
scope: metadata.scope
169
});
170
171
await new Promise((resolve) => setTimeout(resolve, 200));
···
180
window.addEventListener('pageshow', listener, { once: true });
181
});
182
}
+4
-3
src/lib/client-metadata.ts
src/lib/oauth/const.ts
+4
-3
src/lib/client-metadata.ts
src/lib/oauth/const.ts
···
1
import { base } from '$app/paths';
2
+
3
+
export const SITE_URL = 'https://flo-bit.dev';
4
5
export const metadata = {
6
+
client_id: `${SITE_URL}${base}/client-metadata.json`,
7
8
+
redirect_uris: [SITE_URL + base],
9
10
scope: 'atproto transition:generic',
11
grant_types: ['authorization_code', 'refresh_token'],
+6
src/lib/oauth/index.ts
+6
src/lib/oauth/index.ts
···
···
1
+
import { client, login, logout, initClient } from './auth.svelte';
2
+
import LoginModal, { loginModalState } from './UI/LoginModal.svelte';
3
+
import Button from './UI/Button.svelte';
4
+
import { metadata } from './const';
5
+
6
+
export { metadata, client, login, logout, initClient, LoginModal, Button, loginModalState };
-3
src/lib/state.svelte.ts
-3
src/lib/state.svelte.ts
+4
-4
src/routes/+layout.svelte
+4
-4
src/routes/+layout.svelte
+16
-36
src/routes/+page.svelte
+16
-36
src/routes/+page.svelte
···
1
<script lang="ts">
2
-
import { data, signOut } from '$lib/auth.svelte';
3
-
import Button from '$lib/UI/Button.svelte';
4
-
import { showLoginModal } from '$lib/state.svelte';
5
6
let likes: {
7
post: {
···
12
}[] = $state([]);
13
14
async function getLikes() {
15
-
if (!data.profile?.did) return;
16
17
-
const response = await data.rpc?.request({
18
type: 'get',
19
nsid: 'app.bsky.feed.getActorLikes',
20
params: {
21
-
actor: data.profile.did,
22
limit: 10
23
}
24
});
25
26
likes = response?.data.feed;
27
}
28
-
29
-
async function putRecord() {
30
-
if (!data.agent?.session.info.sub) return;
31
-
32
-
try {
33
-
const hello = await data.rpc?.call('com.atproto.repo.createRecord', {
34
-
data: {
35
-
collection: 'com.atproto.test',
36
-
repo: data.agent.session.info.sub,
37
-
record: {
38
-
text: 'hello there'
39
-
}
40
-
}
41
-
});
42
-
console.log(hello);
43
-
} catch (error) {
44
-
console.log('hello', error);
45
-
}
46
-
}
47
</script>
48
49
-
<div class="mx-auto my-8 max-w-3xl px-2 md:my-32">
50
<h1 class="text-3xl font-bold">svelte atproto client oauth demo</h1>
51
52
-
{#if data.isInitializing}
53
<div class="mt-8 text-sm">loading...</div>
54
{/if}
55
56
-
{#if !data.isInitializing && !data.agent}
57
<div class="mt-8 text-sm">not signed in</div>
58
-
<Button class="mt-4" onclick={() => (showLoginModal.visible = true)}>Sign In</Button>
59
{/if}
60
61
-
{#if data.agent}
62
<div class="mt-8 text-sm">signed in as</div>
63
64
<div class="mt-2 flex gap-1 font-semibold">
65
<img
66
-
src={data.profile?.avatar}
67
class="h-6 w-6 rounded-full"
68
-
alt="avatar of {data.profile?.handle}"
69
/>
70
-
<span>{data.profile?.handle}</span>
71
</div>
72
73
-
<Button class="mt-4" onclick={() => signOut()}>Sign Out</Button>
74
75
<Button class="mt-4" onclick={getLikes}>Get recent likes</Button>
76
-
77
-
<Button class="mt-4" onclick={putRecord}>Put record</Button>
78
79
{#if likes.length > 0}
80
<div class="mt-8 text-sm">recent likes</div>
···
1
<script lang="ts">
2
+
import { client, logout, Button, loginModalState } from '$lib/oauth';
3
4
let likes: {
5
post: {
···
10
}[] = $state([]);
11
12
async function getLikes() {
13
+
if (!client.profile?.did || !client.rpc) return;
14
15
+
// example of how to get some data for a logged in user
16
+
const response = await client.rpc.request({
17
type: 'get',
18
nsid: 'app.bsky.feed.getActorLikes',
19
params: {
20
+
actor: client.profile.did,
21
limit: 10
22
}
23
});
24
25
likes = response?.data.feed;
26
}
27
</script>
28
29
+
<div class="mx-auto my-4 max-w-3xl px-4 md:my-32">
30
<h1 class="text-3xl font-bold">svelte atproto client oauth demo</h1>
31
32
+
<a href="https://github.com/flo-bit/svelte-atproto-client-oauth" target="_blank" class="text-sm text-rose-600 mt-2">source code</a>
33
+
34
+
{#if client.isInitializing}
35
<div class="mt-8 text-sm">loading...</div>
36
{/if}
37
38
+
{#if !client.isInitializing && !client.agent}
39
<div class="mt-8 text-sm">not signed in</div>
40
+
<Button class="mt-4" onclick={() => loginModalState.show()}>Sign In</Button>
41
{/if}
42
43
+
{#if client.isLoggedIn}
44
<div class="mt-8 text-sm">signed in as</div>
45
46
<div class="mt-2 flex gap-1 font-semibold">
47
<img
48
+
src={client.profile?.avatar}
49
class="h-6 w-6 rounded-full"
50
+
alt="avatar of {client.profile?.handle}"
51
/>
52
+
<span>{client.profile?.handle}</span>
53
</div>
54
55
+
<Button class="mt-4" onclick={() => logout()}>Sign Out</Button>
56
57
<Button class="mt-4" onclick={getLikes}>Get recent likes</Button>
58
59
{#if likes.length > 0}
60
<div class="mt-8 text-sm">recent likes</div>
+1
-1
src/routes/client-metadata.json/+server.ts
+1
-1
src/routes/client-metadata.json/+server.ts
-3
svelte.config.js
-3
svelte.config.js
···
8
preprocess: vitePreprocess(),
9
10
kit: {
11
-
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12
-
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13
-
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14
adapter: adapter(),
15
paths: {
16
base: process.env.NODE_ENV === 'development' ? '' : '/svelte-atproto-client-oauth'