UIPackage
Vue React

Auth Sign In

block auth
Edit on GitHub

Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/auth-sign-in.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/auth-sign-in

Examples

npm dependencies

lucide-vue-next

Files (1)

  • app/components/blocks/AuthSignIn.vue 4 kB 
    <script setup lang="ts">
import { ref } from 'vue'
import { Github, Chrome } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Separator } from '@/components/ui/separator'

withDefaults(
  defineProps<{
    title?: string
    description?: string
    signUpHref?: string
    forgotPasswordHref?: string
    oauthProviders?: Array<'github' | 'google'>
  }>(),
  {
    title: 'Welcome back',
    description: 'Sign in to your account to continue',
    signUpHref: '/sign-up',
    forgotPasswordHref: '/forgot-password',
    oauthProviders: () => ['github', 'google'],
  },
)

const emit = defineEmits<{
  (e: 'submit', payload: { email: string; password: string; remember: boolean }): void
  (e: 'oauth', provider: 'github' | 'google'): void
}>()

const email = ref('')
const password = ref('')
const remember = ref(false)

function onSubmit() {
  emit('submit', { email: email.value, password: password.value, remember: remember.value })
}
</script>

<template>
  <div class="bg-background flex min-h-svh items-center justify-center p-6">
    <Card class="w-full max-w-sm">
      <CardHeader class="text-center">
        <CardTitle class="text-2xl">{{ title }}</CardTitle>
        <CardDescription>{{ description }}</CardDescription>
      </CardHeader>
      <CardContent>
        <form class="space-y-4" @submit.prevent="onSubmit">
          <div class="grid gap-2">
            <Label for="email">Email</Label>
            <Input
              id="email"
              v-model="email"
              type="email"
              placeholder="[email protected]"
              autocomplete="email"
              required
            />
          </div>
          <div class="grid gap-2">
            <div class="flex items-center justify-between">
              <Label for="password">Password</Label>
              <a
                :href="forgotPasswordHref"
                class="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
              >
                Forgot password?
              </a>
            </div>
            <Input id="password" v-model="password" type="password" autocomplete="current-password" required />
          </div>
          <div class="flex items-center gap-2">
            <Checkbox id="remember" v-model="remember" />
            <Label for="remember" class="text-sm font-normal">Remember me for 30 days</Label>
          </div>
          <Button type="submit" class="w-full">Sign in</Button>
        </form>

        <template v-if="oauthProviders.length > 0">
          <div class="my-6 flex items-center gap-3">
            <Separator class="flex-1" />
            <span class="text-muted-foreground text-xs uppercase">or continue with</span>
            <Separator class="flex-1" />
          </div>
          <div class="grid gap-2" :class="oauthProviders.length > 1 ? 'sm:grid-cols-2' : ''">
            <Button
              v-if="oauthProviders.includes('github')"
              variant="outline"
              type="button"
              @click="emit('oauth', 'github')"
            >
              <Github class="mr-2 size-4" />GitHub
            </Button>
            <Button
              v-if="oauthProviders.includes('google')"
              variant="outline"
              type="button"
              @click="emit('oauth', 'google')"
            >
              <Chrome class="mr-2 size-4" />Google
            </Button>
          </div>
        </template>
      </CardContent>
      <CardFooter class="justify-center">
        <p class="text-muted-foreground text-sm">
          Don't have an account?
          <a :href="signUpHref" class="text-foreground font-medium underline-offset-4 hover:underline">Sign up</a>
        </p>
      </CardFooter>
    </Card>
  </div>
</template>

Raw manifest: https://uipkge.dev/r/vue/auth-sign-in.json