mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-06 20:37:44 +00:00
76 lines
2.8 KiB
Vue
76 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from "@/components/ui/button";
|
|
import { useSession } from "~/lib/auth-client";
|
|
|
|
definePageMeta({
|
|
layout: "default",
|
|
});
|
|
|
|
const features = [
|
|
"Email & Password",
|
|
"Organization | Teams",
|
|
"Passkeys",
|
|
"Multi Factor",
|
|
"Password Reset",
|
|
"Email Verification",
|
|
"Roles & Permissions",
|
|
"Rate Limiting",
|
|
"Session Management",
|
|
];
|
|
const session = useSession();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-[80vh] flex items-center justify-center overflow-hidden no-visible-scrollbar px-6 md:px-0">
|
|
<main class="flex flex-col gap-4 row-start-2 items-center justify-center">
|
|
<div class="flex flex-col gap-1">
|
|
<h3 class="font-bold text-4xl text-black dark:text-white text-center">
|
|
Better Auth.
|
|
</h3>
|
|
|
|
<p class="text-center break-words text-sm md:text-base">
|
|
Official demo to showcase
|
|
<a
|
|
href="https://better-auth.com"
|
|
target="_blank"
|
|
className="italic underline"
|
|
>better-auth
|
|
</a>
|
|
features and capabilities. <br />
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-3 pt-2 flex-wrap">
|
|
<div class="border-y py-2 border-dotted bg-secondary/60 opacity-80">
|
|
<div class="text-xs flex items-center gap-2 justify-center text-muted-foreground">
|
|
<span class="text-center">
|
|
All features on this demo are Implemented with better auth without
|
|
any custom backend code
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2 justify-center flex-wrap">
|
|
<div v-for="feature in features" :key="feature">
|
|
<span
|
|
class="border-b pb-1 text-muted-foreground text-xs cursor-pointer hover:text-foreground duration-150 ease-in-out transition-all hover:border-foreground flex items-center gap-1">{{
|
|
feature }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-2 mx-auto">
|
|
<NuxtLink to="/sign-in" v-if="!session.data">
|
|
<Button variant="outline" class="rounded-none">
|
|
Sign In
|
|
</Button>
|
|
</NuxtLink>
|
|
<NuxtLink to="/dashboard" v-if="session.data">
|
|
<Button variant="outline" class="rounded-none">
|
|
Dashboard
|
|
</Button>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|