Merge remote-tracking branch 'jeremy-clerk/jeremy-clerk/troubleshooting'

Author: cvs0

.env.example

@@ -0,0 +1,10 @@
+# Recommended to have an example env file for other users know what environment variables need to be set.
+
+# Get your keys from the Clerk dashboard at https://dashboard.clerk.com
+CLERK_SECRET_KEY=sk_
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+
+# If using a local docker container (local-database.yml)
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/lockscript?schema=public

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#Intellij Editors
+.idea

README.md

@@ -10,6 +10,47 @@ LockScript Vault is an open-source secure vault for passwords, cards, notes, and
 - Prisma
 - Zod
 
+## Getting Started
+
+Clone the repository
+```bash
+git clone [email protected]:Lockscript/Lockscript-Vault
+```
+```bash
+cd Lockscript-Vault
+```
+
+Repo is using yarn as a package manager. 
+
+[How To Install Yarn](https://classic.yarnpkg.com/lang/en/docs/install)
+
+Install dependencies
+```bash
+yarn install
+```
+
+### Setup local database (if required)
+
+Start Docker container (requires [Docker](https://docs.docker.com/engine/install/))
+
+```bash
+docker compose -f ./local-database.yml up -d
+```
+Generate database client
+
+```bash
+yarn run generate
+```
+```bash
+yarn run push
+```
+
+### Start the dev server
+```bash
+yarn run dev
+```
+
+
 ## How to contribute
 
 We accept contributions from the community, but you must follow some rules:

local-database.yml

@@ -0,0 +1,17 @@
+# Use postgres/example user/password credentials
+version: '3.1'
+services:
+  db:
+    container_name: lockscript-postgres
+    image: postgres
+    restart: always
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_PASSWORD: postgres
+    volumes:
+      - postgres:/var/lib/postgres/data
+volumes:
+    postgres:
+      external: false
+

package.json

@@ -12,8 +12,6 @@
     "find:unused": "next-unused"
   },
   "dependencies": {
-    "@clerk/backend": "^1.23.11",
-    "@clerk/clerk-sdk-node": "^5.1.6",
     "@clerk/nextjs": "^6.11.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",

src/app/(main)/page.tsx

@@ -1,32 +1,19 @@
 import {VaultPage} from "@/components/vault/vault-page";
-import prismadb from "@/lib/prismadb";
-import {auth} from "@clerk/nextjs/server";
-import {instantiateVault} from "../actions";
+import {auth, currentUser} from "@clerk/nextjs/server";
+import {getPasswords, instantiateVault} from "../actions";
 
-export const dynamic = "force-dynamic";
-
-const Page = async () => {
+export default async function Page(){
   const { userId, redirectToSignIn } = await auth();
 
   if (!userId) return redirectToSignIn();
 
-  const user = await prismadb.user.findUnique({
-    where: {
-      id: userId,
-    },
-    include: {
-      passwordItems: true,
-      cardItems: true,
-      pinItems: true,
-      noteItems: true,
-    },
-  });
+  const user = await getPasswords(userId)
 
   if (!user) {
-    instantiateVault();
+    const clerkUser = await currentUser()
+    if(!clerkUser) return redirectToSignIn()
+   await instantiateVault(clerkUser.id, clerkUser.username as string);
   }
 
   return <VaultPage user={user} />;
 };
-
-export default Page;

src/app/actions.ts

@@ -94,46 +94,29 @@ export async function createPasswordItem(
     throw new Error("Not authenticated");
   }
 
-  const user = await prismadb.user.findUnique({
-    where: {
-      id: userId,
-    },
-    include: {
-      passwordItems: true,
-    },
-  });
-
-  if (!user) {
-    throw new Error("User not found");
-  }
-
   const newPasswordItem = await prismadb.passwordItem.create({
     data: {
       username,
       website,
       password,
       updatedAt: new Date().toISOString(),
       createdAt: new Date().toISOString(),
-      userId: user.id,
+      user: {
+        connect: {
+          id: userId
+        }
+      }
     },
   });
 
   return newPasswordItem;
 }
 
-export async function instantiateVault() {
-  const { userId } = await auth()
-
-  if (!userId) {
-    throw new Error("Not authenticated");
-  }
-
-  const user = await currentUser()
-
+export async function instantiateVault(userId: string, username: string) {
   const vault = await prismadb.user.create({
     data: {
       id: userId,
-      username: user?.username!,
+      username: username,
     },
     include: {
       passwordItems: true,
@@ -145,3 +128,17 @@ export async function instantiateVault() {
 
   return vault;
 }
+
+export async function getPasswords(userId: string) {
+  return prismadb.user.findUnique({
+    where: {
+      id: userId,
+    },
+    include: {
+      passwordItems: true,
+      cardItems: true,
+      pinItems: true,
+      noteItems: true,
+    },
+  });
+}

src/components/vault/dialogs/create-password-dialog.tsx

@@ -26,10 +26,10 @@ const initialPasswordItemState = {
 
 export const CreatePasswordDialog = ({
   open,
-  onClose,
+    onClose,
 }: {
   open: boolean;
-  onClose: () => void;
+  onClose: ()=> void
 }) => {
   const [passwordItem, setPasswordItem] = useState(initialPasswordItemState);
   const [loading, setLoading] = useState(false);
@@ -156,6 +156,7 @@ export const CreatePasswordDialog = ({
               value={passwordItem.password}
               onChange={handleChange}
               type="password"
+              name="password"
               maxLength={128}
               name="password"
             />

src/components/vault/vault-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {deletePasswordItem} from "@/app/actions";
+import {deletePasswordItem, getPasswords} from "@/app/actions";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 import {ScrollArea} from "@/components/ui/scroll-area";
@@ -63,13 +63,14 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredEntries, setFilteredEntries] = useState<PasswordEntry[]>([]);
   const [passwords, setPasswords] = useState<PasswordEntry[]>([]);
+  const [passwordItems, setPasswordItems] = useState(user?.passwordItems)
 
   useEffect(() => {
     if (!clerkUser) return;
 
-    if (!user?.passwordItems) return;
+    if (!user?.passwordItems || !passwordItems) return;
 
-    const decryptedPasswords = user.passwordItems
+    const decryptedPasswords = passwordItems
       .map((item) => ({
         id: item.id,
         name: decrypt(item.username, clerkUser),
@@ -85,7 +86,7 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
       );
 
     setPasswords(decryptedPasswords);
-  }, [user?.passwordItems, clerkUser]);
+  }, [user?.passwordItems, clerkUser, passwordItems]);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
@@ -211,8 +212,8 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
                           onClick={async () => {
                             try {
                               await deletePasswordItem(password.id);
-                              router.refresh();
-
+                              const updatedItems = await getPasswords(user?.id as string)
+                               setPasswordItems(updatedItems?.passwordItems);
                               if (selectedEntry?.id === password.id) {
                                 setSelectedEntry(null);
                               }
@@ -281,10 +282,11 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
       )}
       <CreatePasswordDialog
         open={isCreateDialogOpen}
-        onClose={() => {
+        onClose={async () => {
           setIsCreateDialogOpen(false);
-          router.refresh();
           setSelectedEntry(null);
+          const userWithPasswords = await getPasswords(user?.id as string)
+          setPasswordItems(userWithPasswords?.passwordItems)
         }}
       />
     </div>

src/utils/encryption.ts

@@ -1,11 +1,13 @@
 import CryptoJS from "crypto-js";
 
+
+// this can be reverse engineered - please use a randomly generated string that is saved securely somewhere else.
 const generateEncryptionPassword = (clerkUser: any) => {
   if (!clerkUser) return "";
-
   return `${clerkUser.id}-${clerkUser.createdAt}-${clerkUser.createdAt?.getTime()}-${clerkUser.id.charCodeAt(clerkUser.id.length - 1)}-${clerkUser.createdAt?.getDate()}-${clerkUser.id.charCodeAt(0)}-${clerkUser.createdAt?.getUTCFullYear()}-${clerkUser.id.charCodeAt(1)}-${clerkUser.createdAt?.getUTCHours()}-${clerkUser.id.length}-${clerkUser.createdAt?.getUTCMinutes()}`;
 };
 
+// See above comment - the key should be stored securely and used on subsequent encryption calls
 export const encrypt = (data: string, clerkUser: any) => {
   const encryptionPassword = generateEncryptionPassword(clerkUser);
   return CryptoJS.AES.encrypt(data, encryptionPassword).toString();