svelte atproto client oauth demo

try it here: http://flo-bit.dev/svelte-atproto-client-oauth/

this is a scaffold for how to get client side oauth working with sveltekit and atproto using the atcute libraries.

useful when you want people to login with atproto to your static sveltekit site.

how to install

either clone this repo

1. clone this repo
2. run pnpm install
3. run pnpm run dev
4. go to http://127.0.0.1:5179
5. if necessary change base in svelte.config.js

const config = {
    // ...

    kit: {
        // ...

        paths: {
            base: process.env.NODE_ENV === 'development' ? '' : '/svelte-atproto-client-oauth'
        }
    }
};

6. change the SITE in $lib/atproto/settings.ts to your website

7. setup the correct permissions (see below)

or manually add to your own project

1. copy the src/lib/atproto folder into your own project
2. also copy the src/routes/oauth-client-metadata.json folder into your project
3. initialize the client in your src/routes/+layout.svelte

<script>
    import { initClient } from '$lib/atproto';

    let { children } = $props();

    onMount(() => {
        initClient();
    });
</script>

{@render children()}

4. add server and port to your vite.config.ts

export default defineConfig({
    server: {
        host: '127.0.0.1',
        port: 5179
    }
});

5. install the dependencies

npm install @atcute/atproto @atcute/bluesky @atcute/identity-resolver @atcute/lexicons @atcute/oauth-browser-client @atcute/client

6. (optionally) set your base in svelte.config.js (e.g. for deploying to github pages: base: '/your-repo-name/') while keeping it as '' in development.

const config = {
    // ...

    kit: {
        // ...

        paths: {
            base: process.env.NODE_ENV === 'development' ? '' : '/svelte-atproto-client-oauth'
        }
    }
};

6. change the SITE in $lib/atproto/settings.ts to your website

7. setup the correct permissions (see below)

how to use

set permissions you request on sign-in in $lib/atproto/settings.ts (see commented out examples for more info)

• add collections to the collections array
• rpcs for authenticated proxied requests
• blobs for uploading blobs

change sign up pds

If you want to allow sign-up, change the devPDS and prodPDS variables in $lib/atproto/settings.ts to a pds of your choice

ATTENTION: the current setting (pds.rip) is only for development, all accounts get deleted automatically after a week

login flow

Either use the LoginModal component to render a login modal or use the user object to handle the login flow yourself.

// handlin login flow yourself
import { user } from '$lib/atproto';

// methods:
user.isInitializing;
user.isLoggedIn;
user.login(handle);
user.signup();
user.logout();

LoginModal is a component that renders a login modal, add it for a quick login flow (needs tailwind and tailwind/forms, copy the src/app.css content to your app.css).

<script>
    import { LoginModal, loginModalState } from '$lib/atproto/ui';
</script>

<LoginModal />

<button onclick={() => loginModalState.show()}>Show Login Modal</button>

make requests

Get the user's profile and make requests with the user.client object.

import { user } from '$lib/atproto';

// make requests with the user.client object
// this example needs the getActorLikes rpc permission, set permissions
const response = await user.client.get('app.bsky.feed.getActorLikes', {
    params: {
        actor: client.did,
        limit: 10
    }
});

todo

• check if pds supports prompt=create
• add lexicon stuff