@mframework/layer-auth 0.0.1

package/app/components/blocks/logoutButton.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-btn variant="flat" @click="signOut">Logout</v-btn>
+</template>
+
+<script setup>
+const { logout } = useAuth()
+const router = useRouter()
+
+const signOut = async () => {
+  await logout()
+  await router.push('/login')
+}
+</script>
+

package/app/composables/useAuth.ts

@@ -0,0 +1,159 @@
+import type {
+  Subscription
+} from '@better-auth/stripe'
+import type {
+  CustomerState
+} from '@polar-sh/sdk/models/components/customerstate.js'
+import type {
+  BetterAuthClientOptions,
+  InferSessionFromClient,
+  User
+} from 'better-auth/client'
+import {
+  createAuthClient
+} from 'better-auth/client'
+import {
+  getAuthPlugins
+} from '../utils/plugins'
+
+export type UseAuthOptions = {
+  /** An existing auth client. If provided, it's used as-is. */
+  client ? : any
+  /** Base URL for the auth client if creating one. */
+  baseURL ? : string
+  /** Optional headers to send with requests. */
+  headers ? : Record < string,
+  string >
+  /** Payment provider: 'stripe' or 'polar'. If omitted, 'stripe' is assumed. */
+  payment ? : 'stripe' | 'polar'
+  /** Optional app-level reload/redirect function (framework-specific). */
+  reload ? : (opts: {
+    path ? : string
+  }) => Promise < void >
+}
+
+export function useAuth(options: UseAuthOptions = {}) {
+  const {
+    client: providedClient,
+    baseURL,
+    headers,
+    payment = 'stripe',
+    reload
+  } = options
+
+  const client = providedClient || createAuthClient({
+    baseURL: baseURL || undefined,
+    fetchOptions: {
+      headers
+    },
+    socialProviders: {
+      github: {
+        clientId: process.env.GITHUB_CLIENT_ID!,
+        clientSecret: process.env.GITHUB_CLIENT_SECRET!
+      },
+      microsoft: {
+        clientId: process.env.MICROSOFT_CLIENT_ID!,
+        clientSecret: process.env.MICROSOFT_CLIENT_SECRET!
+      },
+      twitter: {
+        clientId: process.env.TWITTER_CLIENT_ID!,
+        clientSecret: process.env.TWITTER_CLIENT_SECRET!
+      }
+    },
+    plugins: getAuthPlugins({
+      subscription: true
+    })
+  })
+
+  let session: InferSessionFromClient < BetterAuthClientOptions > | null = null
+  let user: User | null = null
+  let subscriptions: Subscription[] = []
+  let polarState: CustomerState | null = null
+  let sessionFetching = false
+
+  const fetchSession = async () => {
+    if (sessionFetching) return
+    sessionFetching = true
+    const {
+      data
+    } = await client.getSession()
+    session = data?.session || null
+
+    const userDefaults = {
+      image: null,
+      role: null,
+      banReason: null,
+      banned: null,
+      banExpires: null,
+      stripeCustomerId: null
+    }
+    user = data?.user ? Object.assign({}, userDefaults, data.user) : null
+    subscriptions = []
+    if (user) {
+      if (payment == 'stripe') {
+        const {
+          data: subscriptionData
+        } = await client.subscription.list()
+        subscriptions = subscriptionData || []
+      } else if (payment == 'polar') {
+        const {
+          data: customerState
+        } = await client.customer.state()
+        polarState = customerState
+      }
+    }
+    sessionFetching = false
+    return data
+  }
+
+  if (client?.$store?.listen) {
+    client.$store.listen('$sessionSignal', async (signal: any) => {
+      if (!signal) return
+      await fetchSession()
+    })
+  }
+
+  return {
+    session,
+    user,
+    subscription: client.subscription,
+    subscriptions,
+    loggedIn: () => !!session,
+    activeStripeSubscription: () => {
+      return subscriptions.find((sub: {
+        status: string
+      }) => sub.status === 'active' || sub.status === 'trialing')
+    },
+    activePolarSubscriptions: () => {
+      return polarState?.activeSubscriptions
+    },
+    signIn: client.signIn,
+    signUp: client.signUp,
+    forgetPassword: client.forgetPassword,
+    resetPassword: client.resetPassword,
+    sendVerificationEmail: client.sendVerificationEmail,
+    errorCodes: client.$ERROR_CODES,
+    async signOut({
+      redirectTo
+    }: {
+      redirectTo ? : string
+    } = {}) {
+      await client.signOut({
+        fetchOptions: {
+          onSuccess: async () => {
+            session = null
+            user = null
+            if (redirectTo && typeof reload === 'function') {
+              await reload({
+                path: redirectTo.toString()
+              })
+            }
+          }
+        }
+      })
+    },
+    fetchSession,
+    payment,
+    client
+  }
+}

