diff --git a/package-lock.json b/package-lock.json index 17d697c..7753be4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "my-app", "version": "0.1.0", "dependencies": { + "@azure/msal-browser": "^3.11.1", + "@azure/msal-react": "^2.0.14", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@mui/icons-material": "^5.8.4", @@ -15,6 +17,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", @@ -36,6 +39,37 @@ "node": ">=6.0.0" } }, + "node_modules/@azure/msal-browser": { + "version": "3.11.1", + "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.11.1.tgz", + "integrity": "sha512-tZFJnP5ZpgkmazSriEDW+Xl3/4WI823uhnYhWCHPkGywFWEZoPA5VkiCK8x4x8ECXp3mGr5qEI82MU43PBiaKA==", + "dependencies": { + "@azure/msal-common": "14.8.1" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@azure/msal-common": { + "version": "14.8.1", + "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.8.1.tgz", + "integrity": "sha512-9HfBMDTIgtFFkils+o6gO/aGEoLLuc4z+QLLfhy/T1bTNPiVsX/9CjaBPMZGnMltN/IlMkU5SGGNggGh55p5xA==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@azure/msal-react": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-2.0.14.tgz", + "integrity": "sha512-12FcC6e+JRrRI8JMX8KmFNd2s9e41YFDGwuYd9UWpg4AmE+ojBRdYrO0Vau6DuxFq0/+yM1Qa//VTXYV6z5l4g==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@azure/msal-browser": "^3.11.1", + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", @@ -5320,8 +5354,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/at-least-node": { "version": "1.0.0", @@ -5385,6 +5418,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -6221,7 +6277,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -7046,7 +7101,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true, "engines": { "node": ">=0.4.0" } @@ -8895,10 +8949,9 @@ "dev": true }, "node_modules/follow-redirects": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", - "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==", - "dev": true, + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "funding": [ { "type": "individual", @@ -13124,7 +13177,6 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -13133,7 +13185,6 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "dependencies": { "mime-db": "1.52.0" }, @@ -15357,6 +15408,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -18788,6 +18844,25 @@ "@jridgewell/trace-mapping": "^0.3.9" } }, + "@azure/msal-browser": { + "version": "3.11.1", + "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.11.1.tgz", + "integrity": "sha512-tZFJnP5ZpgkmazSriEDW+Xl3/4WI823uhnYhWCHPkGywFWEZoPA5VkiCK8x4x8ECXp3mGr5qEI82MU43PBiaKA==", + "requires": { + "@azure/msal-common": "14.8.1" + } + }, + "@azure/msal-common": { + "version": "14.8.1", + "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.8.1.tgz", + "integrity": "sha512-9HfBMDTIgtFFkils+o6gO/aGEoLLuc4z+QLLfhy/T1bTNPiVsX/9CjaBPMZGnMltN/IlMkU5SGGNggGh55p5xA==" + }, + "@azure/msal-react": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-2.0.14.tgz", + "integrity": "sha512-12FcC6e+JRrRI8JMX8KmFNd2s9e41YFDGwuYd9UWpg4AmE+ojBRdYrO0Vau6DuxFq0/+yM1Qa//VTXYV6z5l4g==", + "requires": {} + }, "@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", @@ -22526,8 +22601,7 @@ "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "at-least-node": { "version": "1.0.0", @@ -22560,6 +22634,28 @@ "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==", "dev": true }, + "axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "requires": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -23219,7 +23315,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "requires": { "delayed-stream": "~1.0.0" } @@ -23816,8 +23911,7 @@ "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" }, "depd": { "version": "2.0.0", @@ -25230,10 +25324,9 @@ "dev": true }, "follow-redirects": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", - "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==", - "dev": true + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==" }, "fork-ts-checker-webpack-plugin": { "version": "6.5.2", @@ -28347,14 +28440,12 @@ "mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", - "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" }, "mime-types": { "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "requires": { "mime-db": "1.52.0" } @@ -29817,6 +29908,11 @@ } } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index b378b75..ebc7461 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "@azure/msal-browser": "^3.11.1", + "@azure/msal-react": "^2.0.14", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@mui/icons-material": "^5.8.4", @@ -10,6 +12,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", diff --git a/src/App.js b/src/App.js index e05c1cd..1ed0472 100644 --- a/src/App.js +++ b/src/App.js @@ -3,25 +3,99 @@ import { PageLayout } from "./components/PageLayout"; import { Routes, Route } from "react-router-dom"; import { Home } from "./pages/Home"; -import { Profile } from "./pages/Profile"; - -function App() { - return ( - - - - - - ); -} +import Employee, { Profile } from "./pages/Employee"; + +import { EventType } from "@azure/msal-browser"; +import { MsalProvider, useMsal } from "@azure/msal-react"; +import { useEffect, useState } from "react"; +import axios from "axios"; + +const axiosApi = axios.create({ + baseURL: "http://localhost:5011", + headers: { "Content-Type": "application/json" }, +}); + +function App({ msalInstance }) { + const { accounts } = useMsal(); + + useEffect(() => { + const callbackID = msalInstance.addEventCallback((e) => { + if (e.eventType === EventType.LOGIN_SUCCESS) { + msalInstance.setActiveAccount(e.payload.account); + } + }); + + return () => msalInstance.removeEventCallback(callbackID); + }, [msalInstance]); -const Pages = () => { - return ( - - } /> - } /> - + useEffect(() => { + const accessTokenRequest = { + scopes: ["api://cba85205-493e-4608-9ba2-1c4bd8b73702/ReadUserDataScope"], + account: accounts[0], + }; + + //Request interceptor + axiosApi.interceptors.request.use(async (config) => { + const accessTokenResponse = await msalInstance.acquireTokenSilent( + accessTokenRequest + ); + + console.log(accessTokenResponse, "accessTokenResponse"); + if (accessTokenResponse?.accessToken) { + config.headers[ + "Authorization" + ] = `Bearer ${accessTokenResponse.accessToken}`; + } + + return config; + }); + + //Response interceptor + axiosApi?.interceptors?.response?.use( + (response) => { + return response; + }, + (error) => { + const originalRequest = error.config; + //If i have accessToken and The access token is expired + if (error?.response?.status === 401) { + //Request for another accessToken + msalInstance + .acquireTokenSilent(accessTokenRequest) + .then((accessTokenResponse) => { + let accessToken = accessTokenResponse.accessToken; + axios.defaults.headers.common["Authorization"] = + "Bearer " + accessToken; + return originalRequest; + }) + .catch((e) => { + console.log(e); + }); + } + + return Promise.reject(error); + } ); + }, [accounts, msalInstance]); + + return ( + + + + + + + + ); } +const Pages = ({ axiosApi }) => { + return ( + + } /> + } /> + + ); +}; + export default App; diff --git a/src/components/Form.jsx b/src/components/Form.jsx new file mode 100644 index 0000000..092cf74 --- /dev/null +++ b/src/components/Form.jsx @@ -0,0 +1,67 @@ +import React, { useEffect, useState } from "react"; +import { fetchData } from "../fetch"; + +const Form = ({ axiosApi }) => { + const [formData, setFormData] = useState({ + EmployeeName: "", + }); + + const [employee, setEmployee] = useState(null); + + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData({ + ...formData, + [name]: value, + }); + }; + + const postEmployees = async () => { + console.log("Button clicked"); + try { + const response = await axiosApi.post("/Employee", { + firstName: formData.EmployeeName, + }); + + if (response.status === 200) { + setEmployee(response?.data); + } + } catch (e) { + console.log(e); + } + }; + return ( +
+
+

Fill in the employee form

+
+ + +
+ + + {/* */} +
+ +
+

Employees data

+ {employee?.map((employee, index) => { + return
{employee?.firstName}
; + })} +
+
+ ); +}; + +export default Form; diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 2370e69..f065081 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -3,27 +3,35 @@ import Toolbar from "@mui/material/Toolbar"; import Link from "@mui/material/Link"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; -import { WelcomeName } from "./WelcomeName"; import { SignInButton } from "./SignInButton"; import { SignOutButton } from "./SignOutButton"; import { Link as RouterLink } from "react-router-dom"; +import { useIsAuthenticated } from "@azure/msal-react"; + const NavBar = () => { - return ( -
- - - - Microsoft identity platform - - - - - - - -
- ); + const isAuthenticated = useIsAuthenticated(); + return ( +
+ + + + + Microsoft identity platform + + + + {isAuthenticated && ( + + )} + + {isAuthenticated ? : } + + +
+ ); }; export default NavBar; \ No newline at end of file diff --git a/src/components/PageLayout.jsx b/src/components/PageLayout.jsx index 5cc0a16..fd34b1f 100644 --- a/src/components/PageLayout.jsx +++ b/src/components/PageLayout.jsx @@ -1,15 +1,10 @@ -import Typography from "@mui/material/Typography"; import NavBar from "./NavBar"; export const PageLayout = (props) => { return ( <> -
- -
Welcome to the Microsoft Authentication Library For React Quickstart
- -
+ {props.children} ); diff --git a/src/components/ProfileData.jsx b/src/components/ProfileData.jsx deleted file mode 100644 index 90bf2b9..0000000 --- a/src/components/ProfileData.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from "react"; -import List from "@mui/material/List"; -import ListItem from "@mui/material/ListItem"; -import ListItemText from "@mui/material/ListItemText"; -import ListItemAvatar from "@mui/material/ListItemAvatar"; -import Avatar from "@mui/material/Avatar"; -import PersonIcon from '@mui/icons-material/Person'; -import WorkIcon from "@mui/icons-material/Work"; -import MailIcon from '@mui/icons-material/Mail'; -import PhoneIcon from '@mui/icons-material/Phone'; -import LocationOnIcon from '@mui/icons-material/LocationOn'; - -export const ProfileData = ({ graphData }) => { - return ( - - - - - - - - ); -}; - -const NameListItem = ({ name }) => ( - - - - - - - - -); - -const JobTitleListItem = ({ jobTitle }) => ( - - - - - - - - -); - -const MailListItem = ({ mail }) => ( - - - - - - - - -); - -const PhoneListItem = ({ phone }) => ( - - - - - - - - -); - -const LocationListItem = ({ location }) => ( - - - - - - - - -); diff --git a/src/components/SignInButton.jsx b/src/components/SignInButton.jsx index ace61d6..867177b 100644 --- a/src/components/SignInButton.jsx +++ b/src/components/SignInButton.jsx @@ -1,7 +1,20 @@ import Button from '@mui/material/Button'; +import { useMsal } from '@azure/msal-react'; + export const SignInButton = () => { + + const { instance } = useMsal(); + + const handleSignIn = () => { + instance.loginRedirect({ + scopes: [ + "api://cba85205-493e-4608-9ba2-1c4bd8b73702/ReadUserDataScope", + ], + }); + }; + return ( - + ) }; \ No newline at end of file diff --git a/src/components/SignOutButton.jsx b/src/components/SignOutButton.jsx index 7be3028..def2d91 100644 --- a/src/components/SignOutButton.jsx +++ b/src/components/SignOutButton.jsx @@ -1,7 +1,17 @@ import Button from '@mui/material/Button'; +import { useMsal } from "@azure/msal-react"; + export const SignOutButton = () => { - return ( - - ) + const { instance } = useMsal(); + + const handleSignOut = () => { + instance.logoutRedirect(); + }; + + return ( + + ); }; \ No newline at end of file diff --git a/src/components/WelcomeName.jsx b/src/components/WelcomeName.jsx deleted file mode 100644 index 2cba637..0000000 --- a/src/components/WelcomeName.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import Typography from "@mui/material/Typography"; - -export const WelcomeName = () => { - return Welcome, user; -}; \ No newline at end of file diff --git a/src/fetch.js b/src/fetch.js new file mode 100644 index 0000000..febaee1 --- /dev/null +++ b/src/fetch.js @@ -0,0 +1,32 @@ +// export const fetchData = async ({ +// method = "POST", +// endpoint, +// accessToken, +// requestData, +// }) => { +// const bearer = `Bearer ${accessToken}`; + +// const options = { +// method: method, +// headers: { +// Authorization: bearer, +// "content-type": "application/json", +// }, +// body: JSON.stringify(requestData), +// }; + +// // console.log(method, endpoint, accessToken, requestData); +// try { +// const resp = await fetch(endpoint, options); +// // console.log(resp.json()); +// resp.json(); +// return; +// } catch (err) { +// console.log(err); +// return; +// } +// }; + + + + diff --git a/src/index.js b/src/index.js index 2b39ee3..e0d2c53 100644 --- a/src/index.js +++ b/src/index.js @@ -8,13 +8,37 @@ import { BrowserRouter } from "react-router-dom"; import App from './App'; +import { EventType, PublicClientApplication } from "@azure/msal-browser"; + +const pca = new PublicClientApplication({ + auth: { + clientId: "cba85205-493e-4608-9ba2-1c4bd8b73702", + authority: + "https://login.microsoftonline.com/b35b51f3-994b-4ff8-85d5-ef6995f6121d", + redirectUri: "/", + }, + // cache: { + // cacheLocation: "sessionStorage", + // }, +}); + +pca.addEventCallback((event) => { + if (event.eventType === EventType.LOGIN_SUCCESS) { + console.log(event); + pca.setActiveAccount(event.payload.account); + } + if (event.eventType === EventType.ACQUIRE_TOKEN_START) { + pca.acquireTokenSilent(event.payload.accessToken) + } +}); + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - - - - - + + + + + + + ); diff --git a/src/pages/Employee.jsx b/src/pages/Employee.jsx new file mode 100644 index 0000000..2c7bf35 --- /dev/null +++ b/src/pages/Employee.jsx @@ -0,0 +1,11 @@ +import Form from "../components/Form"; + +const Employee = ({ axiosApi }) => { + return ( + <> +
+ + ); +}; + +export default Employee diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index c420fb2..06cdf28 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,10 +1,42 @@ import Typography from "@mui/material/Typography"; -export const Home = () => { - return ( - <> - Please sign-in to see your profile information. - You are signed-in. Select profile to call Microsoft Graph. - - ); -} \ No newline at end of file +import { + AuthenticatedTemplate, + UnauthenticatedTemplate, + useMsal, +} from "@azure/msal-react"; +import { useEffect, useState } from "react"; + +export const Home = ({ axiosApi }) => { + const { instance } = useMsal(); + const [userName, setUserName] = useState(""); + + useEffect(() => { + const currentAccount = instance.getActiveAccount(); + + if (currentAccount) { + setUserName(currentAccount.username); + } + }, [instance]); + + + console.log(localStorage.getItem("Token")); + return ( + <> + + + Successfully signed in
{userName}
+ + + + + + Please sign-in to see your profile information. + + + + ); +}; + + diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx deleted file mode 100644 index 030313d..0000000 --- a/src/pages/Profile.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ProfileData } from "../components/ProfileData"; - -export const Profile = () => { - return ( - <> - - - ) -} \ No newline at end of file