https://github.com/flo-bit/svelte-atproto-client-oauth
https://github.com/flo-bit/svelte-atproto-client-oauth
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/flo-bit/svelte-atproto-client-oauth
- Owner: flo-bit
- License: mit
- Created: 2025-02-24T10:50:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-24T16:30:05.000Z (over 1 year ago)
- Last Synced: 2025-04-06T06:31:46.242Z (about 1 year ago)
- Language: Svelte
- Homepage: http://flo-bit.dev/svelte-atproto-client-oauth/
- Size: 132 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte atproto client oauth demo
this is a scaffold for how to get client side oauth working with sveltekit and atproto
using the [`@atcute/oauth-browser-client`](https://github.com/mary-ext/atcute) library.
useful when you want people to login to your static sveltekit site.
## how to install
### either clone this repo
1. clone this repo
2. run `npm install`
3. run `npm run dev`
4. go to `http://127.0.0.1:5179`
5. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts`
(e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js`
(e.g. for github pages: `base: '/your-repo-name/'`)
### or manually install in your own project
- copy the `src/lib/oauth` folder into your own project
- also copy the `src/routes/client-metadata.json` folder into your project
- add the following to your `src/routes/+layout.svelte`
```svelte
import { initClient } from '$lib/oauth';
onMount(() => {
initClient();
});
{@render children()}
```
## how to use
### login flow
Either use the `LoginModal` component to render a login modal or use the `client` object to handle the login flow yourself.
```ts
// handlin login flow yourself
import { client } from '$lib/oauth';
// methods:
client.login(handle); // login the user
client.isLoggedIn; // check if the user is logged in
client.logout(); // logout the user
```
LoginModal is a component that renders a login modal, add it for a quick login flow.
```svelte
import { LoginModal, loginModalState } from '$lib/oauth';
loginModalState.show()}>Show Login Modal
```
### make requests
Get the user's profile and make requests with the `client.rpc` object.
```ts
import { client } from '$lib/oauth';
// get the user's profile
const profile = client.profile;
// make requests with the client.rpc object
const response = await client.rpc.request({
type: 'get',
nsid: 'app.bsky.feed.getActorLikes',
params: {
actor: client.profile?.did,
limit: 10
}
});
```