From 9163bc4e2ec424052bb11cbe9bc2421d5e1f7a47 Mon Sep 17 00:00:00 2001 From: Aashutosh soni Date: Fri, 12 Jan 2024 03:19:02 +0530 Subject: [PATCH] added Auth0 --- client/chakra-client/package.json | 1 + client/chakra-client/src/App.js | 5 +- .../chakra-client/src/Pages/languages/Cpp.jsx | 10 ++-- .../chakra-client/src/Pages/languages/Cs.jsx | 10 ++-- .../src/Pages/languages/Java.jsx | 10 ++-- .../src/Pages/languages/Python.jsx | 10 ++-- .../components/Authentication/LoginButton.jsx | 14 +++++ .../Authentication/LogoutButton.jsx | 13 ++++ .../src/components/Authentication/Profile.jsx | 12 ++-- .../src/components/Authentication/SignIn.jsx | 6 +- .../chakra-client/src/components/Navbar.jsx | 31 +++++----- .../src/components/QuickAccess/Sidebar.jsx | 6 +- .../chakra-client/src/components/Sidebar.jsx | 4 +- .../src/components/utils/ProtectedRoute.jsx | 12 +++- client/chakra-client/src/index.js | 12 +++- .../chakra-client/src/layouts/Dashboard.jsx | 8 ++- client/chakra-client/src/layouts/HomePage.jsx | 59 +++++++++++-------- 17 files changed, 138 insertions(+), 85 deletions(-) create mode 100644 client/chakra-client/src/components/Authentication/LoginButton.jsx create mode 100644 client/chakra-client/src/components/Authentication/LogoutButton.jsx 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() { /> } /> } /> - } /> + } /> ) : ( 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 && ( { 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 && ( { 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 && ( { 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 && ( { 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 ( + + ) +} + 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 ( + + ) +} 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 (
@@ -55,7 +55,7 @@ export default function Profile() { - {user.displayName} + {user.name} - {user.provider} + {user.email} @@ -75,7 +75,7 @@ export default function Profile() { User Id- - {user.id.substring(0, 10)} + {user.nickname} 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 - + */} + 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} > - +
- +

-

{user.displayName}

+

{user.name}


@@ -102,23 +104,20 @@ export default function Navbar() { Dashboard - { - Logout(); - }} - > - Logout + + ) : ( - + // + )} 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 }) { ); 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
Loading...
; + } + + if (isAuthenticated) { return children; } else { return ; } -} +} \ 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( - + - + ); 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() {
) : ( { }; 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 (