package/app/composables/useUser.ts

@@ -0,0 +1,65 @@
+import { ref } from 'vue';
+
+// `base-app` generated Prisma types may not exist in this workspace during isolated
+// builds. Use a local minimal `User` alias to keep the layer buildable.
+type User = any
+
+const isEditOpen = ref(false);
+const isCreateOpen = ref(false);
+const isDeleteOpen = ref(false);
+const isLoading = ref(false);
+const userToEdit = ref<User | null>(null);
+
+export const useUser = () => {
+
+    const closeOtherModals = () => {
+        userToEdit.value = null;
+        isEditOpen.value = false;
+        isDeleteOpen.value = false;
+        isCreateOpen.value = false;
+    };
+
+
+    const openEditUser = (user: User) => {
+        closeOtherModals();
+        userToEdit.value = user;
+        isEditOpen.value = true;
+    };
+
+    const closeEditUser = () => {
+        isEditOpen.value = false;
+        userToEdit.value = null;
+    };
+
+    const openDeleteUser = () => {
+        closeOtherModals();
+        isDeleteOpen.value = true;
+    };
+
+    const closeDeleteUser = () => {
+        isDeleteOpen.value = false;
+    };
+
+    const openAddUser = () => {
+        closeOtherModals();
+        isCreateOpen.value = true;
+    };
+    const closeCreateUser = () => {
+        closeOtherModals();
+        isCreateOpen.value = false;
+    };
+
+    return {
+        isEditOpen,
+        isDeleteOpen,
+        isLoading,
+        userToEdit,
+        openEditUser,
+        closeEditUser,
+        openDeleteUser,
+        closeDeleteUser,
+        openAddUser,
+        isCreateOpen,
+        closeCreateUser
+    };
+};

package/app/layouts/auth.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+</script>

package/app/middleware/redirect.global.ts

@@ -0,0 +1,7 @@
+import { defineNuxtRouteMiddleware, navigateTo } from "nuxt/app"
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.path !== '/' && to.path.endsWith('/')) {
+    return navigateTo(to.path.replace(/\/+$/, '') || '/')
+  }
+})

package/app/middleware/seller.ts

@@ -0,0 +1,7 @@
+import { defineNuxtRouteMiddleware } from "nuxt/app";
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.path.startsWith('/dashboard/')) {
+    // seller check here
+  }
+})

package/app/middleware/session.ts

@@ -0,0 +1,12 @@
+import { defineNuxtRouteMiddleware, useCookie } from "nuxt/app"
+
+export default defineNuxtRouteMiddleware(() => {
+  const session = useCookie('session')
+
+  if (!session.value) {
+    session.value = {
+      id: crypto.randomUUID(),
+      date_created: new Date().toISOString()
+    } as any
+  }
+})

package/app/module.ts

@@ -0,0 +1,19 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+
+// Module options TypeScript interface definition
+export interface ModuleOptions {}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'meeovi-auth',
+    configKey: 'meeoviAuth',
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url)
+
+    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
+    addPlugin(resolver.resolve('./runtime/plugin'))
+  },
+})

package/app/pages/callback.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>Processing login...</div>
+</template>
+
+<script setup>
+const router = useRouter()
+const store = useUserStore()
+
+onMounted(async () => {
+  try {
+    // No server session to refresh; rely on local store state
+    if (store.user) {
+      await router.push('/')
+    } else {
+      await router.push('/login')
+    }
+  } catch (error) {
+    console.error('Callback navigation failed:', error)
+    await router.push('/login')
+  }
+})
+</script>

package/app/pages/confirm.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>Waiting for login...</div>
+</template>
+
+<script setup>
+import { navigateTo } from '#app'
+import { watch } from 'vue'
+import { useUserStore } from '../stores/user'
+
+const store = useUserStore()
+
+watch(() => store.user, (u) => {
+  if (u) return navigateTo('/')
+}, { immediate: true })
+
+setTimeout(() => {
+  if (!store.user) navigateTo('/login')
+}, 3000)
+</script>

