added Auth0

ashutosh7i · Jan 11, 2024 · 9163bc4 · 9163bc4
1 parent 483582e
commit 9163bc4
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,17 +65,17 @@ 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}>
             <Stack spacing={0} align={"center"}>
               <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
@@ -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
@@ -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
@@ -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
@@ -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);