configure supabase to use cookies

Author: KolbySisk

README.md

@@ -156,6 +156,16 @@ There are many auth providers you can choose from. [See the Supabase docs](https
 
 The file structure uses the group by `feature` concept. This is where you will colocate code related to a specific feature, with the exception of UI code. Typically you want to keep your UI code in the `app` dir, with the exception of reusable components. Most of the time reusable components will be agnostic to a feature and should live in the `components` dir. The `components/ui` dir is where `shadcn/ui` components are generated to.
 
+### Going live
+
+Follow these steps when you're ready to go live:
+
+- [ ] Activate your Stripe account and set the dashboard to live mode
+- [ ] Repeat the steps above to create a Stripe webhook in live mode, this time using your live url
+- [ ] Update Vercel env variables with your live Stripe pk, sk, and whsec
+- [ ] After Vercel has redeployed with your new env variables, run the fixture command using your Stripe sk
+- [ ] [Configure Supabase SMTP](https://supabase.com/docs/guides/auth/auth-smtp). I recommend using Resend, it's super easy to add with [the Resend integration](https://supabase.com/partners/integrations/resend)
+
 ---
 
 ## Support

package-lock.json

@@ -23,7 +23,7 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",
     "@stripe/stripe-js": "2.2.0",
-    "@supabase/auth-helpers-nextjs": "0.8.7",
+    "@supabase/ssr": "0.1.0",
     "@supabase/supabase-js": "2.39.0",
     "@vercel/analytics": "1.1.1",
     "class-variance-authority": "0.7.0",

package.json

@@ -0,0 +1,55 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { createSupabaseServerClient } from '@/libs/supabase/supabase-server-client';
+import { ActionResponse } from '@/types/action-response';
+import { getURL } from '@/utils/get-url';
+
+export async function signInWithOAuth(provider: 'github' | 'google'): Promise<ActionResponse> {
+  const supabase = createSupabaseServerClient();
+
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider,
+    options: {
+      redirectTo: getURL('/auth/callback'),
+    },
+  });
+
+  if (error) {
+    console.error(error);
+    return { data: null, error: error };
+  }
+
+  return redirect(data.url);
+}
+
+export async function signInWithEmail(email: string): Promise<ActionResponse> {
+  const supabase = createSupabaseServerClient();
+
+  const { error } = await supabase.auth.signInWithOtp({
+    email,
+    options: {
+      emailRedirectTo: getURL('/auth/callback'),
+    },
+  });
+
+  if (error) {
+    console.error(error);
+    return { data: null, error: error };
+  }
+
+  return { data: null, error: null };
+}
+
+export async function signOut(): Promise<ActionResponse> {
+  const supabase = createSupabaseServerClient();
+  const { error } = await supabase.auth.signOut();
+
+  if (error) {
+    console.error(error);
+    return { data: null, error: error };
+  }
+
+  return { data: null, error: null };
+}

src/app/(auth)/auth-actions.ts

@@ -9,72 +9,58 @@ import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { Input } from '@/components/ui/input';
 import { toast } from '@/components/ui/use-toast';
-import { useSupabase } from '@/libs/supabase/supabase-provider';
-import { getURL } from '@/utils/get-url';
+import { ActionResponse } from '@/types/action-response';
 
 const titleMap = {
   login: 'Login to UPDATE_THIS_WITH_YOUR_APP_DISPLAY_NAME',
   signup: 'Join UPDATE_THIS_WITH_YOUR_APP_DISPLAY_NAME and start generating banners for free',
 } as const;
 
