LogIn.vue:
```ts
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { displaySignInResponseError } from '~/lib/feedback';
import { Icon } from '@iconify/vue'
import Separator from './ui/separator/Separator.vue';

const userStore = useUserStore()
const { fetch } = useUserSession()
const email = ref('');
const password = ref('');

function signIn() {
  userStore.signIn(email.value, password.value)
  .then(async () => {
    /* reloadNuxtApp({ ttl: 0, force: true, persistState: false, path: "/dashboard" }); */
    await fetch();
    navigateTo('/dashboard', {
      redirectCode: 303
    })
  })
  .catch((error) => {
    console.log("error" + error);
    displaySignInResponseError(error);
  })
}
</script>

<template>
  <div>
    <Card class="max-w-sm mx-auto">
      <CardHeader>
        <CardTitle class="text-2xl">
          Login
        </CardTitle>
        <CardDescription>
          Enter your email below to login to your account
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="grid gap-4">
          <div class="grid gap-2">
            <Label for="email">Email</Label>
            <Input id="email" type="email" name="email" v-model="email" placeholder="m@example.com" required />
          </div>
          <div class="grid gap-2">
            <div class="flex items-center">
              <Label for="password">Password</Label>
              <NuxtLink to="/new-password" class="inline-block ml-auto text-sm underline">
                Forgot your password?
              </NuxtLink>
            </div>
            <Input id="password" type="password" name="password" v-model="password" required />
          </div>
          <Button type="button" class="w-full" @click="signIn()">
            Login
          </Button>
          <Separator label="or Oauth" class="my-2" />
          <div class="flex flex-col gap-1">
            <Button type="button" variant="outline" class="w-full" as-child>
              <a href="/auth/google">
                Sign in/up with Google <Icon icon="devicon:google" class="h-[1.2rem] w-[1.2rem] ml-2" />
              </a>
            </Button>
            <Button type="button" variant="outline" class="w-full" as-child>
              <a href="/auth/github">
                Sign in/up with GitHub <Icon icon="ant-design:github-filled" class="h-[1.4rem] w-[1.4rem] ml-2" />
              </a>
            </Button>
          </div>
          <Separator />
        </div>
        <div class="mt-4 text-sm text-center">
          Don't have an account?
          <NuxtLink to="/sign-up" class="underline">
            Sign up
          </NuxtLink>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

<style scoped></style>
```