···11# svelte atproto client oauth demo
2233this is a scaffold for how to get client side oauth working with sveltekit and atproto
44-using the [`@atcute/oauth-browser-client`](https://github.com/mary-ext/atcute) library.
44+using the [`atcute`](https://github.com/mary-ext/atcute) libraries.
5566useful when you want people to login to your static sveltekit site.
77···1010### either clone this repo
111112121. clone this repo
1313-2. run `npm install`
1414-3. run `npm run dev`
1313+2. run `pnpm install`
1414+3. run `pnpm run dev`
15154. go to `http://127.0.0.1:5179`
1616-5. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts`
1717-(e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js`
1818-(e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
1616+5. if necessary change base in `svelte.config.js`
19172020-```
1818+```js
2119const config = {
2220 // ...
2321···3432### or manually install in your own project
353336341. copy the `src/lib/oauth` folder into your own project
3737-2. also copy the `src/routes/client-metadata.json` folder into your project
3838-3. add the following to your `src/routes/+layout.svelte`
3535+2. also copy the `src/routes/oauth-client-metadata.json.json` folder into your project
3636+3. initialize the client in your `src/routes/+layout.svelte`
39374038```svelte
4139<script>
4240 import { initClient } from '$lib/oauth';
4141+4242+ let { children } = $props();
43434444 onMount(() => {
4545 initClient();
···63635. install the dependencies
64646565```bash
6666-npm install @atcute/oauth-browser-client @atcute/client
6666+npm install @atcute/atproto @atcute/bluesky @atcute/identity-resolver @atcute/lexicons @atcute/oauth-browser-client @atcute/client
6767```
68686969-6. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts`
7070-(e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js`
7171-(e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
6969+6. set your base in `svelte.config.js` (e.g. for github pages: `base: '/your-repo-name/'`) while keeping it as `''` in development.
72707373-```
7171+```ts
7472const config = {
7573 // ...
7674···89879088### login flow
91899292-Either use the `LoginModal` component to render a login modal or use the `client` object to handle the login flow yourself.
9090+Either use the `LoginModal` component to render a login modal or use the `user` object to handle the login flow yourself.
93919492```ts
9593// handlin login flow yourself
9696-import { client } from '$lib/oauth';
9494+import { user } from '$lib/oauth';
97959896// methods:
9999-client.login(handle); // login the user
100100-client.isLoggedIn; // check if the user is logged in
101101-client.logout(); // logout the user
9797+user.login(handle);
9898+user.signup();
9999+user.isLoggedIn;
100100+user.logout();
102101```
103102104103LoginModal is a component that renders a login modal, add it for a quick login flow.
···116115117116### make requests
118117119119-Get the user's profile and make requests with the `client.rpc` object.
118118+Get the user's profile and make requests with the `user.client` object.
120119121120```ts
122122-import { client } from '$lib/oauth';
121121+import { user } from '$lib/oauth';
123122124124-// get the user's profile
125125-const profile = client.profile;
126126-127127-// make requests with the client.rpc object
128128-const response = await client.rpc.request({
129129- type: 'get',
130130- nsid: 'app.bsky.feed.getActorLikes',
123123+// make requests with the user.client object
124124+const response = await user.client.get('app.bsky.feed.getActorLikes', {
131125 params: {
132132- actor: client.profile?.did,
126126+ actor: client.did,
133127 limit: 10
134128 }
135129});