flo-bit.dev
simple atproto oauth for static svelte apps
flo-bit.dev/svelte-atproto-client-oauth/
update readme
+29
-7
README.md
+29
-7
README.md
···
2
2
3
3
try it here: http://flo-bit.dev/svelte-atproto-client-oauth/
4
4
5
-
this is a scaffold for how to get client side oauth working with sveltekit and atproto
5
+
this is a scaffold for how to get client side oauth working with sveltekit and atproto
6
6
using the [`atcute`](https://github.com/mary-ext/atcute) libraries.
7
7
8
-
useful when you want people to login to your static sveltekit site.
8
+
useful when you want people to login with atproto to your static sveltekit site.
9
9
10
10
## how to install
11
11
···
31
31
};
32
32
```
33
33
34
+
6. change the SITE in `$lib/atproto/settings.ts` to your website
35
+
36
+
7. setup the correct permissions (see below)
37
+
34
38
### or manually install in your own project
35
39
36
-
1. copy the `src/lib/oauth` folder into your own project
37
-
2. also copy the `src/routes/oauth-client-metadata.json.json` folder into your project
40
+
1. copy the `src/lib/atproto` folder into your own project
41
+
2. also copy the `src/routes/oauth-client-metadata.json` folder into your project
38
42
3. initialize the client in your `src/routes/+layout.svelte`
39
43
40
44
```svelte
···
68
72
npm install @atcute/atproto @atcute/bluesky @atcute/identity-resolver @atcute/lexicons @atcute/oauth-browser-client @atcute/client
69
73
```
70
74
71
-
6. set your base in `svelte.config.js` (e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
75
+
6. (optionally) set your base in `svelte.config.js` (e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
76
+
72
77
73
78
```ts
74
79
const config = {
···
84
89
};
85
90
```
86
91
92
+
6. change the SITE in `$lib/atproto/settings.ts` to your website
93
+
94
+
7. setup the correct permissions (see below)
95
+
87
96
88
97
## how to use
89
98
99
+
### set permissions you request on sign-in in `$lib/atproto/settings.ts` (see commented out examples for more info)
100
+
101
+
- add collections to the collections array
102
+
- add rpcs to rpcCalls
103
+
- blobs for uploading blobs
104
+
105
+
### change sign up pds
106
+
107
+
If you want to allow sign-up, change the `signUpPDS` variable in `$lib/atproto/settings.ts` to a pds of your choice
108
+
109
+
ATTENTION: the current setting (pds.rip) is only for development, all accounts get deleted automatically after a week
110
+
90
111
### login flow
91
112
92
113
Either use the `LoginModal` component to render a login modal or use the `user` object to handle the login flow yourself.
···
102
123
user.logout();
103
124
```
104
125
105
-
LoginModal is a component that renders a login modal, add it for a quick login flow.
106
-
(copy the `src/lib/UI` folder into your projects `src/lib` folder)
126
+
LoginModal is a component that renders a login modal, add it for a quick login flow (needs tailwind).
127
+
(copy the `src/lib/UI` folder into your projects `src/lib` folder, add the `src/app.css` content to your `app.css`)
107
128
108
129
```svelte
109
130
<script>
···
123
144
import { user } from '$lib/oauth';
124
145
125
146
// make requests with the user.client object
147
+
// this example needs the getActorLikes rpc permission, set permissions
126
148
const response = await user.client.get('app.bsky.feed.getActorLikes', {
127
149
params: {
128
150
actor: client.did,
+1
-1
src/app.css
+1
-1
src/app.css
+15
-2
src/lib/atproto/settings.ts
+15
-2
src/lib/atproto/settings.ts
···
1
1
export const SITE = 'https://flo-bit.dev';
2
2
3
+
// optionally add action=create/update/delete to only allow those actions for a collection
3
4
export const collections: string[] = ['xyz.statusphere.status'];
5
+
// example: only allow create and delete
6
+
// export const collections: string[] = ['xyz.statusphere.status?action=create&action=update'];
4
7
5
8
export const rpcCalls: Record<string, string | string[]> = {
6
-
//'did:web:api.bsky.app#bsky_appview': ['app.bsky.actor.getProfile']
9
+
// example: allow authenticated proxying to bsky appview to get a users liked posts
10
+
//'did:web:api.bsky.app#bsky_appview': ['app.bsky.feed.getActorLikes']
11
+
// https://docs.bsky.app/docs/api/app-bsky-feed-get-actor-likes
7
12
};
8
13
9
-
export const blobs = ['video/*', 'text/html'] as string | string[] | undefined;
14
+
export const blobs = [] as string | string[] | undefined;
15
+
16
+
// example: allowing video and html uploads
17
+
// export const blobs = ['video/*', 'text/html'] as string | string[] | undefined;
10
18
19
+
// example: allowing all blob types
20
+
// export const blobs = ['*/*'] as string | string[] | undefined;
21
+
22
+
// which PDS to use for signup
23
+
// ATTENTION: pds.rip is only for development, all accounts get deleted automatically after a week
11
24
export const signUpPDS = 'https://pds.rip/';