scuff/src/components/Login.svelte

<script lang="ts">
	import api from '$lib/api';
	import { tokenStore, userStore } from '../stores';
	import { PUBLIC_INSTANCE_URL } from '$env/static/public';

	let username = '';
	let password = '';

	const onLogin = async () => {
		const app = await api.oauth.createApp(PUBLIC_INSTANCE_URL);
		const result = await api.oauth.getTokenFromCredentials(
			PUBLIC_INSTANCE_URL,
			app,
			username,
			password
		);
		tokenStore.set(result.access_token);
		const user = await api.user.verifyCredentials(PUBLIC_INSTANCE_URL, result.access_token);
		console.log('user', user);
		userStore.set(user);
	};
</script>

<form on:submit|preventDefault={onLogin}>
	<label>
		Username
		<input type="text" name="" placeholder="username" bind:value={username} required />
	</label>
	<label>
		Password
		<input type="password" name="password" bind:value={password} required />
	</label>
	<button>Login</button>
</form>