package/app/pages/forgot-password.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="authPage">
+    <section data-bs-version="5.1" class="authForm">
+      <NuxtImg loading="lazy" src="~/assets/images/logo512alpha-128x128.png" alt="Meeovi Logo" class="authLogo" />
+      <h1 class="mbr-section-title mbr-fonts-style display-1">Forgot Password</h1>
+
+      <div class="mbr-section-btn">
+        <div class="request-reset-form">
+          <p>Enter your email address to receive a password reset link.</p>
+          <form class="mbr-section-btn" :schema="schema" :state="state" @submit="onSubmit">
+            <v-text-field v-model="state.email" type="email" label="Email" required></v-text-field>
+            <div class="mb-3">
+              <div ref="turnstileRef"></div>
+            </div>
+            <v-btn class="mt-2 btn btn-primary display-4" type="submit" block :loading="loading" :disabled="loading || !turnstileToken">
+              Send Reset Link
+            </v-btn>
+          </form>
+        </div>
+
+        <v-alert v-if="message" :type="messageType" class="mt-4" variant="tonal" closable>
+          {{ message }}
+        </v-alert>
+
+        <div class="mt-4 text-center">
+          <p>Remember your password?
+            <NuxtLink to="/login">Sign In</NuxtLink>
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { useHead } from 'nuxt/app'
+import { definePageMeta, useLocalePath, useAuth } from '#imports'
+import { z } from 'zod'
+import { reactive, ref } from 'vue'
+
+definePageMeta({
+  auth: {
+    only: 'guest'
+  }
+})
+
+useHead({
+  title: 'Forgot Password'
+})
+
+const auth = useAuth()
+const toast = useToast()
+const localePath = useLocalePath()
+
+const schema = z.object({
+  email: z.email(('forgotPassword.errors.invalidEmail'))
+})
+
+const state = reactive<Partial<Schema>>({
+  email: undefined
+})
+
+const loading = ref(false)
+
+// expose message and messageType used by the template v-alert
+const message = ref<string | null>(null)
+const messageType = ref<'info' | 'success' | 'error' | 'warning' | undefined>(undefined)
+
+// Turnstile placeholders referenced in the template
+const turnstileRef = ref<HTMLElement | null>(null)
+const turnstileToken = ref<string | null>(null)
+
+async function onSubmit(event) {
+  event.preventDefault()
+  if (loading.value)
+    return
+
+  loading.value = true
+  // clear previous messages
+  message.value = null
+  messageType.value = undefined
+
+  const { error } = await auth.forgetPassword({
+    email: state.email,
+    redirectTo: localePath('/reset-password')
+  })
+
+  if (error) {
+    const text = error.message || error.statusText
+    // update v-alert bindings
+    message.value = text
+    messageType.value = 'error'
+    toast.show({
+      title: text,
+      color: 'error'
+    })
+  }
+  else {
+    const successText = ('forgotPassword.success')
+    // update v-alert bindings
+    message.value = successText
+    messageType.value = 'success'
+    toast.show({
+      title: successText,
+      color: 'success'
+    })
+  }
+  loading.value = false
+}
+</script>
+
+<style scoped>
+  .authPage {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--v-background);
+  }
+
+  .authForm {
+    width: 100%;
+    max-width: 400px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: var(--v-surface-variant);
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .authLogo {
+    display: block;
+    margin: 0 auto 2rem;
+    max-width: 128px;
+    height: auto;
+  }
+
+  .mbr-section-title {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    font-weight: 600;
+  }
+
+  .v-alert {
+    margin-top: 1rem;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .mt-4 {
+    margin-top: 1rem;
+  }
+</style>

package/app/pages/i18n.json

@@ -0,0 +1,111 @@
+{
+  "en": {
+    "signIn": {
+      "welcome": "Welcome to {name}",
+      "email": "Email",
+      "password": "Password",
+      "emailPlaceholder": "Email Address",
+      "passwordPlaceholder": "Password",
+      "rememberMe": "Remember me",
+      "forgotPassword": "Forgot your password?",
+      "signIn": "Sign In",
+      "noAccount": "Don't have an account?",
+      "createAccount": "Create today!",
+      "or": "Or",
+      "signInSuccess": "Sign in Success",
+      "errors": {
+        "invalidEmail": "Invalid email address",
+        "passwordLength": "Password must be at least {min} characters"
+      },
+      "emailNotVerified": "Email Not Verified",
+      "emailNotVerifiedDesc": "Please verify your email address to continue.",
+      "sendEmail": "Send Verification Email",
+      "sendEmailSuccess": "Verification email has been sent",
+      "sendEmailError": "Failed to send verification email"
+    }
+  },
+  "zh-CN": {
+    "signIn": {
+      "welcome": "欢迎使用 {name}",
+      "email": "邮箱",
+      "password": "密码",
+      "emailPlaceholder": "邮箱地址",
+      "passwordPlaceholder": "密码",
+      "rememberMe": "记住我",
+      "forgotPassword": "忘记密码？",
+      "signIn": "登录",
+      "noAccount": "还没有账号？",
+      "createAccount": "立即注册！",
+      "or": "或者",
+      "signInSuccess": "登录成功",
+      "errors": {
+        "invalidEmail": "无效的邮箱地址",
+        "passwordLength": "密码长度至少为{min}个字符"
+      },
+      "emailNotVerified": "邮箱未验证",
+      "emailNotVerifiedDesc": "请验证您的邮箱地址以继续。",
+      "resendEmail": "重新发送验证邮件",
+      "resendEmailSuccess": "验证邮件已发送",
+      "resendEmailError": "发送验证邮件失败",
+      "sendEmail": "发送验证邮件",
+      "sendEmailSuccess": "验证邮件已发送",
+      "sendEmailError": "发送验证邮件失败"
+    }
+  },
+  "ja": {
+    "signIn": {
+      "welcome": "{name}へようこそ",
+      "email": "メールアドレス",
+      "password": "パスワード",
+      "emailPlaceholder": "メールアドレス",
+      "passwordPlaceholder": "パスワード",
+      "rememberMe": "ログイン状態を保持",
+      "forgotPassword": "パスワードをお忘れですか？",
+      "signIn": "ログイン",
+      "noAccount": "アカウントをお持ちでない方",
+      "createAccount": "新規登録！",
+      "or": "または",
+      "signInSuccess": "ログインに成功しました",
+      "errors": {
+        "invalidEmail": "無効なメールアドレス",
+        "passwordLength": "パスワードは{min}文字以上である必要があります"
+      },
+      "emailNotVerified": "メールアドレス未確認",
+      "emailNotVerifiedDesc": "続行するにはメールアドレスを確認してください。",
+      "resendEmail": "確認メールを再送信",
+      "resendEmailSuccess": "確認メールを送信しました",
+      "resendEmailError": "確認メールの送信に失敗しました",
+      "sendEmail": "認証メールを送信",
+      "sendEmailSuccess": "認証メールを送信しました",
+      "sendEmailError": "認証メールの送信に失敗しました"
+    }
+  },
+  "fr": {
+    "signIn": {
+      "welcome": "Bienvenue sur {name}",
+      "email": "E-mail",
+      "password": "Mot de passe",
+      "emailPlaceholder": "Adresse e-mail",
+      "passwordPlaceholder": "Mot de passe",
+      "rememberMe": "Se souvenir de moi",
+      "forgotPassword": "Mot de passe oublié ?",
+      "signIn": "Se connecter",
+      "noAccount": "Vous n'avez pas de compte ?",
+      "createAccount": "Créez-en un !",
+      "or": "Ou",
+      "signInSuccess": "Connexion réussie",
+      "errors": {
+        "invalidEmail": "Adresse e-mail invalide",
+        "passwordLength": "Le mot de passe doit contenir au moins {min} caractères"
+      },
+      "emailNotVerified": "Email non vérifié",
+      "emailNotVerifiedDesc": "Veuillez vérifier votre adresse e-mail pour continuer.",
+      "resendEmail": "Renvoyer l'e-mail de vérification",
+      "resendEmailSuccess": "L'e-mail de vérification a été envoyé",
+      "resendEmailError": "Échec de l'envoi de l'e-mail de vérification",
+      "sendEmail": "Envoyer l'e-mail de vérification",
+      "sendEmailSuccess": "L'e-mail de vérification a été envoyé",
+      "sendEmailError": "Échec de l'envoi de l'e-mail de vérification"
+    }
+  }
+}