Atproto Login
llms.txtExample
Modal version
Inline version
Usage
Add modal to your +layout.svelte
<script> let open = $state(false); </script> <AtprotoLoginModal bind:open login={async (handle) => { // do login and return true if login // is successful and should hide the modal }} signup={async () => { // do signup and return true if signup // is successful and should hide the modal }} />
Open the modal
<Button onclick={() => (open = true)}>Login</Button>
Inline (non-modal) version
Use AtprotoLogin to embed the login form directly in a page:
<AtprotoLogin login={async (handle) => { // do login }} />
API Reference
AtprotoLoginModal
A modal dialog for AT Protocol (Bluesky) login with handle autocomplete.
Property Type Description
open $bindable
boolean
Whether the modal is open. Default:
falselogin
function
Callback to handle the login action. Should return true on success. Default: —
signup
function
Callback to handle the signup action. Default: —
formAction
string
The form action URL for server-side form submission. Default: —
formMethod
enum
The form submission method. Default:
'get'loginOnSelect
boolean
Whether to automatically trigger login when a handle is selected from autocomplete. Default:
trueProperty
open
login
signup
formAction
formMethod
loginOnSelect
AtprotoLogin
An inline AT Protocol (Bluesky) login form with handle autocomplete. Use this to embed login directly in a page.
Property Type Description
login
function
Callback to handle the login action. Should return true on success. Default: —
signup
function
Callback to handle the signup action. Default: —
formAction
string
The form action URL for server-side form submission. Default: —
formMethod
enum
The form submission method. Default:
'get'loginOnSelect
boolean
Whether to automatically trigger login when a handle is selected from autocomplete. Default:
trueclass
string
Additional CSS classes for the form element. Default: —
Property
login
signup
formAction
formMethod
loginOnSelect
class