From 965665eb702f73771b34a98a62c6a62892619d38 Mon Sep 17 00:00:00 2001
From: hyochan <dooboolab@gmail.com>
Date: Thu, 19 Sep 2024 00:11:46 +0900
Subject: [PATCH] refactor: unify new supabase client in useSupabase

---
 app/(home)/(tabs)/index.tsx            |   8 +-
 app/(home)/onboarding.tsx              |  15 +-
 app/(home)/post/[id]/index.tsx         |  11 +-
 app/(home)/post/[id]/replies.tsx       |  24 +-
 app/(home)/post/[id]/update.tsx        |  50 ++-
 app/(home)/post/write.tsx              |  26 +-
 app/(home)/settings/block-users.tsx    |  29 +-
 app/(home)/settings/login-info.tsx     |   8 +-
 app/(home)/settings/profile-update.tsx | 587 +++++++++++++++++++++++++
 app/[displayName].tsx                  |  22 +-
 app/_layout.tsx                        |  18 +-
 assets/langs/en.json                   |   6 +-
 assets/langs/ko.json                   |   6 +-
 src/apis/blockQueries.ts               |  40 +-
 src/apis/followQueries.ts              |  20 +-
 src/apis/likeQueries.ts                |   4 +-
 src/apis/notifications.ts              |   8 +-
 src/apis/postQueries.ts                |  29 +-
 src/apis/profileQueries.ts             |  22 +-
 src/apis/pushTokenQueries.ts           |  14 +-
 src/apis/replyQueries.ts               |  17 +-
 src/apis/reportQueries.ts              |  10 +-
 src/hooks/useSupabase.tsx              |  61 +++
 src/providers/AppLogicProvider.tsx     |  19 +-
 src/supabase/index.ts                  |  58 +--
 25 files changed, 960 insertions(+), 152 deletions(-)
 create mode 100644 app/(home)/settings/profile-update.tsx
 create mode 100644 src/hooks/useSupabase.tsx

diff --git a/app/(home)/(tabs)/index.tsx b/app/(home)/(tabs)/index.tsx
index 26f42b9..559e42c 100644
--- a/app/(home)/(tabs)/index.tsx
+++ b/app/(home)/(tabs)/index.tsx
@@ -17,6 +17,7 @@ import {
 } from '../../../src/recoil/atoms';
 import ListEmptyItem from '../../../src/components/uis/ListEmptyItem';
 import ErrorBoundary from 'react-native-error-boundary';
+import useSupabase from '../../../src/hooks/useSupabase';
 
 const Container = styled.View`
   flex: 1;
@@ -25,6 +26,7 @@ const Container = styled.View`
 `;
 
 export default function Posts(): JSX.Element {
+  const {supabase} = useSupabase();
   const {push} = useRouter();
   const {authId, blockedUserIds} = useRecoilValue(authRecoilState);
   const [cursor, setCursor] = useState<string | undefined>(undefined);
@@ -34,13 +36,13 @@ export default function Posts(): JSX.Element {
 
   const fetcher = useCallback(
     (cursor: string | undefined) =>
-      fetchPostPagination({cursor, blockedUserIds}),
-    [blockedUserIds],
+      fetchPostPagination({cursor, blockedUserIds, supabase: supabase!}),
+    [blockedUserIds, supabase],
   );
 
   const {error, isValidating, mutate} = useSWR(
     ['posts', cursor],
-    () => fetchPostPagination({cursor, blockedUserIds}),
+    () => fetchPostPagination({cursor, blockedUserIds, supabase: supabase!}),
     {
       revalidateOnFocus: false,
       revalidateIfStale: false,
diff --git a/app/(home)/onboarding.tsx b/app/(home)/onboarding.tsx
index dde7689..516a3a9 100644
--- a/app/(home)/onboarding.tsx
+++ b/app/(home)/onboarding.tsx
@@ -31,6 +31,7 @@ import FallbackComponent from '../../src/components/uis/FallbackComponent';
 import {showAlert} from '../../src/utils/alert';
 import {RectButton} from 'react-native-gesture-handler';
 import ErrorBoundary from 'react-native-error-boundary';
+import useSupabase, { SupabaseClient } from '../../src/hooks/useSupabase';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -76,10 +77,13 @@ type FormData = yup.InferType<
   }
 >;
 
-const fetcher = async (authId: string | null) => {
+const fetcher = async (authId: string | null, supabase: SupabaseClient) => {
   if (!authId) return;
 
-  const {profile, userTags} = await fetchUserProfile(authId);
+  const {profile, userTags} = await fetchUserProfile({
+    authId,
+    supabase,
+  });
   return {profile, userTags};
 };
 
@@ -90,9 +94,10 @@ export default function Onboarding(): JSX.Element {
   const [tag, setTag] = useState('');
   const [tags, setTags] = useState<string[]>([]);
   const [profileImg, setProfileImg] = useState<string>();
+  const {supabase} = useSupabase();
 
   const {data, error} = useSwr(authId && `/profile/${authId}`, () =>
-    fetcher(authId),
+    fetcher(authId, supabase!),
   );
 
   const handleAddTag = () => {
@@ -112,7 +117,7 @@ export default function Onboarding(): JSX.Element {
   });
 
   const handleFinishOnboarding: SubmitHandler<FormData> = async (data) => {
-    if (!authId) return;
+    if (!authId || !supabase) return;
 
     let image: ImageInsertArgs | undefined = {};
 
@@ -124,6 +129,7 @@ export default function Onboarding(): JSX.Element {
         fileType: 'Image',
         bucket: 'images',
         destPath,
+        supabase,
       });
     }
 
@@ -137,6 +143,7 @@ export default function Onboarding(): JSX.Element {
         args: formDataWithTags,
         authId,
         tags: tags || [],
+        supabase,
       });
 
       if (updatedUser) {
diff --git a/app/(home)/post/[id]/index.tsx b/app/(home)/post/[id]/index.tsx
index 4a92b3f..1cbe069 100644
--- a/app/(home)/post/[id]/index.tsx
+++ b/app/(home)/post/[id]/index.tsx
@@ -31,6 +31,7 @@ import {
 import {RectButton} from 'react-native-gesture-handler';
 import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../../src/components/uis/FallbackComponent';
+import useSupabase from '../../../../src/hooks/useSupabase';
 
 const Container = styled.View`
   background-color: ${({theme}) => theme.bg.basic};
