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
3
try it here: http://flo-bit.dev/svelte-atproto-client-oauth/
4
5
-
this is a scaffold for how to get client side oauth working with sveltekit and atproto
6
using the [`atcute`](https://github.com/mary-ext/atcute) libraries.
7
8
-
useful when you want people to login to your static sveltekit site.
9
10
## how to install
11
···
31
};
32
```
33
34
### or manually install in your own project
35
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
38
3. initialize the client in your `src/routes/+layout.svelte`
39
40
```svelte
···
68
npm install @atcute/atproto @atcute/bluesky @atcute/identity-resolver @atcute/lexicons @atcute/oauth-browser-client @atcute/client
69
```
70
71
-
6. set your base in `svelte.config.js` (e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
72
73
```ts
74
const config = {
···
84
};
85
```
86
87
88
## how to use
89
90
### login flow
91
92
Either use the `LoginModal` component to render a login modal or use the `user` object to handle the login flow yourself.
···
102
user.logout();
103
```
104
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)
107
108
```svelte
109
<script>
···
123
import { user } from '$lib/oauth';
124
125
// make requests with the user.client object
126
const response = await user.client.get('app.bsky.feed.getActorLikes', {
127
params: {
128
actor: client.did,
···
2
3
try it here: http://flo-bit.dev/svelte-atproto-client-oauth/
4
5
+
this is a scaffold for how to get client side oauth working with sveltekit and atproto
6
using the [`atcute`](https://github.com/mary-ext/atcute) libraries.
7
8
+
useful when you want people to login with atproto to your static sveltekit site.
9
10
## how to install
11
···
31
};
32
```
33
34
+
6. change the SITE in `$lib/atproto/settings.ts` to your website
35
+
36
+
7. setup the correct permissions (see below)
37
+
38
### or manually install in your own project
39
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
42
3. initialize the client in your `src/routes/+layout.svelte`
43
44
```svelte
···
72
npm install @atcute/atproto @atcute/bluesky @atcute/identity-resolver @atcute/lexicons @atcute/oauth-browser-client @atcute/client
73
```
74
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
+
77
78
```ts
79
const config = {
···
89
};
90
```
91
92
+
6. change the SITE in `$lib/atproto/settings.ts` to your website
93
+
94
+
7. setup the correct permissions (see below)
95
+
96
97
## how to use
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
+
111
### login flow
112
113
Either use the `LoginModal` component to render a login modal or use the `user` object to handle the login flow yourself.
···
123
user.logout();
124
```
125
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`)
128
129
```svelte
130
<script>
···
144
import { user } from '$lib/oauth';
145
146
// make requests with the user.client object
147
+
// this example needs the getActorLikes rpc permission, set permissions
148
const response = await user.client.get('app.bsky.feed.getActorLikes', {
149
params: {
150
actor: client.did,
+1
-1
package.json
+1
-1
package.json
+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
export const SITE = 'https://flo-bit.dev';
2
3
export const collections: string[] = ['xyz.statusphere.status'];
4
5
export const rpcCalls: Record<string, string | string[]> = {
6
-
//'did:web:api.bsky.app#bsky_appview': ['app.bsky.actor.getProfile']
7
};
8
9
-
export const blobs = ['video/*', 'text/html'] as string | string[] | undefined;
10
11
export const signUpPDS = 'https://pds.rip/';
···
1
export const SITE = 'https://flo-bit.dev';
2
3
+
// optionally add action=create/update/delete to only allow those actions for a collection
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'];
7
8
export const rpcCalls: Record<string, string | string[]> = {
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
12
};
13
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;
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
24
export const signUpPDS = 'https://pds.rip/';