diff --git a/package-lock.json b/package-lock.json
index 0f30f1b8481..8f7cf61213f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43397,6 +43397,8 @@
         "@sentry/nextjs": "^6.17.4",
         "@stripe/react-stripe-js": "^1.7.0",
         "@stripe/stripe-js": "^1.25.0",
+        "@supabase/auth-helpers-nextjs": "^0.5.6",
+        "@supabase/auth-helpers-react": "^0.3.1",
         "@supabase/react-data-grid": "^7.1.0-beta.7",
         "@supabase/shared-types": "^0.1.43",
         "@supabase/supabase-js": "^2.23.0",
diff --git a/studio/package.json b/studio/package.json
index 082dc8629f3..a00f3be6e84 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -29,6 +29,8 @@
     "@sentry/nextjs": "^6.17.4",
     "@stripe/react-stripe-js": "^1.7.0",
     "@stripe/stripe-js": "^1.25.0",
+    "@supabase/auth-helpers-nextjs": "^0.5.6",
+    "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/react-data-grid": "^7.1.0-beta.7",
     "@supabase/shared-types": "^0.1.43",
     "@supabase/supabase-js": "^2.23.0",
diff --git a/studio/pages/_app.tsx b/studio/pages/_app.tsx
index 415204b66ac..6051ab68387 100644
--- a/studio/pages/_app.tsx
+++ b/studio/pages/_app.tsx
@@ -28,7 +28,7 @@ import Head from 'next/head'
 
 import { AppPropsWithLayout } from 'types'
 import { ThemeProvider } from 'common'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Hydrate, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RootStore } from 'stores'
@@ -51,6 +51,9 @@ import useAutoAuthRedirect from 'hooks/misc/useAutoAuthRedirect'
 
 import { TooltipProvider } from '@radix-ui/react-tooltip'
 import Favicons from 'components/head/Favicons'
+import { IS_PLATFORM } from 'lib/constants'
+import { SessionContextProvider } from '@supabase/auth-helpers-react'
+import { createClient } from '@supabase/supabase-js'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -63,6 +66,16 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
   const queryClient = useRootQueryClient()
   const [rootStore] = useState(() => new RootStore())
 
+  // [Joshen] Some issues with using createBrowserSupabaseClient
+  const [supabase] = useState(() =>
+    IS_PLATFORM
+      ? createClient(
+          process.env.NEXT_PUBLIC_SUPABASE_URL as string,
+          process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
+        )
+      : undefined
+  )
+
   const getSavingState = () => rootStore.content.savingState
 
   // prompt the user if they try and leave with unsaved content store changes
@@ -98,11 +111,24 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
 
   const getLayout = Component.getLayout ?? ((page) => page)
 
+  const AuthContainer = useMemo(
+    () => (props: any) => {
+      return IS_PLATFORM ? (
+        <SessionContextProvider supabaseClient={supabase as any}>
+          <AuthProvider>{props.children}</AuthProvider>
+        </SessionContextProvider>
+      ) : (
+        <AuthProvider>{props.children}</AuthProvider>
+      )
+    },
+    [supabase]
+  )
+
   return (
     <QueryClientProvider client={queryClient}>
       <Hydrate state={pageProps.dehydratedState}>
         <StoreProvider rootStore={rootStore}>
-          <AuthProvider>
+          <AuthContainer>
             <ProfileProvider>
               <FlagProvider>
                 <Head>
@@ -130,7 +156,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                 <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
               </FlagProvider>
             </ProfileProvider>
-          </AuthProvider>
+          </AuthContainer>
         </StoreProvider>
       </Hydrate>
     </QueryClientProvider>