@@ -44,6 +45,7 @@ const Content = styled.View`
 `;
 
 export default function PostDetails(): JSX.Element {
+  const {supabase} = useSupabase();
   const {id} = useLocalSearchParams<{id: string}>();
   const {theme, snackbar} = useDooboo();
   const {bottom} = useSafeAreaInsets();
@@ -80,9 +82,9 @@ export default function PostDetails(): JSX.Element {
   }, [post, authId]);
 
   const handleDeletePost = useCallback(async () => {
-    if (!post) return;
+    if (!post || !supabase) return;
 
-    const result = await fetchDeletePost({id: post.id});
+    const result = await fetchDeletePost({id: post.id, supabase});
 
     if (result) {
       snackbar.open({text: t('common.deleteSuccess')});
@@ -95,7 +97,7 @@ export default function PostDetails(): JSX.Element {
       color: 'danger',
       text: t('common.unhandledError'),
     });
-  }, [back, post, snackbar, setPosts]);
+  }, [post, supabase, snackbar, setPosts, back]);
 
   const handlePressMore = useCallback(() => {
     if (authId === post?.user_id) {
@@ -140,7 +142,7 @@ export default function PostDetails(): JSX.Element {
   }, [post?.user.display_name, push]);
 
   const handleToggleLike = async () => {
-    if (!authId || !post) return;
+    if (!authId || !post || !supabase) return;
 
     const userLike = post.likes?.find((like) => like.user_id === authId);
 
@@ -155,6 +157,7 @@ export default function PostDetails(): JSX.Element {
     await toggleLike({
       userId: authId,
       postId: post.id,
+      supabase,
     });
 
     setPosts((prevPosts) =>
diff --git a/app/(home)/post/[id]/replies.tsx b/app/(home)/post/[id]/replies.tsx
index f8a351b..3a28254 100644
--- a/app/(home)/post/[id]/replies.tsx
+++ b/app/(home)/post/[id]/replies.tsx
@@ -11,7 +11,6 @@ import ReplyInput from '../../../../src/components/uis/ReplyInput';
 import {ImagePickerAsset} from 'expo-image-picker';
 import {
   getPublicUrlFromPath,
-  supabase,
   uploadFileToSupabase,
 } from '../../../../src/supabase';
 import {
@@ -25,6 +24,7 @@ import {ReplyWithJoins} from '../../../../src/types';
 import FallbackComponent from '../../../../src/components/uis/FallbackComponent';
 import {toggleLike} from '../../../../src/apis/likeQueries';
 import ErrorBoundary from 'react-native-error-boundary';
+import useSupabase from '../../../../src/hooks/useSupabase';
 
 export default function Replies({
   flashListRef,
@@ -36,6 +36,7 @@ export default function Replies({
   postId?: string;
   replyId?: string;
 }): JSX.Element {
+  const {supabase} = useSupabase();
   const {bottom} = useSafeAreaInsets();
   const {theme} = useDooboo();
   const {authId} = useRecoilValue(authRecoilState);
@@ -48,7 +49,12 @@ export default function Replies({
 
   const {error, isValidating, mutate} = useSWR<ReplyWithJoins[]>(
     ['replies', postId, cursor],
-    () => fetchReplyPagination({cursor, postId: postId as string}),
+    () =>
+      fetchReplyPagination({
+        cursor,
+        postId: postId as string,
+        supabase: supabase!,
+      }),
     {
       revalidateOnFocus: false,
       onSuccess: (data) => {
@@ -63,7 +69,7 @@ export default function Replies({
   );
 
   const handleCreateReply = async () => {
-    if (!authId || !postId) return;
+    if (!authId || !postId || !supabase) return;
 
     setIsCreateReplyInFlight(true);
 
@@ -77,12 +83,14 @@ export default function Replies({
           fileType: asset.type === 'video' ? 'Video' : 'Image',
           bucket: 'images',
           destPath,
+          supabase,
         });
       });
 
       const images = await Promise.all(imageUploadPromises);
 
       const newReply = await fetchCreateReply({
+        supabase,
         reply: {
           message: reply,
           user_id: authId,
@@ -93,7 +101,10 @@ export default function Replies({
           .map((el) => ({
             ...el,
             image_url: el?.image_url
-              ? getPublicUrlFromPath(el.image_url)
+              ? getPublicUrlFromPath({
+                  path: el.image_url,
+                  supabase,
+                })
               : undefined,
           })),
       });
@@ -126,7 +137,7 @@ export default function Replies({
   };
 
   const handleToggleLike = async (replyId: string) => {
-    if (!authId) return;
+    if (!authId || !supabase) return;
 
     const updatedReplies = replies.map((reply) => {
       if (reply.id === replyId) {
@@ -153,6 +164,7 @@ export default function Replies({
     await toggleLike({
       userId: authId,
       replyId,
+      supabase,
     });
 
     mutate();
@@ -162,7 +174,7 @@ export default function Replies({
     const updatedReplies = replies.filter((reply) => reply.id !== replyId);
     setReplies(updatedReplies);
 
-    await supabase
+    await supabase!
       .from('replies')
       .update({deleted_at: new Date().toISOString()})
       .eq('id', replyId);
diff --git a/app/(home)/post/[id]/update.tsx b/app/(home)/post/[id]/update.tsx
index bc89d5e..441f796 100644
--- a/app/(home)/post/[id]/update.tsx
+++ b/app/(home)/post/[id]/update.tsx
@@ -28,6 +28,7 @@ import {filterUploadableAssets} from '../../../../src/utils/common';
 import {RectButton} from 'react-native-gesture-handler';
 import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../../src/components/uis/FallbackComponent';
+import useSupabase from '../../../../src/hooks/useSupabase';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -49,6 +50,7 @@ type FormData = yup.InferType<typeof schema>;
 
 export default function PostUpdate(): JSX.Element {
   const {id} = useLocalSearchParams<{id: string}>();
+  const {supabase} = useSupabase();
   const {back} = useRouter();
   const {theme, snackbar} = useDooboo();
   const {authId} = useRecoilValue(authRecoilState);
@@ -68,28 +70,36 @@ export default function PostUpdate(): JSX.Element {
     data: post,
     error,
     isValidating,
-  } = useSWR(id ? `post-${id}` : null, () => fetchPostById(id || ''), {
-    onSuccess: (data) => {
-      if (data) {
-        reset({
-          title: data.title,
-          content: data.content,
-          url: data?.url || undefined,
-        });
-        setAssets(
-          (data.images || []).map((el) => ({
-            uri: el.image_url as string,
-            type: 'image',
-            height: el.height || 0,
-            width: el.width || 0,
-          })),
-        );
-      }
+  } = useSWR(
+    id ? `post-${id}` : null,
+    () =>
+      fetchPostById({
+        id: id || '',
+        supabase: supabase!,
+      }),
+    {
+      onSuccess: (data) => {
+        if (data) {
+          reset({
+            title: data.title,
+            content: data.content,
+            url: data?.url || undefined,
+          });
+          setAssets(
+            (data.images || []).map((el) => ({
+              uri: el.image_url as string,
+              type: 'image',
+              height: el.height || 0,
+              width: el.width || 0,
+            })),
+          );
+        }
+      },
     },
-  });
+  );
 
   const handleUpdatePost: SubmitHandler<FormData> = async (data) => {
-    if (!authId || !id) return;
+    if (!authId || !id || !supabase) return;
 
     try {
       const imageUploadPromises = filterUploadableAssets(assets).map(
@@ -102,6 +112,7 @@ export default function PostUpdate(): JSX.Element {
             fileType: asset.type === 'video' ? 'Video' : 'Image',
             bucket: 'images',
             destPath,
+            supabase,
           });
         },
       );
@@ -129,6 +140,7 @@ export default function PostUpdate(): JSX.Element {
             image_url: el?.image_url || undefined,
           })),
         imageUrlsToDelete: deleteImageUrls,
+        supabase,
       });
 
       setPosts((prevPosts) =>
diff --git a/app/(home)/post/write.tsx b/app/(home)/post/write.tsx
index 65daedb..8dbf374 100644
--- a/app/(home)/post/write.tsx
+++ b/app/(home)/post/write.tsx
@@ -21,6 +21,7 @@ import {MAX_IMAGES_UPLOAD_LENGTH} from '../../../src/utils/constants';
 import CustomScrollView from '../../../src/components/uis/CustomScrollView';
 import {uploadFileToSupabase} from '../../../src/supabase';
 import {RectButton} from 'react-native-gesture-handler';
+import useSupabase from '../../../src/hooks/useSupabase';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -41,6 +42,7 @@ const schema = yup.object().shape({
 type FormData = yup.InferType<typeof schema>;
 
 export default function PostWrite(): JSX.Element {
+  const {supabase} = useSupabase();
   const {back} = useRouter();
   const {theme, snackbar} = useDooboo();
   const {authId} = useRecoilValue(authRecoilState);
@@ -57,7 +59,7 @@ export default function PostWrite(): JSX.Element {
   });
 
   const handleWritePost: SubmitHandler<FormData> = async (data) => {
-    if (!authId) return;
+    if (!authId || !supabase) return;
 
     setIsCreatePostInFlight(true);
 
@@ -71,21 +73,25 @@ export default function PostWrite(): JSX.Element {
           fileType: asset.type === 'video' ? 'Video' : 'Image',
           bucket: 'images',
           destPath,
+          supabase,
         });
       });
 
       const images = await Promise.all(imageUploadPromises);
 
       const newPost = await fetchCreatePost({
-        title: data.title,
-        content: data.content,
-        user_id: authId,
-        images: images
-          .filter((el) => !!el)
-          .map((el) => ({
-            ...el,
-            image_url: el?.image_url || undefined,
-          })),
+        supabase,
+        post: {
+          title: data.title,
+          content: data.content,
+          user_id: authId,
+          images: images
+            .filter((el) => !!el)
+            .map((el) => ({
+              ...el,
+              image_url: el?.image_url || undefined,
+            })),
+        },
       });
 
       setPosts((prevPosts) => [newPost, ...prevPosts]);
diff --git a/app/(home)/settings/block-users.tsx b/app/(home)/settings/block-users.tsx
index 382ca4f..2913060 100644
--- a/app/(home)/settings/block-users.tsx
+++ b/app/(home)/settings/block-users.tsx
@@ -18,6 +18,7 @@ import {
 import {User} from '../../../src/types';
 import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../src/components/uis/FallbackComponent';
+import useSupabase from '../../../src/hooks/useSupabase';
 
 const Profile = styled.View`
   padding: 16px 16px 8px 16px;
@@ -82,10 +83,17 @@ export default function BlockUser(): JSX.Element {
   const [cursor, setCursor] = useState<string | undefined>(undefined);
   const [loadingMore, setLoadingMore] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const {supabase} = useSupabase();
 
   const loadBlockedUsers = useCallback(
     async (loadMore = false) => {
-      if (loadingMore || refreshing || !authId || blockedUserIds.length === 0)
+      if (
+        !supabase ||
+        loadingMore ||
+        refreshing ||
+        !authId ||
+        blockedUserIds.length === 0
+      )
         return;
 
       if (loadMore) {
@@ -96,11 +104,12 @@ export default function BlockUser(): JSX.Element {
       }
 
       try {
-        const data = await fetchBlockUsersPagination(
-          authId,
-          loadMore ? cursor : new Date().toISOString(),
-          PAGE_SIZE,
-        );
+        const data = await fetchBlockUsersPagination({
+          userId: authId,
+          limit: PAGE_SIZE,
+          supabase,
+          cursor: loadMore ? cursor : new Date().toISOString(),
+        });
 
         setBlockUsers((prev) => (loadMore ? [...prev, ...data] : data));
 
@@ -114,7 +123,7 @@ export default function BlockUser(): JSX.Element {
         setRefreshing(false);
       }
     },
-    [authId, blockedUserIds.length, cursor, loadingMore, refreshing],
+    [authId, blockedUserIds.length, cursor, loadingMore, refreshing, supabase],
   );
 
   useEffect(() => {
@@ -147,7 +156,11 @@ export default function BlockUser(): JSX.Element {
         <Button
           onPress={() => {
             alertDialog.close();
-            fetchUnblockUser(authId, userId);
+            fetchUnblockUser({
+              userId: authId,
+              blockUserId: userId,
+              supabase: supabase!,
+            });
 
             setAuth((prev) => {
               return {
diff --git a/app/(home)/settings/login-info.tsx b/app/(home)/settings/login-info.tsx
index f2b9dbc..beb4767 100644
--- a/app/(home)/settings/login-info.tsx
+++ b/app/(home)/settings/login-info.tsx
@@ -14,7 +14,7 @@ import {OAuthProvider} from '@clerk/types/dist';
 import {useRecoilState} from 'recoil';
 import {authRecoilState} from '../../../src/recoil/atoms';
 import {fetchDeletePushToken} from '../../../src/apis/pushTokenQueries';
-import {supabase} from '../../../src/supabase';
+import useSupabase from '../../../src/hooks/useSupabase';
 
 const Container = styled.View`
   flex: 1;
@@ -92,6 +92,7 @@ function SocialProvider({provider, email}: ProviderType): JSX.Element {
 }
 
 export default function LoginInfo(): JSX.Element {
+  const {supabase} = useSupabase();
   const {replace} = useRouter();
   const {theme, alertDialog} = useDooboo();
   const {bottom} = useSafeAreaInsets();
@@ -100,9 +101,10 @@ export default function LoginInfo(): JSX.Element {
   const [{pushToken}, setAuth] = useRecoilState(authRecoilState);
 
   const handleSignOut = async (): Promise<void> => {
-    if (isSignedIn) {
+    if (isSignedIn && supabase) {
       if (pushToken && user?.id) {
         await fetchDeletePushToken({
+          supabase,
           authId: user?.id,
           expoPushToken: pushToken,
         });
@@ -123,7 +125,7 @@ export default function LoginInfo(): JSX.Element {
     }
 
     if (user?.id) {
-      await supabase
+      await supabase!
         .from('users')
         .update({deleted_at: new Date().toISOString()})
         .eq('id', user?.id);
diff --git a/app/(home)/settings/profile-update.tsx b/app/(home)/settings/profile-update.tsx
new file mode 100644
index 0000000..414c631
--- /dev/null
+++ b/app/(home)/settings/profile-update.tsx
@@ -0,0 +1,587 @@
+import styled, {css} from '@emotion/native';
+import {Stack, useRouter} from 'expo-router';
+import {yupResolver} from '@hookform/resolvers/yup';
+import {EditText, Icon, Typography, useDooboo} from 'dooboo-ui';
+import * as yup from 'yup';
+import {Controller, SubmitHandler, useForm} from 'react-hook-form';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Text,
+  View,
+} from 'react-native';
+import {useState, useEffect} from 'react';
+import useSwr from 'swr';
+import {t} from '../../../src/STRINGS';
+import {useRecoilState} from 'recoil';
+import {authRecoilState} from '../../../src/recoil/atoms';
+import {uploadFileToSupabase} from '../../../src/supabase';
+import {ImageInsertArgs} from '../../../src/types';
+import CustomScrollView from '../../../src/components/uis/CustomScrollView';
+import ProfileImageInput from '../../../src/components/fragments/ProfileImageInput';
+import {delayPressIn} from '../../../src/utils/constants';
+import CustomPressable from 'dooboo-ui/uis/CustomPressable';
+import {
+  fetchUpdateProfile,
+  fetchUserProfile,
+} from '../../../src/apis/profileQueries';
+import FallbackComponent from '../../../src/components/uis/FallbackComponent';
+import CustomLoadingIndicator from '../../../src/components/uis/CustomLoadingIndicator';
+import {showAlert} from '../../../src/utils/alert';
+import {RectButton} from 'react-native-gesture-handler';
+import ErrorBoundary from 'react-native-error-boundary';
+import useSupabase, {SupabaseClient} from '../../../src/hooks/useSupabase';
+
+const Container = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${({theme}) => theme.bg.basic};
+`;
+
+const UserImageView = styled.View`
+  align-items: center;
+  padding: 24px;
+  background-color: ${({theme}) => theme.bg.paper};
+`;
+
+const Content = styled.View`
+  flex: 1;
+  padding: 24px;
+  gap: 16px;
+`;
+
+const schema = yup.object().shape({
+  display_name: yup.string().required(t('common.requiredField')).min(2).max(20),
+  github_id: yup.string().required(t('common.requiredField')),
+  affiliation: yup.string().required(t('common.requiredField')),
+  meetup_id: yup.string(),
+  avatar_url: yup.string(),
+  other_sns_urls: yup.array().of(yup.string()),
+  tags: yup.array().of(yup.string()),
+  desired_connection: yup.string(),
+  introduction: yup.string(),
+  motivation_for_event_participation: yup.string(),
+  future_expectations: yup.string(),
+});
+
+type FormData = yup.InferType<
+  typeof schema & {
+    tags: string[];
+    profileImg?: string;
+  }
+>;
+
+const fetcher = async ({
+  authId,
+  supabase,
+}: {
+  authId?: string | null;
+  supabase: SupabaseClient;
+}) => {
+  if (!authId || !supabase) return;
+
+  const {profile, userTags} = await fetchUserProfile({
+    authId,
+    supabase,
+  });
+  return {profile, userTags};
+};
+
+export default function ProfileUpdate(): JSX.Element {
+  const {theme} = useDooboo();
+  const [{authId}, setAuth] = useRecoilState(authRecoilState);
+  const [tag, setTag] = useState('');
+  const [tags, setTags] = useState<string[]>([]);
+  const [profileImg, setProfileImg] = useState<string>();
+  const [displayNameError, setDisplayNameError] = useState<string>();
+  const {supabase} = useSupabase();
+  const {back} = useRouter();
+
+  const {data: user, error} = useSwr(authId && `/profile/${authId}`, () =>
+    fetcher({supabase: supabase!, authId}),
+  );
+
+  const handleAddTag = () => {
+    if (tag && !tags.includes(tag)) {
+      setTags([...tags, tag]);
+      setTag('');
+    }
+  };
+
+  const {
+    control,
+    handleSubmit,
+    formState: {errors, isSubmitting},
+    setValue,
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+  });
+
+  const handleProfileUpdate: SubmitHandler<FormData> = async (data) => {
+    if (!authId || !supabase) return;
+
+    let image: ImageInsertArgs | undefined = {};
+
+    if (profileImg && !profileImg.startsWith('http')) {
+      const destPath = `users/${authId}`;
+
+      image = await uploadFileToSupabase({
+        supabase,
+        uri: profileImg,
+        fileType: 'Image',
+        bucket: 'images',
+        destPath,
+      });
+
+      console.log('image', image);
+    }
+
+    const formDataWithTags = {
+      ...data,
+      avatar_url:
+        !profileImg && user?.profile?.avatar_url
+          ? null
+          : image?.image_url || undefined,
+    };
+
+    try {
+      const user = await fetchUpdateProfile({
+        args: formDataWithTags,
+        authId,
+        tags: tags || [],
+        supabase,
+      });
+
+      if (user) {
+        setTags(tags);
+        setAuth((prev) => ({...prev, user, tags}));
+        back();
+      }
+    } catch (error: any) {
+      if (error?.name === 'displayName') {
+        setDisplayNameError(error?.message || '');
+        return;
+      }
+
+      showAlert((error as Error)?.message || '');
+    }
+  };
+
+  useEffect(() => {
+    if (user?.profile) {
+      setValue('display_name', user.profile.display_name || '');
+      setValue('meetup_id', user.profile.meetup_id || '');
+      setValue('github_id', user.profile.github_id || '');
+      setValue('affiliation', user.profile.affiliation || '');
+      setValue('introduction', user.profile.introduction || '');
+      setValue('desired_connection', user.profile.desired_connection || '');
+      setValue(
+        'motivation_for_event_participation',
+        user.profile.motivation_for_event_participation || '',
+      );
+      setValue('future_expectations', user.profile.future_expectations || '');
+      setTags(user.userTags);
+      setProfileImg(`${user.profile.avatar_url}` || undefined);
+    }
+  }, [user, setValue]);
+
+  const content = (() => {
+    switch (true) {
+      case !!error:
+        return (
+          <>
+            <Stack.Screen options={{title: t('profileUpdate.title')}} />
+            <FallbackComponent />
+          </>
+        );
+
+      case !user:
+        return (
+          <>
+            <Stack.Screen options={{title: t('profileUpdate.title')}} />
+            <CustomLoadingIndicator />
+          </>
+        );
+
+      default:
+        return (
+          <Container>
+            <KeyboardAvoidingView
+              behavior={Platform.select({ios: 'padding', default: undefined})}
+              keyboardVerticalOffset={80}
+              style={[
+                css`
+                  background-color: ${theme.bg.basic};
+                  flex: 1;
+                  align-self: stretch;
+                `,
+              ]}
+            >
+              <CustomScrollView bounces={false}>
+                <UserImageView>
+                  <ProfileImageInput
+                    imageUri={profileImg}
+                    onChangeImageUri={setProfileImg}
+                    onDeleteImageUri={() => setProfileImg(undefined)}
+                  />
+                </UserImageView>
+                <Content>
+                  <Controller
+                    control={control}
+                    name="display_name"
+                    render={({field: {onChange, value}}) => (
+                      <EditText
+                        required
+                        styles={{
+                          label: css`
+                            font-size: 14px;
+                          `,
+                          labelContainer: css`
+                            margin-bottom: 8px;
+                          `,
+                        }}
+                        colors={{focused: theme.role.primary}}
+                        label={t('onboarding.displayName')}
+                        onChangeText={onChange}
+                        placeholder={t('onboarding.displayNamePlaceholder')}
+                        value={value}
+                        decoration="boxed"
+                        error={
+                          displayNameError
+                            ? displayNameError
+                            : errors.display_name
+                              ? t('error.displayNameInvalid')
+                              : ''
+                        }
+                      />
+                    )}
+                    rules={{required: true, validate: (value) => !!value}}
+                  />
+                  <Controller
+                    control={control}
+                    name="github_id"
+                    render={({field: {onChange, value}}) => (
+                      <EditText
+                        required
+                        styles={{
+                          label: css`
+                            font-size: 14px;
+                          `,
+                          labelContainer: css`
+                            margin-bottom: 8px;
+                          `,
+                        }}
+                        colors={{focused: theme.role.primary}}
+                        label={t('onboarding.githubId')}
+                        onChangeText={onChange}
+                        placeholder={t('onboarding.githubIdPlaceholder')}
+                        value={value}
+                        decoration="boxed"
+                        error={errors.github_id ? errors.github_id.message : ''}
+                      />
+                    )}
+                    rules={{validate: (value) => !!value}}
+                  />
+                  <Controller
+                    control={control}
+                    name="affiliation"
+                    render={({field: {onChange, value}}) => (
+                      <EditText
+                        required
+                        styles={{
+                          label: css`
+                            font-size: 14px;
+                          `,
+                          labelContainer: css`
+                            margin-bottom: 8px;
+                          `,
+                        }}
+                        colors={{focused: theme.role.primary}}
+                        label={t('onboarding.affiliation')}
+                        onChangeText={onChange}
+                        placeholder={t('onboarding.affiliationPlaceholder')}
+                        value={value}
+                        decoration="boxed"
+                        error={
+                          errors.affiliation ? errors.affiliation.message : ''
+                        }
+                      />
+                    )}
+                    rules={{validate: (value) => !!value}}
+                  />
+                  <Controller
+                    control={control}
+                    name="meetup_id"
+                    render={({field: {onChange, value}}) => (
+                      <EditText
+                        styles={{
+                          label: css`
+                            font-size: 14px;
+                          `,
+                          labelContainer: css`
+                            margin-bottom: 8px;
+                          `,
+                        }}
+                        colors={{focused: theme.role.primary}}
+                        label={t('onboarding.meetupId')}
+                        onChangeText={onChange}
+                        placeholder={t('onboarding.meetupIdPlaceholder')}
+                        value={value}
+                        decoration="boxed"
+                        error={errors.meetup_id ? errors.meetup_id.message : ''}
+                      />
+                    )}
+                    rules={{validate: (value) => !!value}}
+                  />
+                  <Controller
+                    control={control}
+                    name="introduction"
+                    render={({field: {onChange, value}}) => (
+                      <EditText
+                        styles={{
+                          label: css`
+                            font-size: 14px;
+                          `,
+                          labelContainer: css`
+                            margin-bottom: 8px;
+                          `,
+                          input: css`
+                            min-height: 120px;
+                          `,
+                        }}
+                        multiline
+                        colors={{focused: theme.role.primary}}
+                        label={t('onboarding.introduction')}
+                        onChangeText={onChange}
+                        placeholder={t('onboarding.introductionPlaceholder')}
+                        value={value}
+                        decoration="boxed"
+                        error={
+                          errors.introduction ? errors.introduction.message : ''
+                        }
+                      />
+                    )}
+                    rules={{validate: (value) => !!value}}
+                  />
+                  <Controller
+                    control={control}
+                    name="desired_connection"
+                    render={({field: {onChange, value}}) => (
+                      <EditText
+                        styles={{
+                          label: css`
+                            font-size: 14px;
+                          `,
+                          labelContainer: css`
+                            margin-bottom: 8px;
+                          `,
+                          input: css`
+                            min-height: 120px;
+                          `,
+                        }}
+                        multiline
+                        colors={{focused: theme.role.primary}}
+                        label={t('onboarding.desiredConnection')}
+                        onChangeText={onChange}
+                        placeholder={t(
+                          'onboarding.desiredConnectionPlaceholder',
+                        )}
+                        value={value}
+                        decoration="boxed"
+                        error={
+                          errors.desired_connection
+                            ? errors.desired_connection.message
+                            : ''
+                        }
+                      />
+                    )}
+                    rules={{validate: (value) => !!value}}
+                  />
+                  <Controller
+                    control={control}
+                    name="future_expectations"
+                    render={({field: {onChange, value}}) => (
+                      <EditText
+                        styles={{
+                          label: css`
+                            font-size: 14px;
+                          `,
+                          labelContainer: css`
+                            margin-bottom: 8px;
+                          `,
+                          input: css`
+                            min-height: 120px;
+                          `,
+                        }}
+                        multiline
+                        colors={{focused: theme.role.primary}}
+                        label={t('onboarding.futureExpectations')}
+                        onChangeText={onChange}
+                        placeholder={t(
+                          'onboarding.futureExpectationsPlaceholder',
+                        )}
+                        value={value}
+                        decoration="boxed"
+                        error={
+                          errors.future_expectations
+                            ? errors.future_expectations.message
+                            : ''
+                        }
+                      />
+                    )}
+                    rules={{validate: (value) => !!value}}
+                  />
+
+                  {/* Tags */}
+                  <Controller
+                    control={control}
+                    name="tags"
+                    render={() => (
+                      <>
+                        <View
+                          style={css`
+                            flex-direction: row;
+                          `}
+                        >
+                          <EditText
+                            decoration="boxed"
+                            editable={!isSubmitting}
+                            label={t('onboarding.yourTags')}
+                            onChangeText={(text) => {
+                              setTag(
+                                text.length > 12
+                                  ? text.trim().slice(0, 20)
+                                  : text.trim(),
+                              );
+                            }}
+                            onSubmitEditing={handleAddTag}
+                            placeholder={t('onboarding.yourTagsPlaceholder')}
+                            style={css`
+                              flex: 1;
+                            `}
+                            styles={{
+                              container: css`
+                                border-radius: 4px;
+                              `,
+                            }}
+                            textInputProps={{
+                              returnKeyLabel: t('common.add'),
+                              returnKeyType: 'done',
+                            }}
+                            value={tag}
+                          />
+                          <View
+                            style={css`
+                              flex-direction: row;
+                              justify-content: center;
+                              align-items: center;
+                            `}
+                          >
+                            <CustomPressable
+                              delayHoverIn={delayPressIn}
+                              disabled={isSubmitting}
+                              onPress={handleAddTag}
+                              style={css`
+                                margin-top: 32px;
+                                margin-left: 12px;
+                                border-radius: 48px;
+                              `}
+                            >
+                              <Icon
+                                name="PlusCircle"
+                                size={20}
+                                style={css`
+                                  color: ${theme.text.placeholder};
+                                `}
+                              />
+                            </CustomPressable>
+                          </View>
+                        </View>
+                        <View
+                          style={css`
+                            flex-direction: row;
+                            flex-wrap: wrap;
+                            gap: 8px;
+                            margin-bottom: 16px;
+                          `}
+                        >
+                          {tags.map((tag, index) => (
+                            <View
+                              key={index}
+                              style={css`
+                                background-color: ${theme.bg.paper};
+                                padding: 8px;
+                                border-radius: 4px;
+                                flex-direction: row;
+                                align-items: center;
+                              `}
+                            >
+                              <Text
+                                style={css`
+                                  color: ${theme.text.basic};
+                                `}
+                              >
+                                {tag}
+                              </Text>
+                              <CustomPressable
+                                delayHoverIn={delayPressIn}
+                                onPress={() =>
+                                  setTags(tags.filter((t) => t !== tag))
+                                }
+                                style={css`
+                                  margin-left: 8px;
+                                `}
+                              >
+                                <Icon
+                                  name="XCircle"
+                                  size={20}
+                                  style={css`
+                                    color: ${theme.text.placeholder};
+                                  `}
+                                />
+                              </CustomPressable>
+                            </View>
+                          ))}
+                        </View>
+                      </>
+                    )}
+                  />
+                </Content>
+              </CustomScrollView>
+            </KeyboardAvoidingView>
+          </Container>
+        );
+    }
+  })();
+
+  return (
+    <ErrorBoundary FallbackComponent={FallbackComponent}>
+      <Stack.Screen
+        options={{
+          title: t('profileUpdate.title'),
+          headerRight: () => (
+            <RectButton
+              // @ts-ignore
+              onPress={handleSubmit(handleProfileUpdate)}
+              hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
+              style={css`
+                align-items: center;
+                justify-content: center;
+                padding: 6px;
+                margin-right: -4px;
+                border-radius: 99px;
+              `}
+            >
+              {isSubmitting ? (
+                <ActivityIndicator size="small" color={theme.text.label} />
+              ) : (
+                <Typography.Body3>{t('common.done')}</Typography.Body3>
+              )}
+            </RectButton>
+          ),
+        }}
+      />
+      {content}
+    </ErrorBoundary>
+  );
+}
diff --git a/app/[displayName].tsx b/app/[displayName].tsx
index 7925008..0d27d1f 100644
--- a/app/[displayName].tsx
+++ b/app/[displayName].tsx
@@ -20,6 +20,7 @@ import {
   fetchFollowUser,
   fetchIsAFollowing,
 } from '../src/apis/followQueries';
+import useSupabase from '../src/hooks/useSupabase';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -115,6 +116,7 @@ export default function DisplayName(): JSX.Element {
     displayName: string;
   }>();
 
+  const {supabase} = useSupabase();
   const {theme} = useDooboo();
   const {authId} = useRecoilValue(authRecoilState);
   const [user, setUser] = useState<any>(null);
@@ -126,12 +128,13 @@ export default function DisplayName(): JSX.Element {
 
   const followUser = async () => {
     try {
-      if (!authId || !user?.id) return;
+      if (!supabase || !authId || !user?.id) return;
 
       const result = await fetchFollowUser({
         authId,
         followingId: user.id,
         follow: !isFollowing,
+        supabase,
       });
 
       if (result) {
@@ -147,8 +150,14 @@ export default function DisplayName(): JSX.Element {
 
   useEffect(() => {
     async function fetchData() {
+      if (!supabase) return;
+
       try {
-        const {profile, userTags} = await fetchUserWithDisplayName(displayName);
+        const {profile, userTags} = await fetchUserWithDisplayName({
+          displayName,
+          supabase,
+        });
+
         setUser(profile);
         setTags(userTags);
 
@@ -158,12 +167,17 @@ export default function DisplayName(): JSX.Element {
             const isUserFollowing = await fetchIsAFollowing({
               authId,
               followingId: profile.id,
+              supabase,
             });
 
             setIsFollowing(isUserFollowing);
           }
 
-          const followingsData = await fetchFollowCounts(authId); // 팔로우 수를 가져오는 API
+          const followingsData = await fetchFollowCounts({
+            userId: profile.id,
+            supabase,
+          });
+
           setFollowingCount(followingsData.followingCount);
         }
       } catch (err: any) {
@@ -174,7 +188,7 @@ export default function DisplayName(): JSX.Element {
     }
 
     fetchData();
-  }, [authId, displayName]);
+  }, [authId, displayName, supabase]);
 
   if (loading) {
     return (
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 1a13756..ae70b78 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -28,12 +28,12 @@ import CustomLoadingIndicator from '../src/components/uis/CustomLoadingIndicator
 import useAppState from '../src/hooks/useAppState';
 import {ClerkProvider, ClerkLoaded, useUser} from '@clerk/clerk-expo';
 import ReportModal from '../src/components/modals/ReportModal';
-import {supabase} from '../src/supabase';
 import {getLocale, t} from '../src/STRINGS';
 import {fetchUserProfile} from '../src/apis/profileQueries';
 import {fetchBlockUserIds} from '../src/apis/blockQueries';
 import {registerForPushNotificationsAsync} from '../src/utils/notifications';
 import {fetchAddPushToken} from '../src/apis/pushTokenQueries';
+import useSupabase from '../src/hooks/useSupabase';
 
 SplashScreen.preventAutoHideAsync();
 
@@ -51,6 +51,7 @@ function App(): JSX.Element | null {
   const [, setAuth] = useRecoilState(authRecoilState);
   const [checkEasUpdate, setCheckEasUpdate] = useState(false);
   const {isUpdateAvailable, isUpdatePending} = useUpdates();
+  const {supabase} = useSupabase();
 
   useEffect(() => {
     if (isUpdatePending) {
@@ -89,6 +90,8 @@ function App(): JSX.Element | null {
   });
 
   useEffect(() => {
+    if (!supabase) return;
+
     const checkUser = async (): Promise<void> => {
       try {
         if (!user?.id) return;
@@ -138,7 +141,10 @@ function App(): JSX.Element | null {
           return;
         }
 
-        const {profile, userTags} = await fetchUserProfile(existingUser.id);
+        const {profile, userTags} = await fetchUserProfile({
+          authId: existingUser.id,
+          supabase,
+        });
 
         if (profile) {
           if (profile?.deleted_at) {
@@ -152,7 +158,10 @@ function App(): JSX.Element | null {
             return;
           }
 
-          const blockedUserIds = await fetchBlockUserIds(existingUser.id);
+          const blockedUserIds = await fetchBlockUserIds({
+            userId: existingUser.id,
+            supabase,
+          });
 
           setAuth({
             authId: existingUser.id,
@@ -172,6 +181,7 @@ function App(): JSX.Element | null {
                 fetchAddPushToken({
                   authId: user.id,
                   expoPushToken: token,
+                  supabase,
                 });
               }
 
@@ -191,7 +201,7 @@ function App(): JSX.Element | null {
     };
 
     checkUser();
-  }, [setAuth, snackbar, user]);
+  }, [setAuth, snackbar, supabase, user]);
 
   useEffect(() => {
     if (assetLoaded) {
diff --git a/assets/langs/en.json b/assets/langs/en.json
index 9e4e7e4..27feb8a 100644
--- a/assets/langs/en.json
+++ b/assets/langs/en.json
@@ -81,12 +81,12 @@
   },
   "loginInfo": {
     "cancel": "Cancel",
-    "withdrawAccount": "Cancel Account",
-    "withdrawAccountDescription": "Are you sure you want to cancel your account? This action cannot be undone.",
     "loggedInWith": "Logged in with {{provider}}",
     "loginMethod": "Login Method",
     "logout": "Logout",
-    "title": "Login Information"
+    "title": "Login Information",
+    "withdrawAccount": "Cancel Account",
+    "withdrawAccountDescription": "Are you sure you want to cancel your account? This action cannot be undone."
   },
   "onboarding": {
     "affiliation": "Affiliation",
diff --git a/assets/langs/ko.json b/assets/langs/ko.json
index 5f2ffda..3c6a800 100644
--- a/assets/langs/ko.json
+++ b/assets/langs/ko.json
@@ -81,12 +81,12 @@
   },
   "loginInfo": {
     "cancel": "취소",
-    "withdrawAccount": "계정 탈퇴",
-    "withdrawAccountDescription": "계정을 탈퇴하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
     "loggedInWith": "{{provider}} 계정으로 로그인했습니다",
     "loginMethod": "로그인 수단",
     "logout": "로그아웃",
-    "title": "로그인 정보"
+    "title": "로그인 정보",
+    "withdrawAccount": "계정 탈퇴",
+    "withdrawAccountDescription": "계정을 탈퇴하시겠습니까? 이 작업은 되돌릴 수 없습니다."
   },
   "onboarding": {
     "affiliation": "소속",
diff --git a/src/apis/blockQueries.ts b/src/apis/blockQueries.ts
index 4d9eb94..8ea0b51 100644
--- a/src/apis/blockQueries.ts
+++ b/src/apis/blockQueries.ts
@@ -1,12 +1,14 @@
-import {supabase} from '../supabase';
+import {SupabaseClient} from '../hooks/useSupabase';
 import {User} from '../types';
 
 export async function fetchBlockUser({
   authId,
   userId,
+  supabase,
 }: {
   authId: string;
   userId: string;
+  supabase: SupabaseClient;
 }) {
   const {data: existingBlock} = await supabase
     .from('blocks')
@@ -36,7 +38,15 @@ export async function fetchBlockUser({
   return newBlock;
 }
 
-export async function fetchUnblockUser(userId: string, blockUserId: string) {
+export async function fetchUnblockUser({
+  userId,
+  blockUserId,
+  supabase,
+}: {
+  userId: string;
+  blockUserId: string;
+  supabase: SupabaseClient;
+}) {
   if (!userId) {
     throw new Error('ERR_NOT_AUTHORIZED');
   }
@@ -55,11 +65,17 @@ export async function fetchUnblockUser(userId: string, blockUserId: string) {
   return deletedBlock;
 }
 
-export const fetchBlockUsersPagination = async (
-  userId: string,
-  cursor: string = new Date().toISOString(),
-  limit: number,
-) => {
+export const fetchBlockUsersPagination = async ({
+  userId,
+  limit,
+  cursor = new Date().toISOString(),
+  supabase,
+}: {
+  userId: string;
+  cursor?: string;
+  limit: number;
+  supabase: SupabaseClient;
+}) => {
   if (!userId) {
     return [];
   }
@@ -83,7 +99,13 @@ export const fetchBlockUsersPagination = async (
   return data.map((block) => block.block_user) as unknown as User[];
 };
 
-export const fetchBlockUserIds = async (userId: string): Promise<string[]> => {
+export const fetchBlockUserIds = async ({
+  userId,
+  supabase,
+}: {
+  userId: string;
+  supabase: SupabaseClient;
+}): Promise<string[]> => {
   const {data: blockedUsersData, error: blockedUsersError} = await supabase
     .from('blocks')
     .select('block_user_id')
@@ -96,5 +118,5 @@ export const fetchBlockUserIds = async (userId: string): Promise<string[]> => {
     return [];
   }
 
-  return blockedUsersData.map((block) => block.block_user_id);
+  return blockedUsersData.map((block) => block.block_user_id as string);
 };
diff --git a/src/apis/followQueries.ts b/src/apis/followQueries.ts
index 03de604..02a38c2 100644
--- a/src/apis/followQueries.ts
+++ b/src/apis/followQueries.ts
@@ -1,13 +1,15 @@
-import {supabase} from '../supabase';
+import {SupabaseClient} from '../hooks/useSupabase';
 
 export async function fetchFollowUser({
   authId,
   followingId,
   follow,
+  supabase,
 }: {
   authId: string;
   followingId: string;
   follow: boolean;
+  supabase: SupabaseClient;
 }) {
   if (!authId) {
     throw new Error('ERR_NOT_AUTHORIZED');
@@ -111,9 +113,11 @@ export async function fetchFollowUser({
 export async function fetchIsAFollowing({
   authId,
   followingId,
+  supabase,
 }: {
   authId: string;
   followingId: string;
+  supabase: SupabaseClient;
 }) {
   if (!authId) {
     throw new Error('ERR_NOT_AUTHORIZED');
@@ -151,10 +155,12 @@ export async function fetchFollowers({
   userId,
   cursor,
   limit = 10,
+  supabase,
 }: {
   userId: string;
   cursor?: string;
   limit?: number;
+  supabase: SupabaseClient;
 }) {
   if (!userId) {
     throw new Error('ERR_NOT_AUTHORIZED');
@@ -197,10 +203,12 @@ export async function fetchFollowings({
   userId,
   cursor,
   limit = 10,
+  supabase,
 }: {
   userId: string;
   cursor?: string;
   limit?: number;
+  supabase: SupabaseClient;
 }) {
   if (!userId) {
     throw new Error('ERR_NOT_AUTHORIZED');
@@ -241,9 +249,13 @@ export async function fetchFollowings({
   }
 }
 
-export async function fetchFollowCounts(
-  userId: string,
-): Promise<{followingCount: number; followerCount: number}> {
+export async function fetchFollowCounts({
+  userId,
+  supabase,
+}: {
+  userId: string;
+  supabase: SupabaseClient;
+}): Promise<{followingCount: number; followerCount: number}> {
   if (!userId) {
     throw new Error('ERR_NOT_AUTHORIZED');
   }
diff --git a/src/apis/likeQueries.ts b/src/apis/likeQueries.ts
index e64797c..b9c2eb8 100644
--- a/src/apis/likeQueries.ts
+++ b/src/apis/likeQueries.ts
@@ -1,13 +1,15 @@
-import {supabase} from '../supabase';
+import { SupabaseClient } from "../hooks/useSupabase";
 
 export async function toggleLike({
   userId,
   replyId,
   postId,
+  supabase,
 }: {
   userId: string;
   replyId?: string;
   postId?: string;
+  supabase: SupabaseClient;
 }) {
   if (!replyId && !postId) {
     throw new Error('Either replyId or postId must be provided');
diff --git a/src/apis/notifications.ts b/src/apis/notifications.ts
index f18a1fb..2c9088d 100644
--- a/src/apis/notifications.ts
+++ b/src/apis/notifications.ts
@@ -1,9 +1,10 @@
-import {supabase} from '../supabase';
+import {SupabaseClient} from '../hooks/useSupabase';
 
 type Notification = {
   title: string;
   body: string;
   data?: Record<string, any>;
+  supabase: SupabaseClient;
 };
 
 export const sendNotifications = async (
@@ -55,6 +56,7 @@ export const sendNotificationsToAllUsers = async ({
   title,
   body,
   data,
+  supabase,
 }: Notification) => {
   async function getAllPushTokens() {
     const {data, error} = await supabase.from('push_tokens').select('token');
@@ -77,6 +79,7 @@ export const sendNotificationsToAllUsers = async ({
       body,
       title,
       data,
+      supabase,
     });
   }
 };
@@ -86,11 +89,13 @@ export const sendNotificationsToPostUsers = async ({
   title = '',
   body,
   data,
+  supabase,
 }: {
   postId: string;
   body: string;
   title?: string;
   data?: Record<string, unknown>;
+  supabase: SupabaseClient;
 }) => {
   // Function to fetch push tokens of the post author, likers, and commenters
   async function getPostRelatedUserIdsAndPushTokens() {
@@ -156,6 +161,7 @@ export const sendNotificationsToPostUsers = async ({
   // If there are any tokens, send notifications
   if (tokens.length > 0) {
     await sendNotifications(tokens, {
+      supabase,
       body,
       title,
       data,
diff --git a/src/apis/postQueries.ts b/src/apis/postQueries.ts
index e3a5a02..9177e78 100644
--- a/src/apis/postQueries.ts
+++ b/src/apis/postQueries.ts
@@ -1,4 +1,4 @@
-import {supabase} from '../supabase';
+import {SupabaseClient} from '../hooks/useSupabase';
 import {ImageInsertArgs, PostInsertArgs, PostWithJoins} from '../types';
 import {PAGE_SIZE} from '../utils/constants';
 import {sendNotificationsToAllUsers} from './notifications';
@@ -18,9 +18,13 @@ const filterDeletedImagesInPosts = (
   });
 };
 
-export const fetchPostById = async (
-  id: string,
-): Promise<PostWithJoins | null> => {
+export const fetchPostById = async ({
+  id,
+  supabase,
+}: {
+  id: string;
+  supabase: SupabaseClient;
+}): Promise<PostWithJoins | null> => {
   const {data, error} = await supabase
     .from('posts')
     .select(
@@ -52,10 +56,12 @@ export const fetchPostPagination = async ({
   cursor = new Date().toISOString(),
   limit = PAGE_SIZE,
   blockedUserIds = [],
+  supabase,
 }: {
   cursor: string | undefined;
   blockedUserIds?: string[];
   limit?: number;
+  supabase: SupabaseClient;
 }): Promise<PostWithJoins[]> => {
   const {data, error} = await supabase
     .from('posts')
@@ -101,6 +107,7 @@ export const fetchUpdatePost = async ({
   url,
   images,
   imageUrlsToDelete,
+  supabase,
 }: {
   postId: string;
   title: string;
@@ -108,6 +115,7 @@ export const fetchUpdatePost = async ({
   url: string | null;
   images: ImageInsertArgs[];
   imageUrlsToDelete: string[];
+  supabase: SupabaseClient;
 }): Promise<PostWithJoins> => {
   const {data: post, error: updateError} = await supabase
     .from('posts')
@@ -157,9 +165,11 @@ export const fetchUpdatePost = async ({
 export const fetchDeletePost = async ({
   id,
   softDelete = true,
+  supabase,
 }: {
   id: string;
   softDelete?: boolean;
+  supabase: SupabaseClient;
 }): Promise<boolean> => {
   if (softDelete) {
     const {error} = await supabase
@@ -195,9 +205,13 @@ export const fetchDeletePost = async ({
   return true;
 };
 
-export const fetchCreatePost = async (
-  post: PostInsertArgs & {images?: ImageInsertArgs[]},
-) => {
+export const fetchCreatePost = async ({
+  post,
+  supabase,
+}: {
+  post: PostInsertArgs & {images?: ImageInsertArgs[]};
+  supabase: SupabaseClient;
+}) => {
   const {data, error} = await supabase
     .from('posts')
     .insert({
@@ -240,6 +254,7 @@ export const fetchCreatePost = async (
   sendNotificationsToAllUsers({
     title: post.title,
     body: post.content,
+    supabase,
   });
 
   return data as unknown as PostWithJoins;
diff --git a/src/apis/profileQueries.ts b/src/apis/profileQueries.ts
index 7e48a87..7ca156e 100644
--- a/src/apis/profileQueries.ts
+++ b/src/apis/profileQueries.ts
@@ -1,8 +1,14 @@
+import {SupabaseClient} from '../hooks/useSupabase';
 import {t} from '../STRINGS';
-import {supabase} from '../supabase';
 import {User, UserUpdateArgs} from '../types';
 
-export const fetchUserProfile = async (authId: string) => {
+export const fetchUserProfile = async ({
+  authId,
+  supabase,
+}: {
+  authId: string;
+  supabase: SupabaseClient;
+}) => {
   const {data: profile, error: profileError} = await supabase
     .from('users')
     .select('*')
@@ -42,7 +48,13 @@ export const fetchUserProfile = async (authId: string) => {
   return {profile, userTags};
 };
 
-export const fetchUserWithDisplayName = async (displayName: string) => {
+export const fetchUserWithDisplayName = async ({
+  displayName,
+  supabase,
+}: {
+  displayName: string;
+  supabase: SupabaseClient;
+}) => {
   const {data: profile, error: profileError} = await supabase
     .from('users')
     .select('*')
@@ -84,16 +96,18 @@ export const fetchUserWithDisplayName = async (displayName: string) => {
   const userTags = tags?.map((tag) => tag.tag) || [];
 
   return {profile, userTags};
-}
+};
 
 export const fetchUpdateProfile = async ({
   args,
   authId,
   tags,
+  supabase,
 }: {
   args: UserUpdateArgs;
   tags: string[];
   authId: string;
+  supabase: SupabaseClient;
 }) => {
   if (!args.display_name) {
     const error = new Error(t('error.displayNameIsEmpty'));
diff --git a/src/apis/pushTokenQueries.ts b/src/apis/pushTokenQueries.ts
index 76552d1..10bab62 100644
--- a/src/apis/pushTokenQueries.ts
+++ b/src/apis/pushTokenQueries.ts
@@ -1,12 +1,14 @@
 import {Platform} from 'react-native';
-import {supabase} from '../supabase';
+import {SupabaseClient} from '../hooks/useSupabase';
 
 export async function fetchAddPushToken({
   authId,
   expoPushToken,
+  supabase,
 }: {
   authId: string;
   expoPushToken: string;
+  supabase: SupabaseClient;
 }) {
   const {data: existingToken} = await supabase
     .from('push_tokens')
@@ -39,9 +41,11 @@ export async function fetchAddPushToken({
 export async function fetchDeletePushToken({
   authId,
   expoPushToken,
+  supabase,
 }: {
   authId: string;
   expoPushToken: string;
+  supabase: SupabaseClient;
 }) {
   const {data: deletedToken, error: deleteError} = await supabase
     .from('push_tokens')
@@ -59,7 +63,13 @@ export async function fetchDeletePushToken({
   return deletedToken;
 }
 
-export async function fetchPushTokens(userId: string) {
+export async function fetchPushTokens({
+  userId,
+  supabase,
+}: {
+  userId: string;
+  supabase: SupabaseClient;
+}) {
   const {data: tokens, error} = await supabase
     .from('push_tokens')
     .select('*')
diff --git a/src/apis/replyQueries.ts b/src/apis/replyQueries.ts
index 64a0b19..1bc68e8 100644
--- a/src/apis/replyQueries.ts
+++ b/src/apis/replyQueries.ts
@@ -1,5 +1,5 @@
+import {SupabaseClient} from '../hooks/useSupabase';
 import {t} from '../STRINGS';
-import {supabase} from '../supabase';
 import {
   ImageInsertArgs,
   NotificationInsertArgs,
@@ -29,10 +29,12 @@ export const fetchReplyPagination = async ({
   cursor = new Date().toISOString(),
   limit = PAGE_SIZE,
   postId,
+  supabase,
 }: {
   cursor: string | undefined;
   limit?: number;
   postId: string;
+  supabase: SupabaseClient;
 }): Promise<ReplyWithJoins[]> => {
   const {data, error} = await supabase
     .from('replies')
@@ -57,9 +59,13 @@ export const fetchReplyPagination = async ({
   return filterDeletedImagesInReplies(data as unknown as ReplyWithJoins[]);
 };
 
-export const fetchReplyById = async (
-  id: string,
-): Promise<ReplyWithJoins | null> => {
+export const fetchReplyById = async ({
+  id,
+  supabase,
+}: {
+  id: string;
+  supabase: SupabaseClient;
+}): Promise<ReplyWithJoins | null> => {
   const {data, error} = await supabase
     .from('replies')
     .select(
@@ -84,9 +90,11 @@ export const fetchReplyById = async (
 export const fetchCreateReply = async ({
   reply: replyArg,
   images: imagesArg = [],
+  supabase,
 }: {
   reply: ReplyInsertArgs;
   images?: ImageInsertArgs[];
+  supabase: SupabaseClient;
 }): Promise<ReplyWithJoins> => {
   const {message, user_id, post_id, reply_id} = replyArg;
 
@@ -140,6 +148,7 @@ export const fetchCreateReply = async ({
 
     // Send notifications to other users following the post
     const userIds = await sendNotificationsToPostUsers({
+      supabase,
       postId: post_id,
       body: message,
       title: title && t('common.newReplyOnTitle', {title}),
diff --git a/src/apis/reportQueries.ts b/src/apis/reportQueries.ts
index fd775fe..74e5c40 100644
--- a/src/apis/reportQueries.ts
+++ b/src/apis/reportQueries.ts
@@ -1,7 +1,13 @@
-import {supabase} from '../supabase';
+import {SupabaseClient} from '../hooks/useSupabase';
 import {ReportInsertArgs} from '../types';
 
-export const fetchCreateReport = async (report: ReportInsertArgs) => {
+export const fetchCreateReport = async ({
+  report,
+  supabase,
+}: {
+  report: ReportInsertArgs;
+  supabase: SupabaseClient;
+}) => {
   const {data, error} = await supabase.from('reports').insert(report).single();
 
   if (error) {
diff --git a/src/hooks/useSupabase.tsx b/src/hooks/useSupabase.tsx
new file mode 100644
index 0000000..59a56f3
--- /dev/null
+++ b/src/hooks/useSupabase.tsx
@@ -0,0 +1,61 @@
+import {useSession} from '@clerk/clerk-expo';
+import {createClient} from '@supabase/supabase-js';
+import {useEffect, useState} from 'react';
+import {Database} from '../types/supabase';
+import {supabaseAnonKey, supabaseUrl} from '../../config';
+import {ActiveSessionResource} from '@clerk/types';
+import {useSetRecoilState} from 'recoil';
+import {authRecoilState} from '../recoil/atoms';
+
+export type SupabaseClient = ReturnType<typeof createClient<Database>>;
+
+function createClerkSupabaseClient(
+  session?: ActiveSessionResource | null,
+): SupabaseClient | null {
+  if (!session) return null;
+
+  return createClient<Database>(supabaseUrl, supabaseAnonKey, {
+    global: {
+      // Get the custom Supabase token from Clerk
+      fetch: async (url, options = {}) => {
+        const clerkToken = await session?.getToken({
+          template: 'supabase',
+        });
+
+        // Insert the Clerk Supabase token into the headers
+        const headers = new Headers(options?.headers);
+        headers.set('Authorization', `Bearer ${clerkToken}`);
+
+        return fetch(url, {
+          ...options,
+          headers,
+        });
+      },
+    },
+  });
+}
+
+export default function useSupabase(): {supabase: SupabaseClient | null} {
+  const {session} = useSession();
+  const setAuth = useSetRecoilState(authRecoilState);
+
+  const [supabase, setSupabase] = useState(() =>
+    createClerkSupabaseClient(session),
+  );
+
+  useEffect(() => {
+    if (!session) {
+      setAuth({
+        authId: null,
+        user: null,
+        blockedUserIds: [],
+        pushToken: null,
+        tags: [],
+      });
+    }
+
+    setSupabase(createClerkSupabaseClient(session));
+  }, [session, setAuth]);
+
+  return {supabase};
+}
diff --git a/src/providers/AppLogicProvider.tsx b/src/providers/AppLogicProvider.tsx
index 671dffc..9c904c1 100644
--- a/src/providers/AppLogicProvider.tsx
+++ b/src/providers/AppLogicProvider.tsx
@@ -10,6 +10,7 @@ import {authRecoilState, reportModalRecoilState} from '../recoil/atoms';
 import {t} from '../STRINGS';
 import {fetchBlockUser} from '../apis/blockQueries';
 import {fetchCreateReport} from '../apis/reportQueries';
+import useSupabase from '../hooks/useSupabase';
 
 type PeerContentActionProps = {
   userId: string;
@@ -44,6 +45,7 @@ function AppLogicProvider({children}: Props): JSX.Element {
   const setReportModalState = useSetRecoilState(reportModalRecoilState);
   const setAuthState = useSetRecoilState(authRecoilState);
   const [isCreateReportInFlight, setIsCreateReportInFlight] = useState(false);
+  const {supabase} = useSupabase();
 
   const handlePeerContentAction = async ({
     userId,
@@ -53,14 +55,14 @@ function AppLogicProvider({children}: Props): JSX.Element {
     const cancelButtonIndex = 2;
 
     const handleBlockUser = async () => {
-      if (!userId || !authId) {
+      if (!userId || !authId || !supabase) {
         return;
       }
 
       setIsCreateReportInFlight(true);
 
       try {
-        await fetchBlockUser({authId, userId});
+        await fetchBlockUser({authId, userId, supabase});
         snackbar.open({text: t('common.blockUserSuccess')});
 
         setAuthState((prev) => ({
@@ -81,15 +83,18 @@ function AppLogicProvider({children}: Props): JSX.Element {
     };
 
     const handleReport = async (content: string): Promise<void> => {
-      if (!content || !userId || !authId) {
+      if (!content || !userId || !authId || !supabase) {
         return;
       }
 
       await fetchCreateReport({
-        content,
-        src_user_id: authId,
-        title: t('common.reportSubject', {subject: t('common.user')}),
-        user_id: userId,
+        supabase,
+        report: {
+          content,
+          src_user_id: authId,
+          title: t('common.reportSubject', {subject: t('common.user')}),
+          user_id: userId,
+        },
       });
 
       snackbar.open({
diff --git a/src/supabase/index.ts b/src/supabase/index.ts
index 751e9eb..b1fd998 100644
--- a/src/supabase/index.ts
+++ b/src/supabase/index.ts
@@ -1,57 +1,22 @@
 import 'react-native-url-polyfill/auto';
 
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import {createClient} from '@supabase/supabase-js';
 import {decode} from 'base64-arraybuffer';
-import {supabaseAnonKey, supabaseUrl} from '../../config';
 import * as FileSystem from 'expo-file-system';
-import type {Database} from '../../src/types/supabase';
 import {FileType, ImageInsertArgs} from '../types';
-import {ActiveSessionResource} from '@clerk/types';
-
-// TODO: Remove below supabase variable and migrate to below function to integrate RLS with Clerk
-export function createClerkSupabaseClient(session: ActiveSessionResource) {
-  return createClient<Database>(supabaseUrl, supabaseAnonKey, {
-    global: {
-      // Get the custom Supabase token from Clerk
-      fetch: async (url, options = {}) => {
-        const clerkToken = await session?.getToken({
-          template: 'supabase',
-        });
-
-        // Insert the Clerk Supabase token into the headers
-        const headers = new Headers(options?.headers);
-        headers.set('Authorization', `Bearer ${clerkToken}`);
-
-        return fetch(url, {
-          ...options,
-          headers,
-        });
-      },
-    },
-  });
-}
-
-export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
-  auth: {
-    storage: AsyncStorage,
-    autoRefreshToken: true,
-    persistSession: true,
-    // https://github.com/supabase/auth-js/issues/23#issuecomment-2253757376
-    // detectSessionInUrl: false,
-  },
-});
+import { SupabaseClient } from '../hooks/useSupabase';
 
 export const uploadFileToSupabase = async ({
   uri,
   fileType,
   bucket,
   destPath,
+  supabase,
 }: {
   uri: string;
   fileType?: FileType;
   bucket: string;
   destPath: string;
+  supabase: SupabaseClient;
 }): Promise<ImageInsertArgs | undefined> => {
   const ext = uri.split('.').pop();
   const base64 = await FileSystem.readAsStringAsync(uri, {encoding: 'base64'});
@@ -69,7 +34,10 @@ export const uploadFileToSupabase = async ({
   }
 
   return {
-    image_url: getPublicUrlFromPath(data.path),
+    image_url: getPublicUrlFromPath({
+      path: data.fullPath,
+      supabase,
+    }),
     url: data.fullPath,
     id: data.id,
     type: fileType || null,
@@ -85,9 +53,11 @@ export const uploadFileToSupabase = async ({
 export const deleteFileFromSupabase = async ({
   bucket,
   filePath,
+  supabase,
 }: {
   bucket: string;
   filePath: string;
+  supabase: SupabaseClient;
 }): Promise<void> => {
   const {error} = await supabase.storage.from(bucket).remove([filePath]);
 
@@ -96,7 +66,13 @@ export const deleteFileFromSupabase = async ({
   }
 };
 
-export const getPublicUrlFromPath = (path: string): string => {
+export const getPublicUrlFromPath = ({
+  path,
+  supabase,
+}: {
+  path: string;
+  supabase: SupabaseClient;
+}): string => {
   const {data} = supabase.storage.from('images').getPublicUrl(path);
 
   if (!data?.publicUrl) {
@@ -110,10 +86,12 @@ export const getSignedUrlFromUploadFile = async ({
   bucket,
   path,
   expiresIn = 60,
+  supabase,
 }: {
   bucket: string;
   path: string;
   expiresIn?: number;
+  supabase: SupabaseClient;
 }): Promise<string> => {
   const {data} = await supabase.storage
     .from(bucket)