chore: utilize new supabase-js relation typing. (vercel#193)

* chore: utilize new supabase-js relation typing.

* chore: fully type props.

* chore: only gen public schema types.

* fix: types.

Author: thorwebdev

app/account/page.tsx

@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
-import { cookies } from 'next/headers'
-import { redirect } from 'next/navigation';
-import { revalidatePath } from 'next/cache'
-import Link from 'next/link';
+import ManageSubscriptionButton from './ManageSubscriptionButton';
 import {
   getSession,
   getUserDetails,
   getSubscription
 } from '@/app/supabase-server';
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
-import ManageSubscriptionButton from './ManageSubscriptionButton';
 import Button from '@/components/ui/Button';
 import { Database } from '@/types_db';
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { revalidatePath } from 'next/cache';
+import { cookies } from 'next/headers';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { ReactNode } from 'react';
 
 export default async function Account() {
   const session = await getSession();
@@ -27,35 +27,38 @@ export default async function Account() {
     subscription &&
     new Intl.NumberFormat('en-US', {
       style: 'currency',
-      currency: subscription?.prices?.currency,
+      currency: subscription?.prices?.currency!,
       minimumFractionDigits: 0
     }).format((subscription?.prices?.unit_amount || 0) / 100);
 
   const updateName = async (formData: FormData) => {
-    'use server'
+    'use server';
 
-    const newName = formData.get('name')
-    const supabase = createServerActionClient<Database>({ cookies })
+    const newName = formData.get('name') as string;
+    const supabase = createServerActionClient<Database>({ cookies });
     const session = await getSession();
     const user = session?.user;
-    const { error } = await supabase.from('users').update({ full_name: newName }).eq('id', user?.id)
+    const { error } = await supabase
+      .from('users')
+      .update({ full_name: newName })
+      .eq('id', user?.id);
     if (error) {
-      console.log(error)
+      console.log(error);
     }
-    revalidatePath('/account')
-  }
+    revalidatePath('/account');
+  };
 
   const updateEmail = async (formData: FormData) => {
-    'use server'
+    'use server';
 
-    const newEmail = formData.get('email')
-    const supabase = createServerActionClient<Database>({ cookies })
-    const { error } = await supabase.auth.updateUser({ email: newEmail })
+    const newEmail = formData.get('email') as string;
+    const supabase = createServerActionClient<Database>({ cookies });
+    const { error } = await supabase.auth.updateUser({ email: newEmail });
     if (error) {
-      console.log(error)
+      console.log(error);
     }
-    revalidatePath('/account')
-  }
+    revalidatePath('/account');
+  };
 
   return (
     <section className="mb-32 bg-black">
@@ -93,7 +96,12 @@ export default async function Account() {
           footer={
             <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
               <p className="pb-4 sm:pb-0">64 characters maximum</p>
-              <Button variant="slim" type="submit" form="nameForm" disabled={true}>
+              <Button
+                variant="slim"
+                type="submit"
+                form="nameForm"
+                disabled={true}
+              >
                 {/* WARNING - In Next.js 13.4.x server actions are in alpha and should not be used in production code! */}
                 Update Name
               </Button>
@@ -106,7 +114,7 @@ export default async function Account() {
                 type="text"
                 name="name"
                 className="w-1/2 p-3 rounded-md bg-zinc-800"
-                defaultValue={userDetails?.full_name}
+                defaultValue={userDetails?.full_name ?? ''}
                 placeholder="Your name"
                 maxLength={64}
               />
@@ -118,8 +126,15 @@ export default async function Account() {
           description="Please enter the email address you want to use to login."
           footer={
             <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
-              <p className="pb-4 sm:pb-0">We will email you to verify the change.</p>
-              <Button variant="slim" type="submit" form="emailForm" disabled={true}>
+              <p className="pb-4 sm:pb-0">
+                We will email you to verify the change.
+              </p>
+              <Button
+                variant="slim"
+                type="submit"
+                form="emailForm"
+                disabled={true}
+              >
                 {/* WARNING - In Next.js 13.4.x server actions are in alpha and should not be used in production code! */}
                 Update Email
               </Button>
@@ -132,7 +147,7 @@ export default async function Account() {
                 type="text"
                 name="email"
                 className="w-1/2 p-3 rounded-md bg-zinc-800"
-                defaultValue={user ? user.email : ""}
+                defaultValue={user ? user.email : ''}
                 placeholder="Your email"
                 maxLength={64}
               />

app/api/create-checkout-session/route.ts

@@ -12,10 +12,7 @@ export async function POST(req: Request) {
 
     try {
       // 2. Get the user from Supabase auth
-      const supabase = createRouteHandlerClient<Database>({
-        headers,
-        cookies
-      });
+      const supabase = createRouteHandlerClient<Database>({cookies});
       const {
         data: { user }
       } = await supabase.auth.getUser();

app/api/create-portal-link/route.ts

@@ -8,10 +8,7 @@ import { Database } from '@/types_db';
 export async function POST(req: Request) {
   if (req.method === 'POST') {
     try {
-      const supabase = createRouteHandlerClient<Database>({
-        headers,
-        cookies
-      });
+      const supabase = createRouteHandlerClient<Database>({cookies});
       const {
         data: { user }
       } = await supabase.auth.getUser();

app/layout.tsx

@@ -1,13 +1,10 @@
-import Navbar from '@/components/ui/Navbar';
-import Footer from '@/components/ui/Footer';
 import SupabaseProvider from './supabase-provider';
-
-import { PageMeta } from '../types';
-
+import Footer from '@/components/ui/Footer';
+import Navbar from '@/components/ui/Navbar';
 import 'styles/main.css';
 import 'styles/chrome-bug.css';
 
-const meta: PageMeta = {
+const meta = {
   title: 'Next.js Subscription Starter',
   description: 'Brought to you by Vercel, Stripe, and Supabase.',
   cardImage: '/og.png',

app/supabase-server.ts

@@ -1,9 +1,6 @@
-import { cookies } from 'next/headers';
-import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
-
-import { Subscription, UserDetails } from '@/types';
 import { Database } from '@/types_db';
-import { ProductWithPrice } from 'types';
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
 
 export const createServerSupabaseClient = () =>
   createServerComponentClient<Database>({ cookies });
@@ -28,7 +25,7 @@ export async function getUserDetails() {
       .from('users')
       .select('*')
       .single();
-    return userDetails as unknown as UserDetails;
+    return userDetails;
   } catch (error) {
     console.error('Error:', error);
     return null;
@@ -42,17 +39,16 @@ export async function getSubscription() {
       .from('subscriptions')
       .select('*, prices(*, products(*))')
       .in('status', ['trialing', 'active'])
-      .single();
-    return subscription as Subscription;
+      .single()
+      .throwOnError();
+    return subscription;
   } catch (error) {
     console.error('Error:', error);
     return null;
   }
 }
 
-export const getActiveProductsWithPrices = async (): Promise<
-  ProductWithPrice[]
-> => {
+export const getActiveProductsWithPrices = async () => {
   const supabase = createServerSupabaseClient();
   const { data, error } = await supabase
     .from('products')
@@ -65,6 +61,5 @@ export const getActiveProductsWithPrices = async (): Promise<
   if (error) {
     console.log(error.message);
   }
-  // TODO: improve the typing here.
-  return (data as any) || [];
+  return data ?? [];
 };

components/Pricing.tsx

@@ -1,20 +1,32 @@
 'use client';
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import cn from 'classnames';
-
 import Button from '@/components/ui/Button';
+import { Database } from '@/types_db';
 import { postData } from '@/utils/helpers';
 import { getStripe } from '@/utils/stripe-client';
+import { Session, User } from '@supabase/supabase-js';
+import cn from 'classnames';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
-import { Price, ProductWithPrice } from 'types';
+type Subscription = Database['public']['Tables']['subscriptions']['Row'];
+type Product = Database['public']['Tables']['products']['Row'];
+type Price = Database['public']['Tables']['prices']['Row'];
+interface ProductWithPrices extends Product {
+  prices: Price[];
+}
+interface PriceWithProduct extends Price {
+  products: Product | null;
+}
+interface SubscriptionWithProduct extends Subscription {
+  prices: PriceWithProduct | null;
+}
 
 interface Props {
-  session: any;
-  user: any;
-  products: ProductWithPrice[];
-  subscription: any;
+  session: Session | null;
+  user: User | null | undefined;
+  products: ProductWithPrices[];
+  subscription: SubscriptionWithProduct | null;
 }
 
 type BillingInterval = 'lifetime' | 'year' | 'month';
@@ -42,6 +54,9 @@ export default function Pricing({
     if (!user) {
       return router.push('/signin');
     }
+    if (price.product_id === subscription?.prices?.products?.id) {
+      return router.push('/account');
+    }
     try {
       const { sessionId } = await postData({
         url: '/api/create-checkout-session',
@@ -104,7 +119,7 @@ export default function Pricing({
                   price.unit_amount &&
                   new Intl.NumberFormat('en-US', {
                     style: 'currency',
-                    currency: price.currency,
+                    currency: price.currency!,
                     minimumFractionDigits: 0
                   }).format(price.unit_amount / 100);
 
@@ -185,19 +200,6 @@ export default function Pricing({
                 Yearly billing
               </button>
             )}
-            {intervals.includes('lifetime') && (
-              <button
-                onClick={() => setBillingInterval('lifetime')}
-                type="button"
-                className={`${
-                  billingInterval === 'lifetime'
-                    ? 'relative w-1/2 bg-zinc-700 border-zinc-800 shadow-sm text-white'
-                    : 'ml-0.5 relative w-1/2 border border-transparent text-zinc-400'
-                } rounded-md m-1 py-2 text-sm font-medium whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-50 focus:z-10 sm:w-auto sm:px-8`}
-              >
-                One-time billing
-              </button>
-            )}
           </div>
         </div>
         <div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-3">
@@ -208,7 +210,7 @@ export default function Pricing({
             if (!price) return null;
             const priceString = new Intl.NumberFormat('en-US', {
               style: 'currency',
-              currency: price.currency,
+              currency: price.currency!,
               minimumFractionDigits: 0
             }).format((price?.unit_amount || 0) / 100);
             return (

package.json

@@ -15,7 +15,7 @@
     "@supabase/auth-helpers-nextjs": "^0.7.0",
     "@supabase/auth-ui-react": "^0.4.2",
     "@supabase/auth-ui-shared": "^0.1.6",
-    "@supabase/supabase-js": "^2.22.0",
+    "@supabase/supabase-js": "^2.23.0",
     "classnames": "^2.3.2",
     "next": "13.4.3",
     "react": "^18.2.0",

supabase/config.toml

@@ -61,21 +61,22 @@ enable_confirmations = false
 # Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
 # `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
 # `twitter`, `slack`, `spotify`, `workos`, `zoom`.
-[auth.external.twitter]
+[auth.external.apple]
 enabled = false
 client_id = ""
 secret = ""
 # Overrides the default auth redirectUrl.
-redirect_uri = "http://localhost:54321/auth/v1/callback"
-# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
-# or any other third-party OIDC providers.
-url = ""
-[auth.external.github]
-enabled = true
-client_id = ""
-secret = ""
-# Overrides the default auth redirectUrl.
-redirect_uri = "http://localhost:54321/auth/v1/callback"
+redirect_uri = ""
 # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
 # or any other third-party OIDC providers.
 url = ""
+
+[analytics]
+enabled = false
+port = 54327
+vector_port = 54328
+# Setup BigQuery project to enable log viewer on local development stack.
+# See: https://supabase.com/docs/guides/getting-started/local-development#enabling-local-logging
+gcp_project_id = ""
+gcp_project_number = ""
+gcp_jwt_path = "supabase/gcloud.json"