feat: Add authentication support via Supabase

.changeset/config.json

@@ -15,5 +15,9 @@
 	"snapshot": {
 		"useCalculatedVersion": true
 	},
-	"ignore": ["@styleframe/plugin-playground", "@styleframe/testing-integration"]
+	"ignore": [
+		"@styleframe/plugin-playground",
+		"@styleframe/testing-integration",
+		"@styleframe/app-shared"
+	]
 }

apps/app/.env.example

@@ -0,0 +1,19 @@
+#
+# Application
+#
+
+BASE_URL=http://localhost:4000
+
+#
+# Supabase
+#
+
+SUPABASE_URL=
+SUPABASE_KEY=
+
+#
+# Posthog
+#
+
+POSTHOG_PUBLIC_KEY=phc_Vu3wqbMj8M5iWzvEulIXlK5U0A3hqkb5rlVM1DLtZsb
+POSTHOG_HOST=

apps/app/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

apps/app/app/app.vue

@@ -0,0 +1,8 @@
+<template>
+	<UApp>
+		<NuxtLoadingIndicator color="var(--ui-primary)" />
+		<NuxtLayout>
+			<NuxtPage />
+		</NuxtLayout>
+	</UApp>
+</template>

apps/app/app/layouts/auth.vue

@@ -0,0 +1,9 @@
+<template>
+  <MorphingGradientBackground v-slot="{ onMousemove }">
+    <UMain class="flex items-center justify-center" @mousemove="onMousemove">
+      <UContainer class="py-8">
+        <slot />
+      </UContainer>
+    </UMain>
+  </MorphingGradientBackground>
+</template>

apps/app/app/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <UMain>
+    <UContainer>
+      <slot />
+    </UContainer>
+  </UMain>
+</template>

apps/app/app/pages/confirm.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const user = useSupabaseUser();
+const redirectInfo = useSupabaseCookieRedirect();
+
+useSeoMeta({
+	title: "Signin Confirmation",
+	description: "Confirm your authentication to access all styleframe features",
+});
+
+definePageMeta({
+	layout: "auth",
+});
+
+watch(
+	user,
+	() => {
+		if (user.value) {
+			// Get redirect path, and clear it from the cookie
+			const path = redirectInfo.pluck();
+			// Redirect to the saved path, or fallback to home
+			return navigateTo(path || "/");
+		}
+	},
+	{ immediate: true },
+);
+</script>
+
+<template>
+	<div>Waiting for login...</div>
+</template>

apps/app/app/pages/forgot-password.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useRuntimeConfig, useSupabaseClient } from "#imports";
+import { ref } from "vue";
+
+const runtimeConfig = useRuntimeConfig();
+const supabase = useSupabaseClient();
+const email = ref("");
+
+const requestResetPassword = async () => {
+	const { data, error } = await supabase.auth.resetPasswordForEmail(
+		email.value,
+		{
+			redirectTo: `${runtimeConfig.public.baseUrl}/reset-password`,
+		},
+	);
+	if (error) console.log(error);
+};
+</script>
+
+<template>
+	<div>
+		<input v-model="email" type="email" />
+		<button @click="requestResetPassword">Reset Password</button>
+	</div>
+</template>

apps/app/app/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+	<h1>Dashboard</h1>
+</template>

apps/app/app/pages/login.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { useSupabaseClient, useSupabaseUser } from "#imports";
+import type { AuthFormField } from "@nuxt/ui";
+
+const supabase = useSupabaseClient();
+const user = useSupabaseUser();
+const runtimeConfig = useRuntimeConfig();
+const toast = useToast();
+
+useSeoMeta({
+	title: "Log In",
+	description: "Log in to access all styleframe features",
+});
+
+definePageMeta({
+	layout: "auth",
+});
+
+watchEffect(() => {
+	if (user.value) {
+		return navigateTo("/");
+	}
+});
+
+const fields: AuthFormField[] = [
+	{
+		name: "email",
+		type: "text" as const,
+		label: "Email",
+		placeholder: "Enter your email",
+		required: true,
+	},
+	{
+		name: "password",
+		label: "Password",
+		type: "password" as const,
+		placeholder: "Enter your password",
+	},
+];
+
+const providers = [
+	{
+		label: "Log in with GitHub",
+		icon: "i-simple-icons-github",
+		onClick: async () => {
+			const { error } = await supabase.auth.signInWithOAuth({
+				provider: "github",
+				options: {
+					redirectTo: `${runtimeConfig.public.baseUrl}/confirm`,
+				},
+			});
+			if (error) displayError(error);
+		},
+	},
+];
+
+const signIn = async (email: string, password: string) => {
+	const { error } = await supabase.auth.signInWithPassword({
+		email,
+		password,
+	});
+	if (error) displayError(error);
+};
+
+async function onSubmit(payload: {
+	data: { email: string; password: string };
+}) {
+	const email = payload.data.email;
+	const password = payload.data.password;
+
+	await signIn(email, password);
+}
+
+const displayError = (error: Error) => {
+	toast.add({
+		title: "Error",
+		description: error.message,
+		icon: "i-lucide-alert-circle",
+		color: "error",
+	});
+};
+</script>
+
+<template>
+	<UPageCard class="max-w-sm w-full h-full mx-auto my-auto">
+		<UAuthForm
+			title="Log in to styleframe"
+			:fields="fields"
+			:providers="providers"
+			@submit="onSubmit"
+		>
+			<template #footer>
+				<p class="mb-4">
+					<UButton variant="link" class="p-0" to="/forgot-password">
+						Forgot your password?
+					</UButton>
+				</p>
+				<p>
+					Don't have an account?
+					<UButton variant="link" class="p-0" to="/signup">
+						Sign up </UButton
+					>.
+				</p>
+			</template>
+		</UAuthForm>
+	</UPageCard>
+</template>

apps/app/app/pages/reset-password.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const supabase = useSupabaseClient();
+const newPassword = ref("");
+
+const updateUserPassword = async () => {
+	const { data, error } = await supabase.auth.updateUser({
+		password: newPassword.value,
+	});
+	if (error) console.log(error);
+};
+</script>
+
+<template>
+	<div>
+		<input v-model="newPassword" type="password" />
+		<button @click="updateUserPassword">Update Password</button>
+	</div>
+</template>