diff --git a/client/src/contexts/AuthProvider.tsx b/client/src/contexts/AuthProvider.tsx
index 06bf1bb..d0d88cc 100644
--- a/client/src/contexts/AuthProvider.tsx
+++ b/client/src/contexts/AuthProvider.tsx
@@ -17,10 +17,11 @@
  */
 import axios, { AxiosInstance } from 'axios';
 import { HttpStatusCode } from 'jami-web-common';
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import ProcessingRequest from '../components/ProcessingRequest';
+import { createOptionalContext } from '../hooks/createOptionalContext';
 import { Account } from '../models/Account';
 import { apiUrl } from '../utils/constants';
 import { WithChildren } from '../utils/utils';
@@ -33,7 +34,9 @@
   axiosInstance: AxiosInstance;
 }
 
-const AuthContext = createContext<IAuthContext | undefined>(undefined);
+const optionalAuthContext = createOptionalContext<IAuthContext>('AuthContext');
+const AuthContext = optionalAuthContext.Context;
+export const useAuthContext = optionalAuthContext.useOptionalContext;
 
 export default ({ children }: WithChildren) => {
   const [token, setToken] = useState<string | undefined>();
@@ -109,13 +112,3 @@
     </AuthContext.Provider>
   );
 };
-
-export function useAuthContext(dontThrowIfUndefined: true): IAuthContext | undefined;
-export function useAuthContext(): IAuthContext;
-export function useAuthContext(dontThrowIfUndefined?: true) {
-  const authContext = useContext(AuthContext);
-  if (!authContext && !dontThrowIfUndefined) {
-    throw new Error('AuthContext is not provided');
-  }
-  return authContext;
-}
diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index 13e0d24..39aad07 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -25,7 +25,7 @@
 import { CallRouteParams } from '../router';
 import { callTimeoutMs } from '../utils/constants';
 import { SetState, WithChildren } from '../utils/utils';
-import { ConversationContext } from './ConversationProvider';
+import { useConversationContext } from './ConversationProvider';
 import { MediaDevicesInfo, MediaInputKind, WebRtcContext } from './WebRtcProvider';
 import { IWebSocketContext, WebSocketContext } from './WebSocketProvider';
 
@@ -124,7 +124,7 @@
   const { state: routeState } = useUrlParams<CallRouteParams>();
   const { localStream, sendWebRtcOffer, iceConnectionState, closeConnection, getMediaDevices, updateLocalStream } =
     useContext(WebRtcContext);
-  const { conversationId, conversation } = useContext(ConversationContext);
+  const { conversationId, conversation } = useConversationContext();
   const navigate = useNavigate();
 
   const [mediaDevices, setMediaDevices] = useState(defaultCallContext.mediaDevices);
diff --git a/client/src/contexts/ConversationProvider.tsx b/client/src/contexts/ConversationProvider.tsx
index 25137c0..b927278 100644
--- a/client/src/contexts/ConversationProvider.tsx
+++ b/client/src/contexts/ConversationProvider.tsx
@@ -16,9 +16,10 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { ConversationView, WebSocketMessageType } from 'jami-web-common';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import LoadingPage from '../components/Loading';
+import { createOptionalContext } from '../hooks/createOptionalContext';
 import { useUrlParams } from '../hooks/useUrlParams';
 import { Conversation } from '../models/Conversation';
 import { ConversationRouteParams } from '../router';
@@ -27,12 +28,14 @@
 import { useAuthContext } from './AuthProvider';
 import { WebSocketContext } from './WebSocketProvider';
 
-interface IConversationProvider {
+interface IConversationContext {
   conversationId: string;
   conversation: Conversation;
 }
 
-export const ConversationContext = createContext<IConversationProvider>(undefined!);
+const optionalConversationContext = createOptionalContext<IConversationContext>('ConversationContext');
+const ConversationContext = optionalConversationContext.Context;
+export const useConversationContext = optionalConversationContext.useOptionalContext;
 
 export default ({ children }: WithChildren) => {
   const {
diff --git a/client/src/contexts/WebRtcProvider.tsx b/client/src/contexts/WebRtcProvider.tsx
index 4cd6263..59999b9 100644
--- a/client/src/contexts/WebRtcProvider.tsx
+++ b/client/src/contexts/WebRtcProvider.tsx
@@ -22,7 +22,7 @@
 import LoadingPage from '../components/Loading';
 import { WithChildren } from '../utils/utils';
 import { useAuthContext } from './AuthProvider';
-import { ConversationContext } from './ConversationProvider';
+import { useConversationContext } from './ConversationProvider';
 import { IWebSocketContext, WebSocketContext } from './WebSocketProvider';
 
 export type MediaDevicesInfo = Record<MediaDeviceKind, MediaDeviceInfo[]>;
@@ -99,7 +99,7 @@
   webRtcConnection: RTCPeerConnection;
   webSocket: IWebSocketContext;
 }) => {
-  const { conversation, conversationId } = useContext(ConversationContext);
+  const { conversation, conversationId } = useConversationContext();
   const [localStream, setLocalStream] = useState<MediaStream>();
   const [remoteStreams, setRemoteStreams] = useState<readonly MediaStream[]>();
   const [iceConnectionState, setIceConnectionState] = useState<RTCIceConnectionState | undefined>();