# Atproto Login

## Example

```svelte
<script lang="ts">
	import { AtprotoLoginModal, atProtoLoginModalState, Button, toast } from '@foxui/all';
</script>



<Button onclick={() => atProtoLoginModalState.show()}>
	Login
</Button>

<AtprotoLoginModal login={async (handle: string) => {
		if (!handle) {
			toast.error('Please enter a handle');
			return false;
		}
		await new Promise((resolve) => setTimeout(resolve, 1000));
		if (Math.random() < 0.2) {
			throw Error('Something went wrong (this is what an error looks like)');
		}
		toast.success(`Login successful for ${handle}`);
		return true;
	}} signup={async () => {
		toast.success('Signup successful');
		atProtoLoginModalState.hide();
		return true;
	}} />
```

## Documentation

## Usage

### Add modal to your `+layout.svelte`

```svelte
<AtprotoLoginModal
	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

```svelte
<Button onclick={() => atProtoLoginModalState.show()}>Login</Button>
```

## API Reference

### AtprotoLoginModal
A modal dialog for AT Protocol (Bluesky) login with handle autocomplete. Export atProtoLoginModalState to control the modal.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| login | `(handle: string) => Promise<boolean | undefined>` | `-` | Callback to handle the login action. Should return true on success. |
| signup | `() => Promise<boolean | undefined>` | `-` | Callback to handle the signup action. |
| formAction | `string` | `-` | The form action URL for server-side form submission. |
| formMethod | `'dialog' | 'get' | 'post'` | `'get'` | The form submission method. |
| loginOnSelect | `boolean` | `true` | Whether to automatically trigger login when a handle is selected from autocomplete. |