first commit

Author: ymc9

.env.example

@@ -0,0 +1 @@
+NUXT_AUTH_PASSWORD=secretsecretsecretsecretsecretsecretsecret

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.data

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

README.md

@@ -0,0 +1,14 @@
+# ZenStack Nuxt Tutorial Project
+
+This is a sample project for demonstrating how to use ZenStack in a Next.js project.
+
+See documentation [here](https://zenstack.dev/docs/get-started/nuxt).
+
+To run the project:
+
+```
+npm run build
+npm run dev
+```
+
+For the Next.js 13 new "app" directory, please checkout [this project](https://github.com/zenstackhq/docs-tutorial-nextjs-app-dir).

app.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { provideHooksContext } from './lib/hooks';
+
+// Provide tanstack-query context
+// Use an absolute endpoint so server-side fetch works too
+provideHooksContext({
+    endpoint: 'http://localhost:3000/api/model',
+});
+</script>
+
+<template>
+    <NuxtExampleLayout repo="nuxt/examples">
+        <AppNav />
+        <div>
+            <NuxtPage />
+        </div>
+    </NuxtExampleLayout>
+</template>

auth/composables/auth.ts

@@ -0,0 +1,32 @@
+export const useAuth = () => useNuxtApp().$auth
+
+export const authLogin = async (email: string, password: string) => {
+  await $fetch("/api/auth/login", {
+    method: "POST",
+    body: {
+      email: email,
+      password: password,
+    },
+  });
+  useAuth().redirectTo.value = null;
+  await useAuth().updateSession();
+  await navigateTo(useAuth().redirectTo.value || "/");
+};
+
+export const authRegister = async (email: string, password: string) => {
+  await $fetch("/api/auth/register", {
+    method: "POST",
+    body: {
+      email: email,
+      password: password,
+    },
+  });
+  return await authLogin(email, password);
+};
+
+export const authLogout = async () => {
+  await $fetch("/api/auth/logout", {
+    method: "POST",
+  });
+  await useAuth().updateSession();
+};

auth/nuxt.config.ts

@@ -0,0 +1,21 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+
+// This code is demo only.
+if (!process.env.NUXT_AUTH_PASSWORD) {
+  console.warn('Security warning: NUXT_AUTH_PASSWORD is not set. Using an example value. Please set it otherwise your session is unsecure!');
+  process.env.NUXT_AUTH_PASSWORD = 'secretsecretsecretsecretsecretsecretsecret'
+}
+
+export default defineNuxtConfig({
+  runtimeConfig: {
+    auth: {
+      name: "nuxt-session",
+      password: process.env.NUXT_AUTH_PASSWORD || "",
+    },
+  },
+  nitro: {
+    storage: {
+      ".data:auth": { driver: "fs", base: "./.data/auth" },
+    },
+  },
+});

auth/plugins/0.auth.ts

@@ -0,0 +1,62 @@
+import type { AuthSession } from "~~/auth/server/utils/session";
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  // Skip plugin when rendering error page
+  if (nuxtApp.payload.error) {
+    return {};
+  }
+
+  const { data: session, refresh: updateSession }
+   = await useFetch<AuthSession>('/api/auth/session');
+
+  const loggedIn: any = computed(() => !!session.value?.email);
+
+  // Create a ref to know where to redirect the user when logged in
+  const redirectTo = useState("authRedirect")
+
+  /**
+   * Add global route middleware to protect pages using:
+   * 
+   * definePageMeta({
+   *  auth: true
+   * })
+   */
+  // 
+
+  addRouteMiddleware(
+    "auth",
+    (to) => {
+      if (to.meta.auth && !loggedIn.value) {
+        redirectTo.value = to.path
+        return "/login";
+      }
+    },
+    { global: true }
+  );
+
+  const currentRoute = useRoute();
+
+  if (process.client) {
+    watch(loggedIn, async (loggedIn) => {
+      if (!loggedIn && currentRoute.meta.auth) {
+        redirectTo.value = currentRoute.path
+        await navigateTo("/login");
+      }
+    });
+  }
+
+  if (loggedIn.value && currentRoute.path === "/login") {
+    await navigateTo(redirectTo.value || "/");
+  }
+
+  return {
+    provide: {
+      auth: {
+        loggedIn,
+        session,
+        redirectTo,
+        updateSession,
+      },
+    },
+  };
+});

auth/server/api/auth/login.post.ts

