@mframework/layer-auth 0.0.1

package/app/pages/login.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="max-w-md">
+    <v-toolbar color="transparent">
+      <v-toolbar-title class="text-xs md:text-sm">Sign In</v-toolbar-title>
+      <v-toolbar-subtitle>
+        Enter your email below to login to your account
+      </v-toolbar-subtitle>
+    </v-toolbar>
+
+    <v-card>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" required v-model="email" />
+        </div>
+
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <NuxtLink to="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </NuxtLink>
+          </div>
+
+          <Input id="password" type="password" placeholder="password" autoComplete="password" v-model="password" />
+        </div>
+        <div class="flex items-center gap-2">
+          <Checkbox id="remember" v-model="rememberMe" />
+          <Label for="remember">Remember me</Label>
+        </div>
+        <v-btn type="submit" class="w-full" :disabled="loading" @click="handleSignIn">
+          <Loader2 size="16" class="animate-spin" v-if="loading" />
+          <p v-else>Login</p>
+        </v-btn>
+        <v-btn variant="secondary" :disabled="loading" class="gap-2" @click="handlePasskey">
+          <Key size="16" />
+          Sign-in with Passkey
+        </v-btn>
+        <div :class="cn(
+					'w-full gap-2 flex items-center',
+					'justify-between flex-col'
+				)">
+          <v-btn variant="outlined" :class="cn(
+							'w-full gap-2'
+						)" :disabled="loading" @click="handleSocialSignIn('github')">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+              <path fill="currentColor"
+                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2">
+              </path>
+            </svg>
+            Sign in with Github
+          </v-btn>
+          <v-btn variant="outlined" :class="cn(
+							'w-full gap-2'
+						)" :disabled="loading" @click="handleSocialSignIn('microsoft')">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+              <path fill="#00A4EF" d="M2 3h9v9H2zm9 19H2v-9h9zM21 3v9h-9V3zm0 19h-9v-9h9z"></path>
+            </svg>
+            Sign in with Microsoft
+          </v-btn>
+          <v-btn variant="outlined" :class="cn(
+							'w-full gap-2'
+						)" :disabled="loading" @click="handleSocialSignIn('twitter')">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512">
+              <path fill="currentColor"
+                d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm297.1 84L257.3 234.6L379.4 396h-95.6L209 298.1L123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5l78.2-89.5zm-37.8 251.6L153.4 142.9h-28.3l171.8 224.7h26.3z">
+              </path>
+            </svg>
+            Sign in with Twitter
+          </v-btn>
+        </div>
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref
+  } from "vue";
+  import { useAuth } from "../composables/useAuth";
+
+  const { signIn } = useAuth();
+
+  const email = ref("");
+  const password = ref("");
+  const loading = ref(false);
+  const rememberMe = ref(false);
+  const toast = useToast();
+  
+  // simple classnames helper used in the template
+  const cn = (...classes) =>
+    classes.filter(Boolean).join(" ");
+
+  const handleSignIn = async () => {
+    await signIn.email({
+      email: email.value,
+      password: password.value,
+      rememberMe: rememberMe.value,
+      fetchOptions: {
+        onRequest: () => {
+          loading.value = true;
+        },
+        onResponse: () => {
+          loading.value = false;
+        },
+      },
+    });
+  };
+
+  const handlePasskey = async () => {
+    await signIn.passkey({
+      fetchOptions: {
+        onRequest: () => {
+          loading.value = true;
+        },
+        onResponse: () => {
+          loading.value = false;
+        },
+      },
+    });
+  };
+
+  const handleSocialSignIn = async (provider) => {
+    await signIn.social({
+      provider,
+      callbackURL: "/",
+      fetchOptions: {
+        onRequest: () => {
+          loading.value = true;
+        },
+        onResponse: () => {
+          loading.value = false;
+        },
+      },
+    });
+  }
+</script>

package/app/pages/register.vue

