diff --git a/client/chakra-client/package.json b/client/chakra-client/package.json
index 847a4b8..88a043c 100644
--- a/client/chakra-client/package.json
+++ b/client/chakra-client/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.4",
     "@babel/runtime": "^7.23.2",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
diff --git a/client/chakra-client/src/App.js b/client/chakra-client/src/App.js
index 6dbcddc..196ba45 100644
--- a/client/chakra-client/src/App.js
+++ b/client/chakra-client/src/App.js
@@ -22,6 +22,9 @@ import Profile from "./components/Authentication/Profile";
 //
 import DesktopOnly from "./components/DesktopOnly";
 import ProtectedRoute from "./components/utils/ProtectedRoute";
+//
+import LoginButton from "./components/Authentication/LoginButton";
+import LogoutButton from "./components/Authentication/LogoutButton";
 
 function App() {
   const [isLargerThanMD] = useMediaQuery("(min-width: 48em)");
@@ -98,7 +101,7 @@ function App() {
               />
               <Route path="/signup" exact element={<SignUp />} />
               <Route path="/signin" exact element={<SignIn />} />
-              <Route path="/logout" element={<Logout />} />
+              <Route path="/logout" element={<LogoutButton />} />
             </Routes>
           </Router>
         ) : (
diff --git a/client/chakra-client/src/Pages/languages/Cpp.jsx b/client/chakra-client/src/Pages/languages/Cpp.jsx
index 72e7ab4..11e7785 100644
--- a/client/chakra-client/src/Pages/languages/Cpp.jsx
+++ b/client/chakra-client/src/Pages/languages/Cpp.jsx
@@ -57,8 +57,8 @@ export default function Cpp() {
   const toast = useToast();
   useEffect(() => {
     // On component mount, read old data and paste it in the textarea
-    // setCode(readFromDB(user.id));
-    readFromDB(user.id, filename)
+    // setCode(readFromDB(user.nickname));
+    readFromDB(user.nickname, filename)
       .then((data) => {
         toast({
           title: "Progress Retrieved 📚",
@@ -81,7 +81,7 @@ export default function Cpp() {
           isClosable: true,
         });
       });
-    // setCode(`${readFromDB(user.id)}`);
+    // setCode(`${readFromDB(user.nickname)}`);
   }, []);
 
   const navigate = useNavigate();
@@ -171,7 +171,7 @@ export default function Cpp() {
   //running code
   async function runCode() {
     //saving code to db
-    saveToDB(user.id, code, filename)
+    saveToDB(user.nickname, code, filename)
       .then((message) => {
         toast({
           title: "✅Saved💾",
@@ -324,7 +324,7 @@ export default function Cpp() {
         {/* //Change file name prompt */}
         {isChangeFileNameOpen && (
           <ChangeFileName
-            uid={user.id}
+            uid={user.nickname}
             currentName={filename}
             onClose={closePrompt}
             onFileNameChanged={() => {
diff --git a/client/chakra-client/src/Pages/languages/Cs.jsx b/client/chakra-client/src/Pages/languages/Cs.jsx
index 1e3297d..bfadf36 100644
--- a/client/chakra-client/src/Pages/languages/Cs.jsx
+++ b/client/chakra-client/src/Pages/languages/Cs.jsx
@@ -57,8 +57,8 @@ export default function Cs() {
   const toast = useToast();
   useEffect(() => {
     // On component mount, read old data and paste it in the textarea
-    // setCode(readFromDB(user.id));
-    readFromDB(user.id, filename)
+    // setCode(readFromDB(user.nickname));
+    readFromDB(user.nickname, filename)
       .then((data) => {
         toast({
           title: "Progress Retrieved 📚",
@@ -81,7 +81,7 @@ export default function Cs() {
           isClosable: true,
         });
       });
-    // setCode(`${readFromDB(user.id)}`);
+    // setCode(`${readFromDB(user.nickname)}`);
   }, []);
 
   const navigate = useNavigate();
@@ -168,7 +168,7 @@ export default function Cs() {
   //running code
   async function runCode() {
     //saving code to db
-    saveToDB(user.id, code, filename)
+    saveToDB(user.nickname, code, filename)
       .then((message) => {
         toast({
           title: "✅Saved💾",
@@ -323,7 +323,7 @@ export default function Cs() {
         {/* //Change file name prompt */}
         {isChangeFileNameOpen && (
           <ChangeFileName
-            uid={user.id}
+            uid={user.nickname}
             currentName={filename}
             onClose={closePrompt}
             onFileNameChanged={() => {
diff --git a/client/chakra-client/src/Pages/languages/Java.jsx b/client/chakra-client/src/Pages/languages/Java.jsx
index 28ab93d..e9ef047 100644
--- a/client/chakra-client/src/Pages/languages/Java.jsx
+++ b/client/chakra-client/src/Pages/languages/Java.jsx
@@ -57,8 +57,8 @@ export default function Java() {
   const toast = useToast();
   useEffect(() => {
     // On component mount, read old data and paste it in the textarea
-    // setCode(readFromDB(user.id));
-    readFromDB(user.id, filename)
+    // setCode(readFromDB(user.nickname));
+    readFromDB(user.nickname, filename)
       .then((data) => {
         toast({
           title: "Progress Retrieved 📚",
@@ -81,7 +81,7 @@ export default function Java() {
           isClosable: true,
         });
       });
-    // setCode(`${readFromDB(user.id)}`);
+    // setCode(`${readFromDB(user.nickname)}`);
   }, []);
 
   const navigate = useNavigate();
@@ -166,7 +166,7 @@ export default function Java() {
   //running code
   async function runCode() {
     //saving code to db
-    saveToDB(user.id, code, filename)
+    saveToDB(user.nickname, code, filename)
       .then((message) => {
         toast({
           title: "✅Saved💾",
@@ -321,7 +321,7 @@ export default function Java() {
         {/* //Change file name prompt */}
         {isChangeFileNameOpen && (
           <ChangeFileName
-            uid={user.id}
+            uid={user.nickname}
             currentName={filename}
             onClose={closePrompt}
             onFileNameChanged={() => {
diff --git a/client/chakra-client/src/Pages/languages/Python.jsx b/client/chakra-client/src/Pages/languages/Python.jsx
index 052f861..1eca6f3 100644
--- a/client/chakra-client/src/Pages/languages/Python.jsx
+++ b/client/chakra-client/src/Pages/languages/Python.jsx
@@ -57,8 +57,8 @@ export default function Python() {
   const toast = useToast();
   useEffect(() => {
     // On component mount, read old data and paste it in the textarea
-    // setCode(readFromDB(user.id));
-    readFromDB(user.id, filename)
+    // setCode(readFromDB(user.nickname));
+    readFromDB(user.nickname, filename)
       .then((data) => {
         toast({
           title: "Progress Retrieved 📚",
@@ -81,7 +81,7 @@ export default function Python() {
           isClosable: true,
         });
       });
-    // setCode(`${readFromDB(user.id)}`);
+    // setCode(`${readFromDB(user.nickname)}`);
   }, []);
 
   const navigate = useNavigate();
@@ -160,7 +160,7 @@ export default function Python() {
   //running code
   async function runCode() {
     //saving code to db
-    saveToDB(user.id, code, filename)
+    saveToDB(user.nickname, code, filename)
       .then((message) => {
         toast({
           title: "✅Saved💾",
@@ -313,7 +313,7 @@ export default function Python() {
         {/* //Change file name prompt */}
         {isChangeFileNameOpen && (
           <ChangeFileName
-            uid={user.id}
+            uid={user.nickname}
             currentName={filename}
             onClose={closePrompt}
             onFileNameChanged={() => {
diff --git a/client/chakra-client/src/components/Authentication/LoginButton.jsx b/client/chakra-client/src/components/Authentication/LoginButton.jsx
new file mode 100644
index 0000000..5736dbe
--- /dev/null
+++ b/client/chakra-client/src/components/Authentication/LoginButton.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { useAuth0 } from '@auth0/auth0-react'
+
+export default function LoginButton() {
+    const { loginWithRedirect } = useAuth0()
+  return (
+    <button 
+    onClick={() => loginWithRedirect()}
+    >
+        Login
+    </button>
+  )
+}
+
diff --git a/client/chakra-client/src/components/Authentication/LogoutButton.jsx b/client/chakra-client/src/components/Authentication/LogoutButton.jsx
new file mode 100644
index 0000000..38d54d8
--- /dev/null
+++ b/client/chakra-client/src/components/Authentication/LogoutButton.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { useAuth0 } from '@auth0/auth0-react'
+
+export default function LogoutButton() {
+    const { logout } = useAuth0()
+  return (
+    <button 
+    onClick={() => logout()}
+    >
+        Logout
+    </button>
+  )
+}
diff --git a/client/chakra-client/src/components/Authentication/Profile.jsx b/client/chakra-client/src/components/Authentication/Profile.jsx
index e92611a..87aa303 100644
--- a/client/chakra-client/src/components/Authentication/Profile.jsx
+++ b/client/chakra-client/src/components/Authentication/Profile.jsx
@@ -24,14 +24,14 @@ export default function Profile() {
 
   const [totalCodes, setTotalCodes] = useState(0);
   useEffect(() => {
-    getUserFiles(user.id)
+    getUserFiles(user.nickname)
       .then((files) => {
         setTotalCodes(files.length);
       })
       .catch((error) => {
         console.error(error);
       });
-  }, [user.id]);
+  }, [user.nickname]);
 
   return (
     <Center py={6}>
@@ -55,7 +55,7 @@ export default function Profile() {
         <Flex justify={"center"} mt={-12}>
           <Avatar
             size={"xl"}
-            src={`${user.photos[0].value}`}
+            src={`${user.picture}`}
             css={{
               border: "2px solid white",
             }}
@@ -65,9 +65,9 @@ export default function Profile() {
         <Box p={6}>
           <Stack spacing={0} align={"center"} mb={5}>
             <Heading fontSize={"2xl"} fontWeight={500} fontFamily={"body"}>
-              {user.displayName}
+              {user.name}
             </Heading>
-            <Text color={"gray.500"}>{user.provider}</Text>
+            <Text color={"gray.500"}>{user.email}</Text>
           </Stack>
 
           <Stack direction={"row"} justify={"center"} spacing={6}>
@@ -75,7 +75,7 @@ export default function Profile() {
               <Text fontSize={"md"} color={"gray.500"}>
                 User Id-
               </Text>
-              <Text fontWeight={600}>{user.id.substring(0, 10)}</Text>
+              <Text fontWeight={600}>{user.nickname}</Text>
             </Stack>
             <Stack spacing={0} align={"center"}>
               <Text fontSize={"md"} color={"gray.500"}>
diff --git a/client/chakra-client/src/components/Authentication/SignIn.jsx b/client/chakra-client/src/components/Authentication/SignIn.jsx
index 4306eec..2b2762d 100644
--- a/client/chakra-client/src/components/Authentication/SignIn.jsx
+++ b/client/chakra-client/src/components/Authentication/SignIn.jsx
@@ -17,6 +17,7 @@ import {
 //
 import ForgotPasswordForm from "./ForgotPassword";
 import Login from "./Login";
+import LoginButton from "./Login";
 
 export default function SignIn() {
   const [showForgotPassword, setShowForgotPassword] = useState(false);
@@ -59,9 +60,10 @@ export default function SignIn() {
                 Sign in
               </Button>
               <Divider />
-              <Button colorScheme="pink" variant="solid" onClick={Login}>
+              {/* <Button colorScheme="pink" variant="solid" onClick={Login}>
                 Google
-              </Button>
+              </Button> */}
+              <LoginButton/>
             </Stack>
           </Stack>
         </Flex>
diff --git a/client/chakra-client/src/components/Navbar.jsx b/client/chakra-client/src/components/Navbar.jsx
index 6624ce5..ad6a0da 100644
--- a/client/chakra-client/src/components/Navbar.jsx
+++ b/client/chakra-client/src/components/Navbar.jsx
@@ -28,6 +28,8 @@ import socLogo from "../assets/images/soc_logo.png";
 //
 import Login from "./Authentication/Login";
 import Logout from "./Authentication/Logout";
+import LoginButton from "./Authentication/LoginButton";
+import LogoutButton from "./Authentication/LogoutButton";
 
 const NavLink = (props) => {
   const { children } = props;
@@ -83,16 +85,16 @@ export default function Navbar() {
                     cursor={"pointer"}
                     minW={0}
                   >
-                    <Avatar size={"sm"} src={`${user.photos[0].value}`} />
+                    <Avatar size={"sm"} src={`${user.picture}`} />
                   </MenuButton>
                   <MenuList alignItems={"center"}>
                     <br />
                     <Center>
-                      <Avatar size={"lg"} src={`${user.photos[0].value}`} />
+                      <Avatar size={"lg"} src={`${user.picture}`} />
                     </Center>
                     <br />
                     <Center>
-                      <p>{user.displayName}</p>
+                      <p>{user.name}</p>
                     </Center>
                     <br />
                     <MenuDivider />
@@ -102,23 +104,20 @@ export default function Navbar() {
                     <MenuItem as={Link} to={"/dashboard"}>
                       Dashboard
                     </MenuItem>
-                    <MenuItem
-                      onClick={() => {
-                        Logout();
-                      }}
-                    >
-                      Logout
+                    <MenuItem>
+                      <LogoutButton/>
                     </MenuItem>
                   </MenuList>
                 </Menu>
               ) : (
-                <Button
-                  onClick={() => {
-                    Login();
-                  }}
-                >
-                  Login
-                </Button>
+                // <Button
+                //   onClick={() => {
+                //     Login();
+                //   }}
+                // >
+                //   Login
+                // </Button>
+                <LoginButton/>
               )}
             </Stack>
           </Flex>
diff --git a/client/chakra-client/src/components/QuickAccess/Sidebar.jsx b/client/chakra-client/src/components/QuickAccess/Sidebar.jsx
index a92f5ea..f66715b 100644
--- a/client/chakra-client/src/components/QuickAccess/Sidebar.jsx
+++ b/client/chakra-client/src/components/QuickAccess/Sidebar.jsx
@@ -13,6 +13,7 @@ import {
   Image,
   Text,
 } from "@chakra-ui/react";
+import LogoutButton from "../Authentication/LogoutButton";
 
 //sample user data that will come from backend
 let name = "Aashtosh Soni";
@@ -53,13 +54,10 @@ function SidebarContent({ onClick }) {
         </Button>
       </HStack>
       <Button
-        onClick={() => {
-          navigate("/logout");
-        }}
         style={{ backgroundColor: "red" }}
         w="100%"
       >
-        Logout
+<LogoutButton/>
       </Button>
     </VStack>
   );
diff --git a/client/chakra-client/src/components/Sidebar.jsx b/client/chakra-client/src/components/Sidebar.jsx
index ea8d827..6083917 100644
--- a/client/chakra-client/src/components/Sidebar.jsx
+++ b/client/chakra-client/src/components/Sidebar.jsx
@@ -103,7 +103,7 @@ export default function Sidebar() {
   const [formData, setFormData] = useState({
     fileName: "",
     language: "",
-    user: user.id,
+    user: user.nickname,
   });
 
   const [isLoading, setIsLoading] = useState(false);
@@ -137,7 +137,7 @@ export default function Sidebar() {
             `File created: ${formData.fileName}.${formData.language}`
           );
           onClose();
-          let red = `/${formData.language}/${user.id}/${formData.fileName}.${formData.language}`;
+          let red = `/${formData.language}/${user.nickname}/${formData.fileName}.${formData.language}`;
           console.log(red);
           navigate(red);
         }, 1000);
diff --git a/client/chakra-client/src/components/utils/ProtectedRoute.jsx b/client/chakra-client/src/components/utils/ProtectedRoute.jsx
index e24130e..84bee81 100644
--- a/client/chakra-client/src/components/utils/ProtectedRoute.jsx
+++ b/client/chakra-client/src/components/utils/ProtectedRoute.jsx
@@ -1,14 +1,20 @@
 import { useRecoilValue } from "recoil";
 import { userState } from "../../state";
 import { Navigate, useLocation } from "react-router-dom";
+import { useAuth0 } from "@auth0/auth0-react"; // Assuming you're using Auth0
 
 export default function ProtectedRoute({ children }) {
-  const user = useRecoilValue(userState);
+  const { user, isAuthenticated, isLoading } = useAuth0();
   const location = useLocation();
 
-  if (user) {
+  if (isLoading) {
+    console.log("when loading", user)
+    return <div>Loading...</div>;
+  }
+
+  if (isAuthenticated) {
     return children;
   } else {
     return <Navigate to="/signin" state={{ from: location }} replace />;
   }
-}
+}
\ No newline at end of file
diff --git a/client/chakra-client/src/index.js b/client/chakra-client/src/index.js
index 1adc8f5..648e4df 100644
--- a/client/chakra-client/src/index.js
+++ b/client/chakra-client/src/index.js
@@ -1,16 +1,22 @@
-import React, { StrictMode } from "react";
+import React from "react";
 import * as ReactDOM from "react-dom/client";
 //
 import { ColorModeScript } from "@chakra-ui/react";
 //
+import { Auth0Provider } from "@auth0/auth0-react";
+//
 import App from "./App.js";
 
 const container = document.getElementById("root");
 const root = ReactDOM.createRoot(container);
 
 root.render(
-  <StrictMode>
+  <Auth0Provider
+  domain={process.env.REACT_APP_AUTH0_DOMAIN}
+  clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
+  redirectUri={window.location.origin}
+  >
     <ColorModeScript />
     <App />
-  </StrictMode>
+  </Auth0Provider>
 );
diff --git a/client/chakra-client/src/layouts/Dashboard.jsx b/client/chakra-client/src/layouts/Dashboard.jsx
index ef6d947..54bc7e2 100644
--- a/client/chakra-client/src/layouts/Dashboard.jsx
+++ b/client/chakra-client/src/layouts/Dashboard.jsx
@@ -139,12 +139,14 @@ export default function Dashboard() {
 
   useEffect(() => {
     const fetchUserFiles = async () => {
-      const files = await getUserFiles(user.id);
+      const files = await getUserFiles(user.nickname);
       setUserFiles(files);
+      console.log(user.nickname)
+      console.log(files)
     };
 
     fetchUserFiles();
-  }, [user.id]);
+  }, [user.nickname]);
 
   useEffect(() => {
     const newUser = userFiles.some((file) => file.filename === "New User");
@@ -187,7 +189,7 @@ export default function Dashboard() {
                       </Center>
                     ) : (
                       <CodeFile
-                        user={user.id}
+                        user={user.nickname}
                         key={file.filename}
                         fileName={file.filename}
                         lastOpened={moment(file.timestamp).fromNow()}
diff --git a/client/chakra-client/src/layouts/HomePage.jsx b/client/chakra-client/src/layouts/HomePage.jsx
index 728c74a..26437a4 100644
--- a/client/chakra-client/src/layouts/HomePage.jsx
+++ b/client/chakra-client/src/layouts/HomePage.jsx
@@ -5,6 +5,8 @@ import { useRecoilState } from "recoil";
 import { userState } from "../state";
 import { Link, useNavigate } from "react-router-dom";
 //
+import { useAuth0 } from "@auth0/auth0-react";
+//
 import {
   Avatar,
   Box,
@@ -298,34 +300,41 @@ const Footer = () => {
 };
 
 export default function HomePage() {
-  const [user, setUser] = useRecoilState(userState);
+  const [, setUser] = useRecoilState(userState);
   const colorMode = useColorMode();
   const navigate = useNavigate();
+  const { user, isAuthenticated, isLoading } = useAuth0();
+
+  // console.log("userO", user);
+  console.log("isAuthenticated", isAuthenticated);
+  console.log("user", user);
+  setUser(user);
+
 
-  useEffect(() => {
-    const getUser = () => {
-      fetch("https://socbackend.centralindia.cloudapp.azure.com/auth/login/success", {
-        method: "GET",
-        credentials: "include",
-        headers: {
-          "Accept": "application/json",
-          "Content-Type": "application/json",
-          //"Access-Control-Allow-Credentials": true,
-        },
-      })
-        .then((response) => {
-          if (response.status === 200) return response.json();
-          throw new Error("authentication has been failed!");
-        })
-        .then((resObject) => {
-          setUser(resObject.user);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    };
-    getUser();
-  }, []);
+  // useEffect(() => {
+  //   const getUser = () => {
+  //     fetch("https://socbackend.centralindia.cloudapp.azure.com/auth/login/success", {
+  //       method: "GET",
+  //       credentials: "include",
+  //       headers: {
+  //         "Accept": "application/json",
+  //         "Content-Type": "application/json",
+  //         //"Access-Control-Allow-Credentials": true,
+  //       },
+  //     })
+  //       .then((response) => {
+  //         if (response.status === 200) return response.json();
+  //         throw new Error("authentication has been failed!");
+  //       })
+  //       .then((resObject) => {
+  //         setUser(resObject.user);
+  //       })
+  //       .catch((err) => {
+  //         console.log(err);
+  //       });
+  //   };
+  //   getUser();
+  // }, []);
 
   // const heightt = window.innerHeight - 900;
   return (