-const siteUrl = getURL();
-
-export function AuthUI({ mode }: { mode: 'login' | 'signup' }) {
-  const { supabase } = useSupabase();
+export function AuthUI({
+  mode,
+  signInWithOAuth,
+  signInWithEmail,
+}: {
+  mode: 'login' | 'signup';
+  signInWithOAuth: (provider: 'github' | 'google') => Promise<ActionResponse>;
+  signInWithEmail: (email: string) => Promise<ActionResponse>;
+}) {
   const [pending, setPending] = useState(false);
   const [emailFormOpen, setEmailFormOpen] = useState(false);
 
-  async function signInWithOAuth(provider: 'github' | 'google') {
+  async function handleEmailSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
     setPending(true);
-    const { error } = await supabase.auth.signInWithOAuth({
-      provider,
-      options: {
-        redirectTo: `${siteUrl}/auth/callback`,
-      },
-    });
-    if (error) {
-      toast({
-        variant: 'destructive',
-        description: 'An error occurred while authenticating. Please try again.',
-      });
-      console.error(error);
-    }
-  }
+    const form = event.target as HTMLFormElement;
+    const email = form['email'].value;
+    const response = await signInWithEmail(email);
 
-  async function signInWithEmail(email: string) {
-    setPending(true);
-    const { error } = await supabase.auth.signInWithOtp({
-      email,
-      options: {
-        emailRedirectTo: `${siteUrl}/auth/callback`,
-      },
-    });
-    if (error) {
+    if (response?.error) {
       toast({
         variant: 'destructive',
         description: 'An error occurred while authenticating. Please try again.',
       });
-      console.error(error);
     } else {
       toast({
         description: `To continue, click the link in the email sent to: ${email}`,
       });
     }
-  }
 
-  function handleEmailSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setPending(true);
-    const form = event.target as HTMLFormElement;
-    const email = form['email'].value;
-    signInWithEmail(email);
     form.reset();
     setPending(false);
   }
 
-  function handleOAuthClick(provider: 'google' | 'github') {
+  async function handleOAuthClick(provider: 'google' | 'github') {
     setPending(true);
-    signInWithOAuth(provider);
+    const response = await signInWithOAuth(provider);
+
+    if (response?.error) {
+      toast({
+        variant: 'destructive',
+        description: 'An error occurred while authenticating. Please try again.',
+      });
+      setPending(false);
+    }
   }
 
   return (

src/app/(auth)/auth-ui.tsx

@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation';
 import { getSession } from '@/features/account/controllers/get-session';
 import { getSubscription } from '@/features/account/controllers/get-subscription';
 
+import { signInWithEmail, signInWithOAuth } from '../auth-actions';
 import { AuthUI } from '../auth-ui';
 
 export default async function LoginPage() {
@@ -19,7 +20,7 @@ export default async function LoginPage() {
 
   return (
     <section className='py-xl m-auto flex h-full max-w-lg items-center'>
-      <AuthUI mode='login' />
+      <AuthUI mode='login' signInWithOAuth={signInWithOAuth} signInWithEmail={signInWithEmail} />
     </section>
   );
 }

src/app/(auth)/login/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation';
 import { getSession } from '@/features/account/controllers/get-session';
 import { getSubscription } from '@/features/account/controllers/get-subscription';
 
+import { signInWithEmail, signInWithOAuth } from '../auth-actions';
 import { AuthUI } from '../auth-ui';
 
 export default async function SignUp() {
@@ -19,7 +20,7 @@ export default async function SignUp() {
 
   return (
     <section className='py-xl m-auto flex h-full max-w-lg items-center'>
-      <AuthUI mode='signup' />
+      <AuthUI mode='signup' signInWithOAuth={signInWithOAuth} signInWithEmail={signInWithEmail} />
     </section>
   );
 }

src/app/(auth)/signup/page.tsx

@@ -6,7 +6,6 @@ import { IoLogoFacebook, IoLogoInstagram, IoLogoTwitter } from 'react-icons/io5'
 
 import { Logo } from '@/components/logo';
 import { Toaster } from '@/components/ui/toaster';
-import { SupabaseProvider } from '@/libs/supabase/supabase-provider';
 import { cn } from '@/utils/cn';
 import { Analytics } from '@vercel/analytics/react';
 
@@ -36,15 +35,13 @@ export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang='en'>
       <body className={cn('font-sans antialiased', montserrat.variable, montserratAlternates.variable)}>
-        <SupabaseProvider>
-          <div className='m-auto flex h-full max-w-[1440px] flex-col px-4'>
-            <AppBar />
-            <main className='relative flex-1'>
-              <div className='relative h-full'>{children}</div>
-            </main>
-            <Footer />
-          </div>
-        </SupabaseProvider>
+        <div className='m-auto flex h-full max-w-[1440px] flex-col px-4'>
+          <AppBar />
+          <main className='relative flex-1'>
+            <div className='relative h-full'>{children}</div>
+          </main>
+          <Footer />
+        </div>
         <Toaster />
         <Analytics />
       </body>
@@ -111,7 +108,9 @@ function Footer() {
         </div>
       </div>
       <div className='border-t border-zinc-800 py-6 text-center'>
-        <span className='text-neutral4 text-xs'>Copyright {new Date().getFullYear()} © UPDATE_THIS_WITH_YOUR_APP_DISPLAY_NAME</span>
+        <span className='text-neutral4 text-xs'>
+          Copyright {new Date().getFullYear()} © UPDATE_THIS_WITH_YOUR_APP_DISPLAY_NAME
+        </span>
       </div>
     </footer>
   );

src/app/layout.tsx

@@ -7,13 +7,15 @@ import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTrigger } from '@/components/ui/sheet';
 import { getSession } from '@/features/account/controllers/get-session';
 
+import { signOut } from './(auth)/auth-actions';
+
 export async function Navigation() {
   const session = await getSession();
 
   return (
     <div className='relative flex items-center gap-6'>
       {session ? (
-        <AccountMenu />
+        <AccountMenu signOut={signOut} />
       ) : (
         <>
           <Button variant='sexy' className='hidden flex-shrink-0 lg:flex' asChild>