@@ -0,0 +1,177 @@
+<template>
+	<div class="z-50 rounded-md rounded-t-none max-w-md">
+		<v-toolbar>
+			<v-toolbar-title class="text-lg md:text-xl">Sign Up</v-toolbar-title>
+			<v-toolbar-subtitle>
+				Enter your information to create an account
+			</v-toolbar-subtitle>
+		</v-toolbar>
+		<v-card>
+			<div class="grid gap-4">
+				<div class="grid grid-cols-2 gap-4">
+					<div class="grid gap-2">
+						<v-text-field
+							id="first-name"
+							placeholder="Max"
+              label="First Name"
+							required
+							v-model="firstName"
+						/>
+					</div>
+					<div class="grid gap-2">
+						<v-text-field
+							id="last-name"
+							placeholder="Robinson"
+              label="Last Name"
+							required
+							v-model="lastName"
+						/>
+					</div>
+					<div class="grid gap-2">
+						<v-text-field
+							id="email"
+							type="email"
+							placeholder="m@example.com"
+              label="Email"
+							required
+							v-model="email"
+						/>
+					</div>
+					<div class="grid gap-2">
+						<v-text-field
+							id="password"
+							type="password"
+							placeholder="Password"
+							autocomplete="new-password"
+              label="Password"
+							v-model="password"
+						/>
+					</div>
+					<div class="grid gap-2">
+						<v-text-field
+							id="password_confirmation"
+							type="password"
+							autocomplete="new-password"
+							placeholder="Confirm Password"
+              label="Confirm Password"
+							v-model="passwordConfirmation"
+						/>
+					</div>
+					<div class="grid gap-2">
+						<v-text-field
+              label="Profile Image (optional)"
+						/>
+						<div class="flex items-end gap-4">
+							<div v-if="imagePreview" class="relative w-16 h-16 rounded-sm overflow-hidden">
+								<NuxtImg
+									:src="imagePreview"
+									alt="Profile preview"
+									class="object-cover"
+								/>
+							</div>
+							<div class="flex items-center gap-2 w-full">
+								<v-text-field
+									id="image"
+									type="file"
+									accept="image/*"
+									@change="handleImageChange"
+									class="w-full"
+								/>
+								<X
+									class="cursor-pointer"
+									@click="image = null; imagePreview = null"
+								/>
+							</div>
+						</div>
+					</div>
+					<v-btn
+						type="submit"
+						class="w-full"
+						:disabled="loading"
+						@click="handleSignUp"
+					>
+						<Loader2 size="16" class="animate-spin" v-if="loading" />
+						<span v-else>Create your account</span>
+					</v-btn>
+				</div>
+			</div>
+		</v-card>
+	</div>
+</template>
+
+
+<script setup>
+import { ref } from 'vue'
+import { definePageMeta, useHead, useRouter } from '#imports'
+import { useAuth } from '../composables/useAuth'
+
+const { signUp } = useAuth();
+
+definePageMeta({
+  layout: false,
+  auth: {
+    only: 'guest'
+  }
+})
+
+const router = useRouter();
+const toast = useToast();
+
+const firstName = ref("");
+const lastName = ref("");
+const email = ref("");
+const password = ref("");
+const passwordConfirmation = ref("");
+const image = ref<File | null>(null);
+const imagePreview = ref<string | null>(null);
+const loading = ref(false);
+
+async function convertImageToBase64(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onloadend = () => resolve(reader.result);
+		reader.onerror = reject;
+		reader.readAsDataURL(file);
+	});
+}
+
+const handleSignUp = async () => {
+	await signUp.email({
+		email: email.value,
+		password: password.value,
+		name: `${firstName.value} ${lastName.value}`,
+		image: image.value ? await convertImageToBase64(image.value) : "",
+		callbackURL: "/dashboard",
+		fetchOptions: {
+			onResponse: () => {
+				loading.value = false;
+			},
+			onRequest: () => {
+				loading.value = true;
+			},
+			onError: (ctx) => {
+				toast.error(ctx.error.message);
+			},
+			onSuccess: () => {
+				router.push("/dashboard");
+			},
+		},
+	})
+};
+
+const handleImageChange = (e) => {
+	const file = (e.target)?.files?.[0];
+	if (file) {
+		image.value = file;
+		const reader = new FileReader();
+		reader.onloadend = () => {
+			imagePreview.value = reader.result;
+		};
+		reader.readAsDataURL(file);
+	}
+};
+
+useHead({
+  title: 'Register'
+});
+</script>

package/app/pages/reset-password.vue

