···1# svelte atproto client oauth demo
23this is a scaffold for how to get client side oauth working with sveltekit and atproto
4-using the [`@atcute/oauth-browser-client`](https://github.com/mary-ext/atcute) library.
56useful when you want people to login to your static sveltekit site.
7···10### either clone this repo
11121. clone this repo
13-2. run `npm install`
14-3. run `npm run dev`
154. 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/'`) while keeping it as `''` in development.
1920-```
21const config = {
22 // ...
23···34### or manually install in your own project
35361. copy the `src/lib/oauth` folder into your own project
37-2. also copy the `src/routes/client-metadata.json` folder into your project
38-3. add the following to your `src/routes/+layout.svelte`
3940```svelte
41<script>
42 import { initClient } from '$lib/oauth';
004344 onMount(() => {
45 initClient();
···635. install the dependencies
6465```bash
66-npm install @atcute/oauth-browser-client @atcute/client
67```
6869-6. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts`
70-(e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js`
71-(e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
7273-```
74const config = {
75 // ...
76···8990### login flow
9192-Either use the `LoginModal` component to render a login modal or use the `client` object to handle the login flow yourself.
9394```ts
95// handlin login flow yourself
96-import { client } from '$lib/oauth';
9798// methods:
99-client.login(handle); // login the user
100-client.isLoggedIn; // check if the user is logged in
101-client.logout(); // logout the user
0102```
103104LoginModal is a component that renders a login modal, add it for a quick login flow.
···116117### make requests
118119-Get the user's profile and make requests with the `client.rpc` object.
120121```ts
122-import { client } from '$lib/oauth';
123124-// get the user's profile
125-const profile = client.profile;
126-127-// make requests with the client.rpc object
128-const response = await client.rpc.request({
129- type: 'get',
130- nsid: 'app.bsky.feed.getActorLikes',
131 params: {
132- actor: client.profile?.did,
133 limit: 10
134 }
135});
···1# svelte atproto client oauth demo
23this is a scaffold for how to get client side oauth working with sveltekit and atproto
4+using the [`atcute`](https://github.com/mary-ext/atcute) libraries.
56useful when you want people to login to your static sveltekit site.
7···10### either clone this repo
11121. clone this repo
13+2. run `pnpm install`
14+3. run `pnpm run dev`
154. go to `http://127.0.0.1:5179`
16+5. if necessary change base in `svelte.config.js`
001718+```js
19const config = {
20 // ...
21···32### or manually install in your own project
33341. copy the `src/lib/oauth` folder into your own project
35+2. also copy the `src/routes/oauth-client-metadata.json.json` folder into your project
36+3. initialize the client in your `src/routes/+layout.svelte`
3738```svelte
39<script>
40 import { initClient } from '$lib/oauth';
41+42+ let { children } = $props();
4344 onMount(() => {
45 initClient();
···635. install the dependencies
6465```bash
66+npm install @atcute/atproto @atcute/bluesky @atcute/identity-resolver @atcute/lexicons @atcute/oauth-browser-client @atcute/client
67```
6869+6. set your base in `svelte.config.js` (e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
007071+```ts
72const config = {
73 // ...
74···8788### login flow
8990+Either use the `LoginModal` component to render a login modal or use the `user` object to handle the login flow yourself.
9192```ts
93// handlin login flow yourself
94+import { user } from '$lib/oauth';
9596// methods:
97+user.login(handle);
98+user.signup();
99+user.isLoggedIn;
100+user.logout();
101```
102103LoginModal is a component that renders a login modal, add it for a quick login flow.
···115116### make requests
117118+Get the user's profile and make requests with the `user.client` object.
119120```ts
121+import { user } from '$lib/oauth';
122123+// make requests with the user.client object
124+const response = await user.client.get('app.bsky.feed.getActorLikes', {
00000125 params: {
126+ actor: client.did,
127 limit: 10
128 }
129});