feat: added signin/signup components, fixed env vars, added supabase/…

…init.ts, moved supabase/ into src/supabase/

.env

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=https://qgaehogepxdhqyrilxlt.supabase.co
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFnYWVob2dlcHhkaHF5cmlseGx0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTY1MDYyNTMsImV4cCI6MjAxMjA4MjI1M30.Hzmm7RtxkctfV2BAYAjDnwGtg9VSZS_CN5qbmmeblzI

.gitignore

@@ -1,4 +1,4 @@
-.env
+.env.local
 
 # Logs
 logs

package.json

@@ -14,6 +14,7 @@
     "format": "prettier --write src/ e2e/ supabase/"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.38.4",
     "pinia": "^2.1.7",
     "supabase": "^1.112.0",
     "vue": "^3.3.4",

src/components/MenuBar.vue

@@ -13,5 +13,8 @@ import { RouterLink } from "vue-router";
     <div class="rounded border px-2 py-1">
       <RouterLink to="/settings">Settings</RouterLink>
     </div>
+    <div class="rounded border px-2 py-1">
+      <RouterLink to="/account">Account</RouterLink>
+    </div>
   </nav>
 </template>

src/components/SignIn.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { supabase } from "@/supabase/init.ts"; // Import your Supabase instance
+
+const email = ref("");
+const password = ref("");
+
+const signIn = async () => {
+  const { user, error } = await supabase.auth.signIn({
+    email: email.value,
+    password: password.value,
+  });
+  if (error) console.error("Error signing in:", error);
+  else console.log("User signed in:", user);
+};
+</script>
+
+<template>
+  <div class="container mx-auto max-w-md">
+    <div class="flex flex-col items-center justify-between">
+      <h1 class="text-2xl font-bold">Sign In</h1>
+      <input
+        v-model="email"
+        type="email"
+        placeholder="Email"
+        class="rounded border m-2 p-2"
+      />
+      <input
+        v-model="password"
+        type="password"
+        placeholder="Password"
+        class="rounded border m-2 p-2"
+      />
+      <button @click="signIn" class="rounded border px-2 py-1">Sign In</button>
+    </div>
+  </div>
+</template>

src/components/SignUp.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { supabase } from "@/supabase/init"; // Import your Supabase instance
+
+const email = ref("");
+const password = ref("");
+
+const signUp = async () => {
+  const { user, error } = await supabase.auth.signUp({
+    email: email.value,
+    password: password.value,
+  });
+  if (error) console.error("Error signing up:", error);
+  else console.log("User signed up:", user);
+};
+</script>
+
+<template>
+  <div class="container max-w-md">
+    <div class="flex flex-col items-center justify-between">
+      <h1 class="text-2xl font-bold">Sign Up</h1>
+      <input
+        v-model="email"
+        type="email"
+        placeholder="Email"
+        class="rounded border m-2 p-2"
+      />
+      <input
+        v-model="password"
+        type="password"
+        placeholder="Password"
+        class="rounded border m-2 p-2"
+      />
+      <button @click="signUp" class="border rounded px-2 py-1">Sign Up</button>
+      <hr />
+      <router-link to="/forgot-password" class="opacity-30"
+        >Forgot Password</router-link
+      >
+    </div>
+  </div>
+</template>

src/supabase/functions/stripeWebhook/index.ts

@@ -0,0 +1,43 @@
+export default async (req, res) => {
+  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+  const { createClient } = require("@supabase/supabase-js");
+  const supabase = createClient(
+    process.env.SUPABASE_URL,
+    process.env.SUPABASE_SERVICE_ROLE_KEY,
+  );
+
+  const sig = req.headers["stripe-signature"];
+  let event;
+
+  try {
+    event = stripe.webhooks.constructEvent(
+      req.rawBody,
+      sig,
+      process.env.STRIPE_WEBHOOK_SECRET,
+    );
+  } catch (err) {
+    // Invalid signature, return error response
+    return res.status(400).send(`Webhook Error: ${err.message}`);
+  }
+
+  // Handle the event
+  if (event.type === "invoice.payment_succeeded") {
+    // Update subscription status in your database
+    const invoice = event.data.object;
+    const { error } = await supabase
+      .from("subscriptions")
+      .update({ status: "active" })
+      .match({ stripe_subscription_id: invoice.subscription });
+
+    if (error) {
+      console.error("Error updating subscription:", error);
+      return res.status(500).send("Internal Server Error");
+    }
+
+    // Successful response
+    return res.status(200).send("Webhook received and processed successfully");
+  } else {
+    // Unexpected event type
+    return res.status(400).send(`Unhandled event type ${event.type}`);
+  }
+};

src/supabase/init.ts

@@ -0,0 +1,7 @@
+// initialize Supabase client
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);

src/views/HomeView.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import TheWelcome from "../components/TheWelcome.vue";
+import SignIn from "../components/SignIn.vue";
+import SignUp from "../components/SignUp.vue";
 </script>
 
 <template>
   <main>
     <TheWelcome />
+    <div class="flex">
+      <SignIn />
+      <SignUp />
+    </div>
   </main>
 </template>