[Templating][Fixes #9503] Multiple small fixes (#9691)

* Disable react service worker when used alongside auth.
* Add logout detection.
* Update authorize route when authentication state changes.

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/authorize.service.ts

@@ -322,6 +322,11 @@ export class AuthorizeService {
       prefix: ApplicationName
     });
     this.userManager = new UserManager(settings);
+
+    this.userManager.events.addUserSignedOut(async () => {
+      await this.userManager.removeUser();
+      this.userSubject.next(null);
+    });
   }
 
   private getUserFromStorage(): Observable<IUser> {

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/api-authorization/AuthorizeRoute.js

@@ -15,9 +15,14 @@ export default class AuthorizeRoute extends Component {
     }
 
     componentDidMount() {
+        this._subscription = authService.subscribe(() => this.authenticationChanged());
         this.populateAuthenticationState();
     }
 
+    componentWillUnmount() {
+        authService.unsubscribe(this._subscription);
+    }
+
     render() {
         const { ready, authenticated } = this.state;
         const redirectUrl = `${ApplicationPaths.Login}?${QueryParameterNames.ReturnUrl}=${encodeURI(window.location.href)}`
@@ -40,4 +45,9 @@ export default class AuthorizeRoute extends Component {
         const authenticated = await authService.isAuthenticated();
         this.setState({ ready: true, authenticated });
     }
+
+    async authenticationChanged() {
+        this.setState({ ready: false, authenticated: false });
+        await this.populateAuthenticationState();
+    }
 }

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/api-authorization/AuthorizeService.js

@@ -310,6 +310,11 @@ export class AuthorizeService {
         });
 
         this.userManager = new UserManager(settings);
+
+        this.userManager.events.addUserSignedOut(async () => {
+            await this.userManager.removeUser();
+            this.updateState(undefined);
+        });
     }
 
     static get instance() { return authService }

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/index.js

@@ -3,7 +3,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+////#if (IndividualLocalAuth)
+////import registerServiceWorker from './registerServiceWorker';
+////#else
 import registerServiceWorker from './registerServiceWorker';
+////#endif
 
 const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
 const rootElement = document.getElementById('root');
@@ -14,4 +18,16 @@ ReactDOM.render(
   </BrowserRouter>,
   rootElement);
 
+////#if (IndividualLocalAuth)
+//// Uncomment the line above that imports the registerServiceWorker function
+//// and the line below to register the generated service worker.
+//// By default create-react-app includes a service worker to improve the
+//// performance of the application by caching static assets. This service
+//// worker can interfere with the Identity UI, so it is
+//// disabled by default when Identity is being used.
+////
+////registerServiceWorker();
+////#else
 registerServiceWorker();
+////#endif
+