Signup flow + switch to serverSupabaseUser in context (fixes token refresh issue)+ lib upgrades for nuxt/supabase and nuxt/trpc

pages/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   const user = useSupabaseUser()
-  const supabase = useSupabaseAuthClient();
   watchEffect(() => {
     if (user.value) {
       navigateTo('/dashboard', {replace: true})
@@ -10,6 +9,6 @@
 <template>
   <div>
     <h3>Index</h3>
-    <button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Connect with Google</button>
+    Nuxt 3 (SAAS) Boilerplate is very nice, why don't you <NuxtLink to="/signup">Get Started</NuxtLink>
   </div>
 </template>

pages/pricing.vue

@@ -9,25 +9,42 @@
 <template>
   <div>
     <h3>Pricing</h3>
+    <p>Current Plan: {{ activeMembership?.account.plan_name }}</p>
     <div>
       <label for="submit">Free Trial (1 Month)</label>
-      <NuxtLink to="/dashboard">Continue to Dashboard</NuxtLink>
+      <ul>
+        <li>10 Notes</li>
+        <li>Single User</li>
+      </ul>
+      <NuxtLink v-if="activeMembership && (activeMembership?.account.plan_name === 'Free Trial')" to="/dashboard">&nbsp;Continue to Dashboard</NuxtLink>
     </div>
 
     <form action="/create-checkout-session" method="POST">
       <label for="submit">Individual Plan, Normal Price</label>
+      <ul>
+        <li>100 Notes</li>
+        <li>Single User</li>
+      </ul>
+
       <input type="hidden" name="price_id" value="price_1MpOiwJfLn4RhYiLqfy6U8ZR" />
       <input type="hidden" name="account_id" :value="activeMembership?.account_id" />
       
-      <button type="submit" :disabled="!activeMembership || (activeMembership.access !== ACCOUNT_ACCESS.OWNER && activeMembership.access !== ACCOUNT_ACCESS.ADMIN)">Checkout</button>
+      <span v-if="!activeMembership">&nbsp;<NuxtLink to="/signup">Sign Up</NuxtLink>&nbsp;</span>
+      <button type="submit" v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access !== ACCOUNT_ACCESS.ADMIN) && (activeMembership?.account.plan_name !== 'Individual Plan')">Checkout</button>
     </form>
 
     <form action="/create-checkout-session" method="POST">
       <label for="submit">Team Plan, Normal Price</label>
+      <ul>
+        <li>200 Notes</li>
+        <li>Up to 10 Team Members</li>
+      </ul>
+
       <input type="hidden" name="price_id" value="price_1MpOjtJfLn4RhYiLsjzAso90" />
       <input type="hidden" name="account_id" :value="activeMembership?.account_id" />
 
-      <button type="submit" :disabled="!activeMembership || (activeMembership.access !== ACCOUNT_ACCESS.OWNER && activeMembership.access !== ACCOUNT_ACCESS.ADMIN)">Checkout</button>
+      <span v-if="!activeMembership">&nbsp;<NuxtLink to="/signup">Sign Up</NuxtLink>&nbsp;</span>
+      <button type="submit" v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN) && (activeMembership?.account.plan_name !== 'Team Plan')">Checkout</button>
     </form>
   </div>
 </template>

pages/signin.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  const user = useSupabaseUser()
+  const supabase = useSupabaseAuthClient();
+
+  const loading = ref(false)
+  const email = ref('')
+
+  const handleOtpLogin = async () => {
+    try {
+      loading.value = true
+      const { error } = await supabase.auth.signInWithOtp({ email: email.value })
+      if (error) throw error
+      alert('Check your email for the login link!')
+    } catch (error) {
+      alert(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watchEffect(() => {
+    if (user.value) {
+      navigateTo('/dashboard', {replace: true})
+    }
+  })  
+</script>
+<template>
+  <div>
+    <h3>Sign In</h3>
+    <form @submit.prevent="handleOtpLogin">
+      <label for="email">Email:</label>
+      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
+      <p>By signing in, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
+
+      <button type="submit" :disabled="loading">Sign In using Magic Link</button>
+    </form>
+
+    <p>or sign in with</p>
+
+    <button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button>
+  </div>
+</template>

pages/signup.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  const user = useSupabaseUser()
+  const supabase = useSupabaseAuthClient();
+
+  const loading = ref(false)
+  const email = ref('')
+
+  const handleOtpLogin = async () => {
+    try {
+      loading.value = true
+      const { error } = await supabase.auth.signInWithOtp({ email: email.value })
+      if (error) throw error
+      alert('Check your email for the login link!')
+    } catch (error) {
+      alert(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watchEffect(() => {
+    if (user.value) {
+      navigateTo('/dashboard', {replace: true})
+    }
+  })  
+</script>
+<template>
+  <div>
+    <h3>Sign Up</h3>
+    <form @submit.prevent="handleOtpLogin">
+      <label for="email">Email:</label>
+      <input class="inputField" type="email" id="email" placeholder="Your email" v-model="email" />
+      <p>By proceeding, I agree to the <NuxtLink to="/privacy">Privacy Statement</NuxtLink> and <NuxtLink to="/terms">Terms of Service</NuxtLink>.</p>
+      
+      <button type="submit" :disabled="loading">Sign Up using Magic Link</button>
+    </form>
+
+    <p>or sign up with</p>
+
+    <button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Google</button>
+  </div>
+</template>

pages/success.vue

@@ -18,6 +18,6 @@ try{
       <span v-if="!customer.deleted">We appreciate your business {{customer.name}}!</span>
       <span v-if="customer.deleted">It appears your stripe customer information has been deleted!</span>
     </p>
-    <p><NuxtLink to="/dashboard">To Your Dashboard</NuxtLink></p>
+    <p>Checkout our reasonable <NuxtLink to="/pricing">Pricing</NuxtLink></p>
   </div>
 </template>