From f07459da7dc3bf7da858d357af6004862588edcd Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 15:34:17 +0530 Subject: [PATCH 01/28] [Msal- Azure] Installed the msal browser and msal react --- package-lock.json | 52 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 54 insertions(+) diff --git a/package-lock.json b/package-lock.json index 17d697c..aaab688 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", @@ -36,6 +38,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", @@ -18788,6 +18821,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", diff --git a/package.json b/package.json index b378b75..704c37b 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", From 4f4c5b0f8b620d83e1c104eb0b9348afd5cace34 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 15:36:38 +0530 Subject: [PATCH 02/28] [Msal- Azure] Instatiated the public client object from the msal-broswer --- src/App.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/App.js b/src/App.js index e05c1cd..f67fd98 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,17 @@ import { Routes, Route } from "react-router-dom"; import { Home } from "./pages/Home"; import { Profile } from "./pages/Profile"; + +import { PublicClientApplication } from "@azure/msal-browser"; + +const pca = new PublicClientApplication({ + auth: { + clientId: "", + authority: "", + redirectUri: "/", + }, +}); + function App() { return ( From e50dbe2ba1dfef787ec7155c952249a13229c940 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 15:41:28 +0530 Subject: [PATCH 03/28] [Msal-Azure] Registered app with Azure Id and got client id and other parameters --- src/App.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index f67fd98..17a168c 100644 --- a/src/App.js +++ b/src/App.js @@ -10,8 +10,9 @@ import { PublicClientApplication } from "@azure/msal-browser"; const pca = new PublicClientApplication({ auth: { - clientId: "", - authority: "", + clientId: "482f7284-f662-4f46-8094-ff53becf6cad", // get it from msal-react-demo (overiew/ application id) + authority: + "https://login.microsoftonline.com/b35b51f3-994b-4ff8-85d5-ef6995f6121d", // (overiew / (Endpoints /OAuth 2.0 authorization endpoint (v2))) redirectUri: "/", }, }); From 3935f784dd5c5132bb65dc3bb5184d4357ac04a9 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 15:45:50 +0530 Subject: [PATCH 04/28] [Msal-Azure] Instantiated the public client application from msal broswer at the right component --- src/App.js | 9 --------- src/index.js | 11 +++++++++++ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 17a168c..9599182 100644 --- a/src/App.js +++ b/src/App.js @@ -6,16 +6,7 @@ import { Home } from "./pages/Home"; import { Profile } from "./pages/Profile"; -import { PublicClientApplication } from "@azure/msal-browser"; -const pca = new PublicClientApplication({ - auth: { - clientId: "482f7284-f662-4f46-8094-ff53becf6cad", // get it from msal-react-demo (overiew/ application id) - authority: - "https://login.microsoftonline.com/b35b51f3-994b-4ff8-85d5-ef6995f6121d", // (overiew / (Endpoints /OAuth 2.0 authorization endpoint (v2))) - redirectUri: "/", - }, -}); function App() { return ( diff --git a/src/index.js b/src/index.js index 2b39ee3..6664faf 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,17 @@ import { BrowserRouter } from "react-router-dom"; import App from './App'; +import { PublicClientApplication } from "@azure/msal-browser"; + +const pca = new PublicClientApplication({ + auth: { + clientId: "482f7284-f662-4f46-8094-ff53becf6cad", // get it from msal-react-demo (overiew/ application id) + authority: + "https://login.microsoftonline.com/b35b51f3-994b-4ff8-85d5-ef6995f6121d", // (overiew / (Endpoints /OAuth 2.0 authorization endpoint (v2))) + redirectUri: "/", + }, +}); + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( From d80c504af6e1f23e5131148ae6fe2fe52ad03579 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 15:47:28 +0530 Subject: [PATCH 05/28] [Msal-Azure] Passed the created object in the application component as prop --- src/index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 6664faf..a5fc341 100644 --- a/src/index.js +++ b/src/index.js @@ -21,11 +21,11 @@ const pca = new PublicClientApplication({ const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - - - - - + + + + + + + ); From b6807c51b8ecd36bc850c0012f49dedb997d1ff0 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 15:52:44 +0530 Subject: [PATCH 06/28] [Msal-Azure] For every component that needs to access the msal authentication state, the msal context, we wrap them with the msal provider. --- src/App.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 9599182..7faceed 100644 --- a/src/App.js +++ b/src/App.js @@ -6,15 +6,18 @@ import { Home } from "./pages/Home"; import { Profile } from "./pages/Profile"; +import { MsalProvider } from "@azure/msal-react"; function App() { return ( + - - - + + + + ); } From 5749b3f8a50ec505e92436fda2edfd1f12b4d507 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 15:55:15 +0530 Subject: [PATCH 07/28] [Msal-Azure] Passing the application instance to the MsalProvider --- src/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 7faceed..c378819 100644 --- a/src/App.js +++ b/src/App.js @@ -9,9 +9,9 @@ import { Profile } from "./pages/Profile"; import { MsalProvider } from "@azure/msal-react"; -function App() { +function App({msalInstance}) { return ( - + From 01136ed68cfb1c0ae5f1c58ea23b6e20b3aa3096 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 16:08:54 +0530 Subject: [PATCH 08/28] [Msal-Azure] Using useMsal hook provided by the msal-react 1. Using useMsal hook provided by the msal-react 2. Getting access to the instance which we created earlier --- src/components/SignInButton.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/SignInButton.jsx b/src/components/SignInButton.jsx index ace61d6..ead96b1 100644 --- a/src/components/SignInButton.jsx +++ b/src/components/SignInButton.jsx @@ -1,6 +1,11 @@ import Button from '@mui/material/Button'; +import { useMsal } from '@azure/msal-react'; + export const SignInButton = () => { + + const { instance } = useMsal(); + return ( ) From 17bf542fb852d483fea02e93dcdd5cc12d71fa02 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 16:10:12 +0530 Subject: [PATCH 09/28] [Msal- Azure] Accessing the Api's provided by the instance. --- src/components/SignInButton.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/SignInButton.jsx b/src/components/SignInButton.jsx index ead96b1..7cadacf 100644 --- a/src/components/SignInButton.jsx +++ b/src/components/SignInButton.jsx @@ -5,6 +5,10 @@ import { useMsal } from '@azure/msal-react'; export const SignInButton = () => { const { instance } = useMsal(); + + const handleSignIn = () => { + instance.loginRedirect(); + }; return ( From a6608ab581ae2d5e3bc449fa2f377ab9130acfc3 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 16:16:14 +0530 Subject: [PATCH 10/28] [Msal-Azure] Passing another option to the loginRedirect function. 1. Passing the scopes:["user.read"] because we can get the consent of the user when they first sign in and can also access the token later on. 2. Adding the onClick event to the button and passing the handleSignIn function. --- src/components/SignInButton.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/SignInButton.jsx b/src/components/SignInButton.jsx index 7cadacf..a73d28a 100644 --- a/src/components/SignInButton.jsx +++ b/src/components/SignInButton.jsx @@ -7,10 +7,12 @@ export const SignInButton = () => { const { instance } = useMsal(); const handleSignIn = () => { - instance.loginRedirect(); + instance.loginRedirect({ + scopes: ["user.read"], + }); }; - + return ( - + ) }; \ No newline at end of file From 605c34692543bb2ad6ced0bf861cf0d1c229bfa6 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 16:28:29 +0530 Subject: [PATCH 11/28] [Msal-Azure] Using the useAuthenticated hook provided by the msal-react to indicate that the user is signed in or not --- src/components/NavBar.jsx | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 2370e69..8c45bff 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -8,22 +8,29 @@ 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 ? : null} + + {isAuthenticated ? : } + + +
+ ); }; export default NavBar; \ No newline at end of file From 82b2923001942126f6e998212ac9cf92530b1ae1 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 16:29:55 +0530 Subject: [PATCH 12/28] [Msal-Azure] Putting the conditions properly to show the sign in and sign out --- src/components/NavBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 8c45bff..1b6fa17 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -26,7 +26,7 @@ const NavBar = () => { - {isAuthenticated ? : } + {isAuthenticated ? : } From 328a51176d6850a6f5b7493c9533901db46521a3 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 16:38:50 +0530 Subject: [PATCH 13/28] [Msal-Azure] Using the hooks provided by the msal react to show the appropriate text based on the conditions if signed in or not. --- src/pages/Home.jsx | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index c420fb2..87a66d6 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,10 +1,24 @@ import Typography from "@mui/material/Typography"; +import { + AuthenticatedTemplate, + UnauthenticatedTemplate, +} from "@azure/msal-react"; + 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 + return ( + <> + + + You are signed-in. Select profile to call Microsoft Graph. + + + + + + Please sign-in to see your profile information. + + + + ); +}; \ No newline at end of file From 2f7ff7cdb87336a77c34af25465eac343df18164 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Thu, 4 Apr 2024 17:35:28 +0530 Subject: [PATCH 14/28] [Msal-Azure] Showing the userName if signed in. Welcome.jsx 8.1 Use the useMsal hook provided by the msal react. 8.2 Using the useEffect hook because when this compoenent mounts we want to get the current active account. access the current userName. Still we won't be able to get the active user.........Therefore we will register an event --- src/components/WelcomeName.jsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/WelcomeName.jsx b/src/components/WelcomeName.jsx index 2cba637..c1902ef 100644 --- a/src/components/WelcomeName.jsx +++ b/src/components/WelcomeName.jsx @@ -1,5 +1,20 @@ import Typography from "@mui/material/Typography"; +import { useMsal } from "@azure/msal-react"; +import { useEffect, useState } from "react"; + export const WelcomeName = () => { - return Welcome, user; + const { instance } = useMsal(); + const [userName, setUserName] = useState(""); + + useEffect(() => { + const currentAccount = instance.getActiveAccount(); + + if (currentAccount) { + setUserName(currentAccount.username); + } + }, [instance]); + + + return Welcome, {userName}; }; \ No newline at end of file From 9e3d2cfdcff22e248dedea84066fbb6bcd838ba9 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Fri, 5 Apr 2024 12:16:07 +0530 Subject: [PATCH 15/28] [Msal-azure] Added the event to dispaly the logged in username and also Added the function for sign out using msal hook provided by the msal-react --- src/components/SignOutButton.jsx | 16 +++++++++++++--- src/index.js | 9 ++++++++- 2 files changed, 21 insertions(+), 4 deletions(-) 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/index.js b/src/index.js index a5fc341..4eba8c2 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom"; import App from './App'; -import { PublicClientApplication } from "@azure/msal-browser"; +import { EventType, PublicClientApplication } from "@azure/msal-browser"; const pca = new PublicClientApplication({ auth: { @@ -19,6 +19,13 @@ const pca = new PublicClientApplication({ }, }); +pca.addEventCallback((event) => { + if (event.eventType === EventType.LOGIN_SUCCESS) { + console.log(event); + pca.setActiveAccount(event.payload.account); + } +}); + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( From 00fb6e6595e2370426ce1246c1cffdd0b34b61d8 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Fri, 5 Apr 2024 17:57:31 +0530 Subject: [PATCH 16/28] [Msal-Azure] Signed in succesfully using the given client is and authority --- src/components/SignInButton.jsx | 5 ++++- src/index.js | 12 ++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/SignInButton.jsx b/src/components/SignInButton.jsx index a73d28a..d95cbe0 100644 --- a/src/components/SignInButton.jsx +++ b/src/components/SignInButton.jsx @@ -8,7 +8,10 @@ export const SignInButton = () => { const handleSignIn = () => { instance.loginRedirect({ - scopes: ["user.read"], + // scopes: ["user.read"], + scopes: [ + "api://cba85205-493e-4608-9ba2-1c4bd8b73702/ReadUserDataScope", + ], }); }; diff --git a/src/index.js b/src/index.js index 4eba8c2..578f486 100644 --- a/src/index.js +++ b/src/index.js @@ -12,9 +12,17 @@ import { EventType, PublicClientApplication } from "@azure/msal-browser"; const pca = new PublicClientApplication({ auth: { - clientId: "482f7284-f662-4f46-8094-ff53becf6cad", // get it from msal-react-demo (overiew/ application id) + // clientId: "482f7284-f662-4f46-8094-ff53becf6cad", // get it from msal-react-demo (overiew/ application id) + // authority: + // "https://login.microsoftonline.com/b35b51f3-994b-4ff8-85d5-ef6995f6121d", // (overiew / (Endpoints /OAuth 2.0 authorization endpoint (v2))) + // redirectUri: "/", + // instance: "https://login.microsoftonline.com/", + // tenantId: "b35b51f3-994b-4ff8-85d5-ef6995f6121d", + // clientId: "cba85205-493e-4608-9ba2-1c4bd8b73702", + // redirectUri: "/", + clientId: "cba85205-493e-4608-9ba2-1c4bd8b73702", authority: - "https://login.microsoftonline.com/b35b51f3-994b-4ff8-85d5-ef6995f6121d", // (overiew / (Endpoints /OAuth 2.0 authorization endpoint (v2))) + "https://login.microsoftonline.com/b35b51f3-994b-4ff8-85d5-ef6995f6121d", redirectUri: "/", }, }); From 5d45da016106b40656dbaa5e73c3f109aedfe57b Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Mon, 8 Apr 2024 08:58:02 +0530 Subject: [PATCH 17/28] [Msal-Azure] Added the form component --- src/components/Form.jsx | 60 +++++++++++++++++++++++++++++++++++++++++ src/index.js | 5 ++++ src/pages/Home.jsx | 6 +++-- 3 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/components/Form.jsx diff --git a/src/components/Form.jsx b/src/components/Form.jsx new file mode 100644 index 0000000..b5f300b --- /dev/null +++ b/src/components/Form.jsx @@ -0,0 +1,60 @@ +import React, { useState } from "react"; + +// export const fetchData = (method = "POST", endpoint, accessToken) => { +// const bearer = `Bearer ${accessToken}`; + +// const options = { +// method: method, +// headers: { +// Authorization: bearer, +// }, +// }; + +// return fetch(endpoint, options) +// .then((resp) => console.log(resp.json())) +// .catch((err) => console.log(err)); +// }; + +const Form = () => { + const [formData, setFormData] = useState({ + EmployeeName: "", + EmployeeId: "", + }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData({ + ...formData, + [name]: value, + }); + }; + +// console.log(sessionStorage.getItem()); + return ( +
+

Fill in the employee form

+
+ + +
+
+ + +
+ {/* */} + +
+ ); +}; + +export default Form; diff --git a/src/index.js b/src/index.js index 578f486..135c1be 100644 --- a/src/index.js +++ b/src/index.js @@ -27,9 +27,14 @@ const pca = new PublicClientApplication({ }, }); + + + pca.addEventCallback((event) => { if (event.eventType === EventType.LOGIN_SUCCESS) { console.log(event); + console.log(event.payload.accessToken) + console.log(event.payload.idToken); pca.setActiveAccount(event.payload.account); } }); diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 87a66d6..49ee137 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -4,14 +4,16 @@ import { AuthenticatedTemplate, UnauthenticatedTemplate, } from "@azure/msal-react"; +import Form from "../components/Form"; export const Home = () => { return ( <> - + {/* You are signed-in. Select profile to call Microsoft Graph. - + */} +
From 1e3ea7d21b8abed8ce8125c7d88098b4b5accfb1 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Mon, 8 Apr 2024 10:50:06 +0530 Subject: [PATCH 18/28] [Msal-Azure] Function to make request --- src/components/Form.jsx | 13 ------------- src/fetch.js | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 13 deletions(-) create mode 100644 src/fetch.js diff --git a/src/components/Form.jsx b/src/components/Form.jsx index b5f300b..10c5110 100644 --- a/src/components/Form.jsx +++ b/src/components/Form.jsx @@ -1,19 +1,6 @@ import React, { useState } from "react"; -// export const fetchData = (method = "POST", endpoint, accessToken) => { -// const bearer = `Bearer ${accessToken}`; -// const options = { -// method: method, -// headers: { -// Authorization: bearer, -// }, -// }; - -// return fetch(endpoint, options) -// .then((resp) => console.log(resp.json())) -// .catch((err) => console.log(err)); -// }; const Form = () => { const [formData, setFormData] = useState({ diff --git a/src/fetch.js b/src/fetch.js new file mode 100644 index 0000000..ba78717 --- /dev/null +++ b/src/fetch.js @@ -0,0 +1,14 @@ +export const fetchData = (method = "GET", endpoint, accessToken) => { + const bearer = `Bearer ${accessToken}`; + + const options = { + method: method, + headers: { + Authorization: bearer, + }, + }; + + return fetch(endpoint, options) + .then((resp) => resp.json()) + .catch((err) => console.log(err)); +}; From 2377d853ed3907b59981f8c76f1369f2aec2c0f6 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Mon, 8 Apr 2024 17:05:55 +0530 Subject: [PATCH 19/28] [Msal-Azure] Making the request correctly --- src/App.js | 55 +++++++++++++++++++++++------------ src/components/Form.jsx | 37 +++++++++++++---------- src/components/PageLayout.jsx | 2 +- src/fetch.js | 21 ++++++++++--- src/index.js | 20 ++++++++----- src/pages/Home.jsx | 4 +-- 6 files changed, 90 insertions(+), 49 deletions(-) diff --git a/src/App.js b/src/App.js index c378819..9320144 100644 --- a/src/App.js +++ b/src/App.js @@ -5,29 +5,46 @@ import { Routes, Route } from "react-router-dom"; import { Home } from "./pages/Home"; import { Profile } from "./pages/Profile"; - +import { EventType } from "@azure/msal-browser"; import { MsalProvider } from "@azure/msal-react"; +import { useEffect, useState } from "react"; +function App({ msalInstance }) { + const [accessToken, setAccessToken] = useState(); -function App({msalInstance}) { - return ( - - - - - - - - ); -} + useEffect(() => { + msalInstance.addEventCallback((e) => { + if (e.eventType === EventType.LOGIN_SUCCESS) { + msalInstance.setActiveAccount(e.payload.account); + // console.log( + // setAccessToken(e.payload.accessToken), + // "from APP useEffect" + // ); + console.log(e); + setAccessToken(e.payload.accessToken); + localStorage.setItem("accessToken", e.payload.accessToken); + } + }); + }); -const Pages = () => { - return ( - - } /> - } /> - - ); + return ( + + + + + + + + ); } +const Pages = ({ accessToken }) => { + return ( + + } /> + } /> + + ); +}; + export default App; diff --git a/src/components/Form.jsx b/src/components/Form.jsx index 10c5110..6f5eb15 100644 --- a/src/components/Form.jsx +++ b/src/components/Form.jsx @@ -1,13 +1,15 @@ import React, { useState } from "react"; - - +import { fetchData } from "../fetch"; const Form = () => { const [formData, setFormData] = useState({ EmployeeName: "", - EmployeeId: "", + // EmployeeId: "", }); + const accessToken = localStorage.getItem("accessToken"); + + const handleChange = (e) => { const { name, value } = e.target; setFormData({ @@ -16,7 +18,20 @@ const Form = () => { }); }; -// console.log(sessionStorage.getItem()); + const demoFun = () => { + fetchData( + // "http://localhost:5011/Employee", + // { firstName: "SwathiG" }, + // { accessToken } + { + endpoint: "http://localhost:5011/Employee", + accessToken: accessToken, + requestData: { firstName: formData.EmployeeName }, + } + ); + }; + + return (

Fill in the employee form

@@ -29,17 +44,9 @@ const Form = () => { onChange={handleChange} />
-
- - -
- {/* */} - + + + {/* */} ); }; diff --git a/src/components/PageLayout.jsx b/src/components/PageLayout.jsx index 5cc0a16..5db8b5a 100644 --- a/src/components/PageLayout.jsx +++ b/src/components/PageLayout.jsx @@ -7,7 +7,7 @@ export const PageLayout = (props) => {
-
Welcome to the Microsoft Authentication Library For React Quickstart
+ {/*
Welcome to the Microsoft Authentication Library For React Quickstart
*/}
{props.children} diff --git a/src/fetch.js b/src/fetch.js index ba78717..b83e30f 100644 --- a/src/fetch.js +++ b/src/fetch.js @@ -1,14 +1,27 @@ -export const fetchData = (method = "GET", endpoint, accessToken) => { +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), }; - return fetch(endpoint, options) - .then((resp) => resp.json()) - .catch((err) => console.log(err)); + console.log(method, endpoint, accessToken, requestData); + try { + const resp = await fetch(endpoint, options); + console.log(resp.json()); + return; + } catch (err) { + console.log(err); + return; + } }; diff --git a/src/index.js b/src/index.js index 135c1be..f517e3d 100644 --- a/src/index.js +++ b/src/index.js @@ -30,14 +30,18 @@ const pca = new PublicClientApplication({ -pca.addEventCallback((event) => { - if (event.eventType === EventType.LOGIN_SUCCESS) { - console.log(event); - console.log(event.payload.accessToken) - console.log(event.payload.idToken); - pca.setActiveAccount(event.payload.account); - } -}); +// pca.addEventCallback((event) => { +// if (event.eventType === EventType.LOGIN_SUCCESS) { +// console.log(event); +// console.log(event.payload.accessToken) +// console.log(event.payload.idToken); +// 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/Home.jsx b/src/pages/Home.jsx index 49ee137..65127e9 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -6,14 +6,14 @@ import { } from "@azure/msal-react"; import Form from "../components/Form"; -export const Home = () => { +export const Home = ({accessToken}) => { return ( <> {/* You are signed-in. Select profile to call Microsoft Graph. */} - + From 6910c1150ede047752b71e45c9272ba2385139bd Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Wed, 10 Apr 2024 10:14:18 +0530 Subject: [PATCH 20/28] [Msal-Azure] Removed the unnecessary consoles --- src/App.js | 2 +- src/components/Form.jsx | 53 ++++++++++++++++++++++++++++------------- src/fetch.js | 9 +++++-- 3 files changed, 45 insertions(+), 19 deletions(-) diff --git a/src/App.js b/src/App.js index 9320144..73032ae 100644 --- a/src/App.js +++ b/src/App.js @@ -20,7 +20,7 @@ function App({ msalInstance }) { // setAccessToken(e.payload.accessToken), // "from APP useEffect" // ); - console.log(e); + // console.log(e); setAccessToken(e.payload.accessToken); localStorage.setItem("accessToken", e.payload.accessToken); } diff --git a/src/components/Form.jsx b/src/components/Form.jsx index 6f5eb15..05db2dc 100644 --- a/src/components/Form.jsx +++ b/src/components/Form.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { fetchData } from "../fetch"; const Form = () => { @@ -8,7 +8,6 @@ const Form = () => { }); const accessToken = localStorage.getItem("accessToken"); - const handleChange = (e) => { const { name, value } = e.target; @@ -18,19 +17,31 @@ const Form = () => { }); }; - const demoFun = () => { - fetchData( - // "http://localhost:5011/Employee", - // { firstName: "SwathiG" }, - // { accessToken } - { - endpoint: "http://localhost:5011/Employee", - accessToken: accessToken, - requestData: { firstName: formData.EmployeeName }, - } - ); - }; + // const demoFun = () => { + // fetchData( + // // "http://localhost:5011/Employee", + // // { firstName: "SwathiG" }, + // // { accessToken } + // { + // endpoint: "http://localhost:5011/Employee", + // accessToken: accessToken, + // requestData: { firstName: formData.EmployeeName }, + // } + // ); + // }; + // useEffect(() => { + // fetchData( + // // "http://localhost:5011/Employee", + // // { firstName: "SwathiG" }, + // // { accessToken } + // { + // endpoint: "http://localhost:5011/Employee", + // accessToken: accessToken, + // requestData: { firstName: formData.EmployeeName }, + // } + // ); + // }); return (
@@ -44,8 +55,18 @@ const Form = () => { onChange={handleChange} />
- - + + {/* */} ); diff --git a/src/fetch.js b/src/fetch.js index b83e30f..4c13f5f 100644 --- a/src/fetch.js +++ b/src/fetch.js @@ -15,13 +15,18 @@ export const fetchData = async ({ body: JSON.stringify(requestData), }; - console.log(method, endpoint, accessToken, requestData); + // console.log(method, endpoint, accessToken, requestData); try { const resp = await fetch(endpoint, options); - console.log(resp.json()); + // console.log(resp.json()); + resp.json(); return; } catch (err) { console.log(err); return; } }; + + + + From 0358fbb20bd2e4d179231be3df417b235e45597d Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Wed, 10 Apr 2024 10:31:04 +0530 Subject: [PATCH 21/28] [Msal-Azure] Installed axios in the project --- package-lock.json | 88 +++++++++++++++++++++++++++++++++++------------ package.json | 1 + 2 files changed, 67 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index aaab688..7753be4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,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", @@ -5353,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", @@ -5418,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", @@ -6254,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" }, @@ -7079,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" } @@ -8928,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", @@ -13157,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" } @@ -13166,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" }, @@ -15390,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", @@ -22578,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", @@ -22612,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", @@ -23271,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" } @@ -23868,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", @@ -25282,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", @@ -28399,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" } @@ -29869,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 704c37b..ebc7461 100644 --- a/package.json +++ b/package.json @@ -12,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", From 67a79eb40cadd0dce749fb0a25be8fdaaf873b38 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Wed, 10 Apr 2024 17:25:30 +0530 Subject: [PATCH 22/28] [Msal-Azure] Made the request using axios --- src/App.js | 81 +++++++++++++++++++++++++++------ src/components/Form.jsx | 66 +++++++++++++++++---------- src/components/SignInButton.jsx | 1 - src/fetch.js | 52 ++++++++++----------- src/index.js | 27 +++++------ src/pages/Home.jsx | 7 +-- 6 files changed, 151 insertions(+), 83 deletions(-) diff --git a/src/App.js b/src/App.js index 73032ae..a3a79de 100644 --- a/src/App.js +++ b/src/App.js @@ -6,42 +6,93 @@ import { Home } from "./pages/Home"; import { Profile } from "./pages/Profile"; import { EventType } from "@azure/msal-browser"; -import { MsalProvider } from "@azure/msal-react"; +import { MsalProvider, useMsal } from "@azure/msal-react"; import { useEffect, useState } from "react"; +import axios from "axios"; -function App({ msalInstance }) { - const [accessToken, setAccessToken] = useState(); +const axiosApi = axios.create({ + baseURL: "http://localhost:5011", + headers: { "Content-Type": "application/json" }, +}); +function App({ msalInstance }) { + const { accounts } = useMsal(); + useEffect(() => { - msalInstance.addEventCallback((e) => { + const callbackID = msalInstance.addEventCallback((e) => { if (e.eventType === EventType.LOGIN_SUCCESS) { msalInstance.setActiveAccount(e.payload.account); - // console.log( - // setAccessToken(e.payload.accessToken), - // "from APP useEffect" - // ); - // console.log(e); - setAccessToken(e.payload.accessToken); - localStorage.setItem("accessToken", e.payload.accessToken); } }); - }); + + return () => msalInstance.removeEventCallback(callbackID); + }, [msalInstance]); + + 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 + ); + + 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 = ({ accessToken }) => { +const Pages = ({ axiosApi }) => { + return ( - } /> + } /> } /> ); diff --git a/src/components/Form.jsx b/src/components/Form.jsx index 05db2dc..e3a4f9d 100644 --- a/src/components/Form.jsx +++ b/src/components/Form.jsx @@ -1,13 +1,14 @@ import React, { useEffect, useState } from "react"; import { fetchData } from "../fetch"; -const Form = () => { +const Form = ({ axiosApi }) => { const [formData, setFormData] = useState({ EmployeeName: "", - // EmployeeId: "", }); - const accessToken = localStorage.getItem("accessToken"); + const [employee, setEmployee] = useState(null); + + // const accessToken = localStorage.getItem("accessToken"); const handleChange = (e) => { const { name, value } = e.target; @@ -43,31 +44,50 @@ const Form = () => { // ); // }); + const postEmployees = async () => { + console.log("Button clicked"); + try { + const response = await axiosApi.post("/Employee", { + firstName: formData.EmployeeName, + }); + + if (response.status === 200) { + console.log("data", response.data); + setEmployee(response?.data); + } + } catch (e) { + console.log(e); + } + }; return (
-

Fill in the employee form

- - +

Fill in the employee form

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

Employees data

+ {employee?.map((employee) => { + return
{employee?.firstName}
; + })} +
); }; diff --git a/src/components/SignInButton.jsx b/src/components/SignInButton.jsx index d95cbe0..867177b 100644 --- a/src/components/SignInButton.jsx +++ b/src/components/SignInButton.jsx @@ -8,7 +8,6 @@ export const SignInButton = () => { const handleSignIn = () => { instance.loginRedirect({ - // scopes: ["user.read"], scopes: [ "api://cba85205-493e-4608-9ba2-1c4bd8b73702/ReadUserDataScope", ], diff --git a/src/fetch.js b/src/fetch.js index 4c13f5f..febaee1 100644 --- a/src/fetch.js +++ b/src/fetch.js @@ -1,31 +1,31 @@ -export const fetchData = async ({ - method = "POST", - endpoint, - accessToken, - requestData, -}) => { - const bearer = `Bearer ${accessToken}`; +// 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), - }; +// 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; - } -}; +// // 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 f517e3d..95cc6dd 100644 --- a/src/index.js +++ b/src/index.js @@ -25,23 +25,20 @@ const pca = new PublicClientApplication({ "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); -// console.log(event.payload.accessToken) -// console.log(event.payload.idToken); -// pca.setActiveAccount(event.payload.account); - -// } -// // if (event.eventType === EventType.ACQUIRE_TOKEN_START) { -// // pca.acquireTokenSilent(event.payload.accessToken) -// // } -// }); +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/Home.jsx b/src/pages/Home.jsx index 65127e9..a4b8e6a 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -6,18 +6,19 @@ import { } from "@azure/msal-react"; import Form from "../components/Form"; -export const Home = ({accessToken}) => { +export const Home = ({ axiosApi }) => { return ( <> {/* You are signed-in. Select profile to call Microsoft Graph. */} - +
Successfully signed in
+ - + Please sign-in to see your profile information. From ee956e2c233ca868cefce21cd2fc3026f3ed201e Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Mon, 29 Apr 2024 12:21:29 +0530 Subject: [PATCH 23/28] [Msal-Azure] Commented the profile compoenent as it was not necessary --- src/App.js | 6 +++--- src/components/NavBar.jsx | 4 ++-- src/index.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index a3a79de..feaf297 100644 --- a/src/App.js +++ b/src/App.js @@ -17,7 +17,7 @@ const axiosApi = axios.create({ function App({ msalInstance }) { const { accounts } = useMsal(); - + useEffect(() => { const callbackID = msalInstance.addEventCallback((e) => { if (e.eventType === EventType.LOGIN_SUCCESS) { @@ -40,6 +40,7 @@ function App({ msalInstance }) { accessTokenRequest ); + console.log(accessTokenResponse, "accessTokenResponse"); if (accessTokenResponse?.accessToken) { config.headers[ "Authorization" @@ -89,11 +90,10 @@ function App({ msalInstance }) { } const Pages = ({ axiosApi }) => { - return ( } /> - } /> + {/* } /> */} ); }; diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 1b6fa17..732f61c 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -23,9 +23,9 @@ const NavBar = () => { {isAuthenticated ? : null} - + */} {isAuthenticated ? : } diff --git a/src/index.js b/src/index.js index 95cc6dd..68cd7e8 100644 --- a/src/index.js +++ b/src/index.js @@ -35,9 +35,9 @@ pca.addEventCallback((event) => { console.log(event); pca.setActiveAccount(event.payload.account); } - // if (event.eventType === EventType.ACQUIRE_TOKEN_START) { - // pca.acquireTokenSilent(event.payload.accessToken) - // } + if (event.eventType === EventType.ACQUIRE_TOKEN_START) { + pca.acquireTokenSilent(event.payload.accessToken) + } }); const root = ReactDOM.createRoot(document.getElementById('root')); From 37768ad60eaa20eff17fe6e890e56c619b437457 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Tue, 30 Apr 2024 15:48:13 +0530 Subject: [PATCH 24/28] [Msal-azure] Removed all the unnecessary codes and files from the project --- src/App.js | 2 +- src/components/Form.jsx | 4 +- src/components/NavBar.jsx | 9 ++-- src/components/PageLayout.jsx | 7 +-- src/components/ProfileData.jsx | 78 ---------------------------------- src/pages/Home.jsx | 7 +-- src/pages/Profile.jsx | 22 ++++------ 7 files changed, 20 insertions(+), 109 deletions(-) delete mode 100644 src/components/ProfileData.jsx diff --git a/src/App.js b/src/App.js index feaf297..25235fa 100644 --- a/src/App.js +++ b/src/App.js @@ -93,7 +93,7 @@ const Pages = ({ axiosApi }) => { return ( } /> - {/* } /> */} + } /> ); }; diff --git a/src/components/Form.jsx b/src/components/Form.jsx index e3a4f9d..d826a6e 100644 --- a/src/components/Form.jsx +++ b/src/components/Form.jsx @@ -84,8 +84,8 @@ const Form = ({ axiosApi }) => {

Employees data

- {employee?.map((employee) => { - return
{employee?.firstName}
; + {employee?.map((employee, index) => { + return
{employee?.firstName}
; })}
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 732f61c..5d58197 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -23,9 +23,12 @@ const NavBar = () => { {isAuthenticated ? : null} - {/* */} + {isAuthenticated && ( + + )} + {isAuthenticated ? : } diff --git a/src/components/PageLayout.jsx b/src/components/PageLayout.jsx index 5db8b5a..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/pages/Home.jsx b/src/pages/Home.jsx index a4b8e6a..9a856d8 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -4,17 +4,14 @@ import { AuthenticatedTemplate, UnauthenticatedTemplate, } from "@azure/msal-react"; -import Form from "../components/Form"; +// import Form from "../components/Form"; export const Home = ({ axiosApi }) => { return ( <> - {/* - You are signed-in. Select profile to call Microsoft Graph. - */}
Successfully signed in
- + {/* */} diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx index 030313d..c5a927a 100644 --- a/src/pages/Profile.jsx +++ b/src/pages/Profile.jsx @@ -1,15 +1,9 @@ -import { ProfileData } from "../components/ProfileData"; +import Form from "../components/Form"; -export const Profile = () => { - return ( - <> - - - ) -} \ No newline at end of file +export const Profile = ({ axiosApi }) => { + return ( + <> + + + ); +}; From 19a062f842d355f23f08c863f4b18bb95d381441 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Tue, 30 Apr 2024 16:38:26 +0530 Subject: [PATCH 25/28] changed the profile route to employee route --- src/App.js | 4 ++-- src/components/NavBar.jsx | 4 ++-- src/pages/{Profile.jsx => Employee.jsx} | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) rename src/pages/{Profile.jsx => Employee.jsx} (63%) diff --git a/src/App.js b/src/App.js index 25235fa..1ed0472 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import { PageLayout } from "./components/PageLayout"; import { Routes, Route } from "react-router-dom"; import { Home } from "./pages/Home"; -import { Profile } from "./pages/Profile"; +import Employee, { Profile } from "./pages/Employee"; import { EventType } from "@azure/msal-browser"; import { MsalProvider, useMsal } from "@azure/msal-react"; @@ -93,7 +93,7 @@ const Pages = ({ axiosApi }) => { return ( } /> - } /> + } /> ); }; diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 5d58197..4e3108a 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -24,8 +24,8 @@ const NavBar = () => { {isAuthenticated ? : null} {isAuthenticated && ( - )} diff --git a/src/pages/Profile.jsx b/src/pages/Employee.jsx similarity index 63% rename from src/pages/Profile.jsx rename to src/pages/Employee.jsx index c5a927a..2c7bf35 100644 --- a/src/pages/Profile.jsx +++ b/src/pages/Employee.jsx @@ -1,9 +1,11 @@ import Form from "../components/Form"; -export const Profile = ({ axiosApi }) => { +const Employee = ({ axiosApi }) => { return ( <> ); }; + +export default Employee From ba7fc9a0c39e1c9997dfbd6888c47429d4b595b3 Mon Sep 17 00:00:00 2001 From: Elizabethg Date: Tue, 30 Apr 2024 16:53:28 +0530 Subject: [PATCH 26/28] [Msal-azure] Added the username in Home component itself --- src/components/NavBar.jsx | 4 +--- src/components/WelcomeName.jsx | 20 -------------------- src/pages/Home.jsx | 26 +++++++++++++++++++++----- 3 files changed, 22 insertions(+), 28 deletions(-) delete mode 100644 src/components/WelcomeName.jsx diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 4e3108a..f065081 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -3,12 +3,10 @@ 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 = () => { @@ -22,7 +20,7 @@ const NavBar = () => { Microsoft identity platform - {isAuthenticated ? : null} + {isAuthenticated && (