@@ -0,0 +1,124 @@
+<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">Reset Password</h1>
+
+      <div class="reset-password-form">
+        <form class="mbr-section-btn" :schema="schema" :state="state" @submit="onSubmit">
+          <v-text-field v-model="state.password" type="password" label="New Password" required></v-text-field>
+          <v-text-field v-model="state.confirmPassword" type="password" label="Confirm Password" 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">
+            Reset Password
+          </v-btn>
+        </form>
+      </div>
+
+      <v-alert v-if="message" :type="messageType" class="mt-4" variant="tonal">
+        {{ message }}
+      </v-alert>
+
+      <div class="mt-4 text-center">
+        <NuxtLink to="/login">Back to Login</NuxtLink>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { useHead, useRoute, useRuntimeConfig, navigateTo } from '#app'
+import { definePageMeta, useLocalePath, useI18n } from '#imports'
+import { z } from 'zod'
+import { reactive, ref } from 'vue'
+import { useAuth } from '../composables/useAuth'
+
+definePageMeta({
+  auth: {
+    only: 'guest'
+  }
+})
+
+const { t } = useI18n()
+useHead({
+  title: t('resetPassword.title')
+})
+
+const auth = useAuth()
+const toast = useToast()
+const route = useRoute()
+const localePath = useLocalePath()
+const runtimeConfig = useRuntimeConfig()
+
+const state = reactive({
+  password: undefined,
+  confirmPassword: undefined
+})
+
+const schema = z.object({
+  password: z.string().min(8, ('resetPassword.errors.minLength', { min: 8 })),
+  confirmPassword: z.string().min(8, ('resetPassword.errors.minLength', { min: 8 })).refine(val => val === state.password, {
+    message: ('resetPassword.errors.passwordMismatch')
+  })
+})
+
+const loading = ref(false)
+
+// reactive message used by the template's v-alert
+const message = ref(null)
+const messageType = ref('info')
+// ref for the Turnstile container and the token set by the widget
+const turnstileRef = ref(null)
+const turnstileToken = ref(null)
+
+async function onSubmit(event) {
+  event.preventDefault()
+  if (loading.value)
+    return
+
+  // reset any previous message
+  message.value = null
+  messageType.value = 'info'
+
+  loading.value = true
+  const { error } = await auth.resetPassword({
+    newPassword: state.password,
+    token: route.query.token
+  })
+
+  if (error) {
+    toast.show({
+      title: error.message,
+      color: 'error'
+    })
+    message.value = error.message
+    messageType.value = 'error'
+  } else {
+    const successMsg = t('resetPassword.success')
+    toast.show({
+      title: successMsg,
+      color: 'success'
+    })
+    message.value = successMsg
+    messageType.value = 'success'
+    navigateTo(localePath((runtimeConfig.public).auth.redirectGuestTo))
+  }
+  loading.value = false
+}
+</script>
+
+<style scoped>
+  .authForm {
+    max-width: 400px;
+    margin: 2rem auto;
+    padding: 2rem;
+  }
+
+  .message {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-radius: 4px;
+  }
+</style>

package/app/stores/user.ts

@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia'
+
+interface UserState {
+  user: any | null
+  profile: any | null
+  loading: boolean
+}
+
+export const useUserStore = defineStore<'user', UserState>('user', {
+  state: (): UserState => ({
+    user: null,
+    profile: null,
+    loading: true
+  }),
+
+  actions: {
+    setAuth(user: any, profile: any) {
+      this.user = user
+      this.profile = profile
+      this.loading = false
+    },
+
+    setUser(user: any) {
+      this.user = user
+    },
+    clearUser() {
+      this.user = null
+    },
+
+    clear() {
+      this.user = null
+      this.profile = null
+      this.loading = false
+    }
+  },
+
+  getters: {
+    isAuthenticated: (s: UserState) => !!s.user,
+    isSeller: (s: UserState) => s.profile?.role?.key === 'seller' && s.profile?.seller_approved === true,
+    isAdmin: (s: UserState) => s.profile?.role?.key === 'admin',
+    isLoggedIn: (state: UserState) => !!state.user
+  }
+})

package/app/utils/plugins.ts

@@ -0,0 +1,24 @@
+import { stripeClient } from '@better-auth/stripe/client'
+import { polarClient, adminClient, inferAdditionalFields } from '@mframework/adapter-betterauth/'
+
+export type AuthPluginOptions = {
+  /** whether to enable subscription support for stripe plugin */
+  subscription?: boolean
+}
+
+export function getAuthPlugins(opts: AuthPluginOptions = {}): any[] {
+  const { subscription = true } = opts
+
+  return [
+    inferAdditionalFields({
+      user: {
+        polarCustomerId: {
+          type: 'string'
+        }
+      }
+    }),
+    adminClient(),
+    polarClient(),
+    stripeClient({ subscription })
+  ]
+}

package/app/utils/providers/better-auth.ts

