diff --git a/src/App.tsx b/src/App.tsx
index 5db5ad2542f0b886448da1c63219b974043dc6ae..a7d52357308f11b8680e37247835dfc19f721792 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { ClientContextProvider } from './context';
 import { UserStateProvider } from './context/UserContext';
 import Routes from './Routes';
 
 function App(): React.ReactElement {
   return (
-    <UserStateProvider>
-      <Router>
-        <Routes />
-      </Router>
-    </UserStateProvider>
+    <ClientContextProvider>
+      <UserStateProvider>
+        <Router>
+          <Routes />
+        </Router>
+      </UserStateProvider>
+    </ClientContextProvider>
   );
 }
 
diff --git a/src/hooks/useLogin.ts b/src/hooks/useLogin.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b7e823ab9ef3c89162c2a1864915f346f79cb1c
--- /dev/null
+++ b/src/hooks/useLogin.ts
@@ -0,0 +1,8 @@
+import { useMutation } from 'react-query';
+import useClientContext from './useClientContext';
+
+export default function useLogin() {
+  const client = useClientContext();
+
+  return useMutation('login', client.client.auth.login);
+}