remove popup in vanilla and react

Author: derisen

1-Authentication/0-sign-in-vanillajs/App/public/index.html

@@ -59,7 +59,7 @@ <h5 id="welcome-div" class="card-header text-center d-none"></h5>
     <script type="text/javascript" src="./claimUtils.js"></script>
     <!-- <script type="text/javascript" src="./authRedirect.js"></script> -->
     <!-- uncomment the above line and comment the line below if you would like to use the redirect flow -->
-    <script type="text/javascript" src="./authPopup.js"></script>
+    <script type="text/javascript" src="./authRedirect.js"></script>
 </body>
 
 </html>

1-Authentication/1-sign-in-react/SPA/src/components/NavigationBar.jsx

@@ -1,5 +1,5 @@
 import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';
-import { Navbar, Dropdown, DropdownButton } from 'react-bootstrap';
+import { Navbar, Button, Dropdown, DropdownButton } from 'react-bootstrap';
 import { loginRequest } from '../authConfig';
 
 export const NavigationBar = () => {
@@ -11,33 +11,10 @@ export const NavigationBar = () => {
         activeAccount = instance.getActiveAccount();
     }
 
-    const handleLoginPopup = () => {
-        /**
-         * When using popup and silent APIs, we recommend setting the redirectUri to a blank page or a page
-         * that does not implement MSAL. Keep in mind that all redirect routes must be registered with the application
-         * For more information, please follow this link: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md#redirecturi-considerations
-         */
-        instance
-            .loginPopup({
-                ...loginRequest,
-                redirectUri: '/redirect',
-            })
-            .catch((error) => console.log(error));
-    };
-
     const handleLoginRedirect = () => {
         instance.loginRedirect(loginRequest).catch((error) => console.log(error));
     };
 
-    const handleLogoutPopup = () => {
-        instance
-            .logoutPopup({
-                mainWindowRedirectUri: '/', // redirects the top level app after logout
-                account: instance.getActiveAccount(),
-            })
-            .catch((error) => console.log(error));
-    };
-
     const handleLogoutRedirect = () => {
         instance.logoutRedirect().catch((error) => console.log(error));
     };
@@ -60,30 +37,17 @@ export const NavigationBar = () => {
                             drop="start"
                             title={activeAccount ? activeAccount.name : 'Unknown'}
                         >
-                            <Dropdown.Item as="button" onClick={handleLogoutPopup}>
-                                Sign out using Popup
-                            </Dropdown.Item>
                             <Dropdown.Item as="button" onClick={handleLogoutRedirect}>
-                                Sign out using Redirect
+                                Sign out
                             </Dropdown.Item>
                         </DropdownButton>
                     </div>
                 </AuthenticatedTemplate>
                 <UnauthenticatedTemplate>
                     <div className="collapse navbar-collapse justify-content-end">
-                        <DropdownButton
-                            variant="secondary"
-                            className="justify-content-end ml-auto"
-                            title="Sign In"
-                            drop="start"
-                        >
-                            <Dropdown.Item as="button" onClick={handleLoginPopup}>
-                                Sign in using Popup
-                            </Dropdown.Item>
-                            <Dropdown.Item as="button" onClick={handleLoginRedirect}>
-                                Sign in using Redirect
-                            </Dropdown.Item>
-                        </DropdownButton>
+                        <Button onClick={handleLoginRedirect}>
+                            Sign in
+                        </Button>
                     </div>
                 </UnauthenticatedTemplate>
             </Navbar>