@@ -0,0 +1,125 @@
+// Re-export the adapter-provided BetterAuth provider implementation so the
+// layer continues to work while the implementation lives in the adapter
+// package.
+import * as BetterAuth from '@mframework/adapter-betterauth'
+import { registerAuthProvider, getAuthConfig, getFrameworkContext } from '@mframework/adapter-betterauth/'
+import type { AuthProvider } from '@mframework/adapter-betterauth/'
+
+// Create a single shared Better Auth client instance
+let client: any = null
+
+function resolveClientFactory() {
+	return (BetterAuth as any).Client ?? (BetterAuth as any).default ?? BetterAuth
+}
+
+function getClient() {
+	if (client) return client
+
+	const config = getAuthConfig()
+	const ctx = getFrameworkContext()
+
+	const Client = resolveClientFactory()
+	client = Client({
+		baseURL: config.baseUrl,
+		fetch: async (url: string | Request | URL, options: RequestInit = {}) => {
+			// Framework‑agnostic request wrapper
+			const baseHeaders = ctx.getRequestHeaders?.() || {}
+
+			let optionHeaders: Record<string, string> = {}
+
+			if (options.headers instanceof Headers) {
+				options.headers.forEach((value, key) => {
+					optionHeaders[key] = value
+				})
+			} else if (Array.isArray(options.headers)) {
+				for (const [k, v] of options.headers) {
+					optionHeaders[k] = v
+				}
+			} else if (typeof options.headers === 'object' && options.headers !== null) {
+				optionHeaders = options.headers as Record<string, string>
+			}
+
+			const headers = {
+				...baseHeaders,
+				...optionHeaders
+			}
+
+			return fetch(url, { ...options, headers })
+		}
+	})
+
+	return client
+}
+
+const BetterAuthProvider: AuthProvider = {
+	async login(credentials) {
+		const client = getClient()
+		const result = await client.signIn(credentials)
+
+		if (result.error) {
+			throw new Error(result.error.message || 'Login failed')
+		}
+
+		return result.data
+	},
+
+	async logout() {
+		const client = getClient()
+		await client.signOut()
+
+		const ctx = getFrameworkContext()
+		ctx.reloadApp?.()
+	},
+
+	async session() {
+		const client = getClient()
+		const result = await client.session()
+
+		if (result.error) {
+			return null
+		}
+
+		return result.data
+	},
+
+	async register(data) {
+		const client = getClient()
+		const result = await client.signUp(data)
+
+		if (result.error) {
+			throw new Error(result.error.message || 'Registration failed')
+		}
+
+		return result.data
+	},
+
+	async refresh() {
+		const client = getClient()
+		const result = await client.refresh()
+
+		if (result.error) {
+			throw new Error(result.error.message || 'Session refresh failed')
+		}
+
+		return result.data
+	}
+}
+
+// Prefer the adapter-provided implementation when available. Use a
+// synchronous `require` guarded in a try/catch so the layer can work in
+// development even when the adapter package isn't published yet.
+declare const require: any
+try {
+	// Try the package root first, then the source path used during development
+	const adapterPkg = require('@mframework/adapter-betterauth') || require('@mframework/adapter-betterauth/src/provider')
+	const AdapterProvider = adapterPkg?.BetterAuthProvider ?? adapterPkg?.default
+	if (AdapterProvider) {
+		registerAuthProvider('better-auth', AdapterProvider)
+	} else {
+		registerAuthProvider('better-auth', BetterAuthProvider)
+	}
+} catch (e) {
+	registerAuthProvider('better-auth', BetterAuthProvider)
+}
+
+export default BetterAuthProvider

package/nuxt.config.ts

@@ -0,0 +1,18 @@
+import {
+  defineNuxtConfig
+} from 'nuxt/config'
+
+export default defineNuxtConfig({
+  $meta: {
+    name: 'auth',
+  },
+
+  runtimeConfig: {
+    auth: {
+      redirect: {
+        login: '/login',
+        home: '/'
+      }
+    }
+  }
+})

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@mframework/layer-auth",
+  "version": "0.0.1",
+  "description": "The authentication layer for M Framework applications.",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc -p tsconfig.json"
+  },
+  "keywords": [
+    "better-auth",
+    "authentication",
+    "auth",
+    "typescript",
+    "vue",
+    "m-framework"
+  ],
+  "author": "M Framework",
+  "license": "MIT",
+  "dependencies": {
+    "@mframework/adapter-betterauth": "^0.0.7",
+    "typescript": "^5.9.3"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.9",
+    "@types/uuid": "^10.0.0",
+    "nuxt": "^4.3.0"
+  }
+}

package/server/api/auth/[...all].ts

@@ -0,0 +1,7 @@
+import { defineEventHandler, toWebRequest } from 'h3';
+import { auth } from '../../utils/auth';
+
+
+export default defineEventHandler((event) => {
+	return auth.handler(toWebRequest(event));
+});

package/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/server/utils/auth.ts

@@ -0,0 +1,3 @@
+// Re-export the configured BetterAuth runtime from the adapter package.
+export { auth } from '@mframework/adapter-betterauth'
+export type { Auth } from '@mframework/adapter-betterauth'