···11-# svelte atproto client oauth demo
22-33-this 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.
55-66-useful when you want people to login to your static sveltekit site.
77-88-## how to install
11+# Editable Website
921010-### either clone this repo
33+statically built svelte website using your bluesky pds as a backend with a wysiwyg editor.
1141212-1. clone this repo
1313-2. run `npm install`
1414-3. run `npm run dev`
1515-4. 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.
1919-2020-```
2121-const config = {
2222- // ...
2323-2424- kit: {
2525- // ...
2626-2727- paths: {
2828- base: process.env.NODE_ENV === 'development' ? '' : '/svelte-atproto-client-oauth'
2929- }
3030- }
3131-};
3232-```
3333-3434-### or manually install in your own project
3535-3636-1. 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`
3939-4040-```svelte
4141-<script>
4242- import { initClient } from '$lib/oauth';
4343-4444- onMount(() => {
4545- initClient();
4646- });
4747-</script>
4848-4949-{@render children()}
5050-```
5151-5252-4. add server and port to your `vite.config.ts`
5353-5454-```js
5555-export default defineConfig({
5656- server: {
5757- host: '127.0.0.1',
5858- port: 5179
5959- }
6060-});
6161-```
6262-6363-5. install the dependencies
55+## Development
646657```bash
6666-npm install @atcute/oauth-browser-client @atcute/client
6767-```
6868-6969-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.
7272-7373-```
7474-const config = {
7575- // ...
7676-7777- kit: {
7878- // ...
7979-8080- paths: {
8181- base: process.env.NODE_ENV === 'development' ? '' : '/svelte-atproto-client-oauth'
8282- }
8383- }
8484-};
8585-```
8686-8787-8888-## how to use
8989-9090-### login flow
9191-9292-Either use the `LoginModal` component to render a login modal or use the `client` object to handle the login flow yourself.
9393-9494-```ts
9595-// handlin login flow yourself
9696-import { client } from '$lib/oauth';
9797-9898-// methods:
9999-client.login(handle); // login the user
100100-client.isLoggedIn; // check if the user is logged in
101101-client.logout(); // logout the user
102102-```
103103-104104-LoginModal is a component that renders a login modal, add it for a quick login flow.
105105-(copy the `src/lib/UI` folder into your projects `src/lib` folder)
106106-107107-```svelte
108108-<script>
109109- import { LoginModal, loginModalState } from '$lib/oauth';
110110-</script>
111111-112112-<LoginModal />
113113-114114-<button onclick={() => loginModalState.show()}>Show Login Modal</button>
115115-```
116116-117117-### make requests
118118-119119-Get the user's profile and make requests with the `client.rpc` object.
120120-121121-```ts
122122-import { client } from '$lib/oauth';
123123-124124-// 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',
131131- params: {
132132- actor: client.profile?.did,
133133- limit: 10
134134- }
135135-});
136136-```
88+npm install
99+npm run dev
1010+```