fix: refresh token on settings updated

Author: RPate97

app/(home)/index.tsx

@@ -1,58 +1,48 @@
 import Auth, { fetchUserSettings, sleep } from "@/components/screens/auth";
 import { HomeScreen } from "@/components/screens/home";
 import { SignupFlow } from "@/components/screens/signup";
+import { SessionContext } from "@/context/SessionContext"; // Import your SessionContext
 import { segmentTrackOpened } from "@/lib/analytics";
-import { supabase } from "@/lib/supabase";
 import { Settings } from "@prisma/client";
 import { Session } from "@supabase/supabase-js";
-import { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
-import "react-native-url-polyfill/auto";
 
 export default function App() {
-  const [session, setSession] = useState<Session | null>(null);
+  const { session, loading: sessionLoading } = useContext(SessionContext);
   const [showSignupFlow, setShowSignupFlow] = useState<boolean>(false);
   const [settings, setSettings] = useState<Settings | null>();
   const [loading, setLoading] = useState<boolean>(true);
 
   const setupSettings = async (userId: string) => {
     setSettings(await fetchUserSettings(userId));
-    sleep(1000);
+    await sleep(1000);
     setLoading(false);
   };
 
-  const handleSetupSettings = async (session: Session | null) => {
-    if (session) {
-      segmentTrackOpened(session.user.id);
+  const handleSetupSettings = async (currentSession: Session | null) => {
+    if (currentSession) {
+      segmentTrackOpened(currentSession.user.id);
       setLoading(true);
-      setupSettings(session.user.id);
+      await setupSettings(currentSession.user.id);
     } else {
       setSettings(null);
+      setLoading(false);
     }
   };
 
   useEffect(() => {
     handleSetupSettings(session);
   }, [session]);
 
-  useEffect(() => {
-    supabase.auth.getSession().then(({ data: { session } }) => {
-      setSession(session);
-    });
-
-    supabase.auth.onAuthStateChange(async (_event, session) => {
-      setSession(session);
-    });
-  }, []);
-
   const didConfigureSettings =
     settings &&
-    settings?.agentName !== null &&
-    settings?.gender !== null &&
+    settings.agentName !== null &&
+    settings.gender !== null &&
     settings.name !== null &&
     settings.voice !== null;
 
-  if (session && loading) {
+  if (sessionLoading || (session && loading)) {
     return (
       <View style={styles.container}>
         <ActivityIndicator />
@@ -63,10 +53,10 @@ export default function App() {
   if (!session) {
     return (
       <View style={styles.container}>
-        <Auth setSession={setSession} setShowSignupFlow={setShowSignupFlow} />
+        <Auth setShowSignupFlow={setShowSignupFlow} />
       </View>
     );
-  } else if (showSignupFlow || didConfigureSettings === false) {
+  } else if (showSignupFlow || !didConfigureSettings) {
     return (
       <View style={styles.container}>
         <SignupFlow

app/_layout.tsx

@@ -1,29 +1,33 @@
 // app/_layout.tsx
-import React from 'react';
-import { Stack } from 'expo-router';
-import { registerGlobals } from '@livekit/react-native';
-import * as Sentry from '@sentry/react-native';
+
+import { SessionProvider } from "@/context/SessionContext";
+import { registerGlobals } from "@livekit/react-native";
 import { captureConsoleIntegration } from "@sentry/integrations";
+import * as Sentry from "@sentry/react-native";
+import { Stack } from "expo-router";
+import React from "react";
+import { AppContextProvider } from "../context";
 
 Sentry.init({
   dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
   environment: process.env.EXPO_PUBLIC_SENTRY_ENV,
-  integrations: [
-    captureConsoleIntegration({ levels: ["warn", "error"] }),
-  ]
-
+  integrations: [captureConsoleIntegration({ levels: ["warn", "error"] })],
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // enableSpotlight: __DEV__,
 });
 
-registerGlobals()
+registerGlobals();
 
 const RootLayout: React.FC = () => {
   return (
-    <Stack screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="(home)" options={{ headerShown: false }} />
-      <Stack.Screen name="settings" options={{ title: 'Settings' }} />
-    </Stack>      
+    <SessionProvider>
+      <AppContextProvider>
+        <Stack screenOptions={{ headerShown: false }}>
+          <Stack.Screen name="(home)" options={{ headerShown: false }} />
+          <Stack.Screen name="settings" options={{ title: "Settings" }} />
+        </Stack>
+      </AppContextProvider>
+    </SessionProvider>
   );
 };
 

components/chat-interfaces/voice/index.tsx

@@ -5,19 +5,15 @@ import {
   registerGlobals,
   useRemoteParticipant,
 } from "@livekit/react-native";
+import { useFocusEffect } from "@react-navigation/native";
 import { Session } from "@supabase/supabase-js";
 import useAxios, { RefetchFunction } from "axios-hooks";
 import { ParticipantKind } from "livekit-client";
-import * as React from "react";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { ActivityIndicator, Alert, Button, View } from "react-native";
 
 registerGlobals();
 
-const RoomConnecting = () => {
-  return <ActivityIndicator />;
-};
-
 const RoomStatus = ({
   connected,
   setConnected,
@@ -36,38 +32,29 @@ const RoomStatus = ({
   const agentConnected = !!remote;
 
   useEffect(() => {
-    // If call connected and agent connected and first time this is true, then record that the agent connected at least once
     if (connected && agentConnected && !agentPreviouslyConnected) {
       setAgentPreviouslyConnected(true);
     }
 
-    // If the agent was previously connected and the call is connected, but there is no longer an agent connected then trigger
-    // the room to be destroyed and recreated (which will cause a new agent to be connected)
     if (agentPreviouslyConnected && connected && !agentConnected) {
       refetchToken();
     }
   }, [agentConnected, connected]);
 
   return (
-    <>
-      <View
-        style={{
-          marginBottom: 0,
-        }}
-      >
-        {connected && agentConnected === false ? (
-          <ActivityIndicator />
-        ) : (
-          <Button
-            title={"End Chat"}
-            onPress={() => {
-              setConnected(!connected);
-              segmentTrackEndChat();
-            }}
-          />
-        )}
-      </View>
-    </>
+    <View style={{ marginBottom: 0 }}>
+      {connected && agentConnected === false ? (
+        <ActivityIndicator />
+      ) : (
+        <Button
+          title={"End Chat"}
+          onPress={() => {
+            setConnected(false);
+            segmentTrackEndChat();
+          }}
+        />
+      )}
+    </View>
   );
 };
 
@@ -86,6 +73,16 @@ export const VoiceInterface: React.FC<{ session: Session }> = ({ session }) => {
     },
   });
 
+  useFocusEffect(
+    React.useCallback(() => {
+      return () => {
+        if (connected) {
+          setConnected(false);
+        }
+      };
+    }, [connected])
+  );
+
   useEffect(() => {
     if (error !== null) {
       console.error(error);
@@ -101,18 +98,19 @@ export const VoiceInterface: React.FC<{ session: Session }> = ({ session }) => {
       return;
     }
 
-    let start = async () => {
+    const startAudioSession = async () => {
       await AudioSession.startAudioSession();
     };
 
-    start();
+    startAudioSession();
+
     return () => {
       AudioSession.stopAudioSession();
     };
   }, [loading]);
 
   if (loading || token === null) {
-    return <></>;
+    return null;
   }
 
   return (
@@ -121,7 +119,7 @@ export const VoiceInterface: React.FC<{ session: Session }> = ({ session }) => {
         <Button
           title={"Start Chat"}
           onPress={() => {
-            setConnected(!connected);
+            setConnected(true);
             segmentTrackStartChat();
           }}
         />
@@ -130,7 +128,7 @@ export const VoiceInterface: React.FC<{ session: Session }> = ({ session }) => {
         <LiveKitRoom
           serverUrl={wsURL}
           token={token}
-          connect={token && connected}
+          connect={connected}
           audio={true}
         >
           <RoomStatus

components/screens/auth/index.tsx

@@ -1,5 +1,6 @@
 import { SignInWithApple } from "@/components/screens/auth/apple";
 import { VoiceKey } from "@/components/screens/signup/voice";
+import { SessionContext } from "@/context/SessionContext";
 import {
   segmentTrackLoadedAuthPage,
   segmentTrackSignedIn,
@@ -9,12 +10,11 @@ import { convertSQLToSettings } from "@/lib/utils";
 import { Settings } from "@prisma/client";
 import { GoogleSignin } from "@react-native-google-signin/google-signin";
 import { Session, User } from "@supabase/supabase-js";
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { SignInWithGoogle } from "./google";
 
 type Props = {
-  setSession: React.Dispatch<React.SetStateAction<Session | null>>;
   setShowSignupFlow: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
@@ -50,12 +50,14 @@ export const updateUserSettings = async (
 export const sleep = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
-export default function Auth({ setSession, setShowSignupFlow }: Props) {
+export default function Auth({ setShowSignupFlow }: Props) {
   GoogleSignin.configure({
     scopes: [],
     iosClientId: process.env.EXPO_PUBLIC_GOOGLE_AUTH_CLIENT_ID,
   });
 
+  const { setSession } = useContext(SessionContext);
+
   const handleDidSignin = async (user: User, session: Session) => {
     setSession(session);
     let settings = null;