@@ -0,0 +1,24 @@
+export default eventHandler(async (event) => {
+    const session = await useAuthSession(event);
+    const { email, password } = await readBody(event);
+    const user = await findUserByEmail(email);
+    if (!user) {
+        throw createError({
+            message: 'Email not found! Please register.',
+            statusCode: 401,
+        });
+    }
+
+    if (!user.password || user.password !== (await hash(password))) {
+        throw createError({
+            message: 'Incorrect password!',
+            statusCode: 401,
+        });
+    }
+    await session.update({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+    });
+    return session;
+});

auth/server/api/auth/logout.post.ts

@@ -0,0 +1,7 @@
+export default eventHandler(async (event) => {
+  const session = await useAuthSession(event);
+  await session.clear();
+  return {
+    message: "Successfully logged out!",
+  };
+});

auth/server/api/auth/register.post.ts

@@ -0,0 +1,11 @@
+export default eventHandler(async (event) => {
+  const { email, password } = await readBody(event);
+  await createUser({
+     email,
+     name: email.split('@')[0],
+     password: await hash(password)
+  });
+  return {
+    message: "Successfully registered!",
+  };
+});

auth/server/api/auth/session.get.ts

@@ -0,0 +1,4 @@
+export default eventHandler(async (event) => {
+  const session = await useAuthSession(event);
+  return session.data;
+});

auth/server/utils/db.ts

@@ -0,0 +1,12 @@
+import type { User } from '@prisma/client';
+import { prisma } from '~/server/prisma';
+
+export async function findUserByEmail(email: string) {
+    return prisma.user.findUnique({ where: { email } });
+}
+
+export async function createUser(user: Omit<User, 'id'>) {
+    return prisma.user.create({
+        data: user,
+    });
+}

auth/server/utils/session.ts

@@ -0,0 +1,36 @@
+import type { H3Event, SessionConfig } from "h3";
+import crypto from "uncrypto";
+
+const sessionConfig: SessionConfig = useRuntimeConfig().auth || {};
+
+export type AuthSession = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+export const useAuthSession = async (event: H3Event) => {
+  const session = await useSession<AuthSession>(event, sessionConfig);
+  return session
+};
+
+export const requireAuthSession = async (event: H3Event) => {
+  const session = await useAuthSession(event);
+    if (!session.data.email) {
+      throw createError({
+        message: "Not Authorized",
+        statusCode: 401,
+      });
+    }
+  return session;
+}
+
+export async function hash(str: string) {
+  const msgUint8 = new TextEncoder().encode(str);
+  const hashBuffer = await crypto.subtle.digest("SHA-512", msgUint8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  return hashHex;
+}

components/AppNav.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <nav>
+    <NuxtLink to="/">Home Page</NuxtLink> |
+    <NuxtLink to="/secret">Secret Page</NuxtLink> |
+    <NuxtLink to="/login" v-if="!$auth.loggedIn.value">Login</NuxtLink>
+    <NuxtLink to="/profile" v-else>Profile</NuxtLink>
+  </nav>
+  <hr />
+</template>
+
+<style scoped>
+.router-link-exact-active {
+  color: royalblue;
+}
+</style>

components/Post.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useDeletePost, useUpdatePost } from '~/lib/hooks';
+
+const props = defineProps({
+    id: String,
+    title: String,
+    author: {
+        type: Object,
+        default: () => ({ email: '' }),
+    },
+    published: Boolean,
+});
+
+const updatePost = useUpdatePost();
+const deletePost = useDeletePost();
+
+const onTogglePublish = async () => {
+    try {
+        await updatePost.mutateAsync({
+            where: { id: props.id },
+            data: { published: !props.published },
+        });
+    } catch (err: any) {
+        alert(err.info?.message ?? err);
+    }
+};
+
+const onDelete = async () => {
+    try {
+        await deletePost.mutateAsync({ where: { id: props.id } });
+    } catch (err: any) {
+        alert(err.info?.message ?? err);
+    }
+};
+</script>
+
+<template>
+    <div class="flex justify-center">
+        <div class="min-w-80">
+            <span class="mr-4 text-lg font-semibold">{{ title }}</span
+            ><span>by {{ author.email }}</span>
+        </div>
+        <div class="ml-8 space-x-2">
+            <NButton @click="onTogglePublish">{{
+                published ? 'Unpublish' : 'Publish'
+            }}</NButton>
+            <NButton @click="onDelete">Delete</NButton>
+        </div>
+    </div>
+</template>

lib/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './user';
+export * from './post';
+export { VueQueryContextKey, provideHooksContext } from '@zenstackhq/tanstack-query/runtime/vue';