MSAL.js 1.4.6 single sign out with Multiple tabs

Viewed 444

is there a way to sign out at once in multiples tabs? I am running into a situation where the user login in tab1 then the user open another tab for the same app, then the user logout on tab1 while the user is still logged in tab2,then the user reload tab 2 and still logged,

I created a simple react app to show describe the problem this react app contains 2 components:

  1. App.js => RootApp
  2. HOC.js => withAuth

APP component is wrapped by the withAuth which is a Higher Order Component it contains a header and a button to logout withAuth is a Higher Order Component which contains the authentication

these is my code: HOC.js

import React from "react";
import { UserAgentApplication } from "msal";

export const msalInstance = new UserAgentApplication({
  auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    authority: process.env.REACT_APP_AUTORITY,
    redirectUri: "http://localhost:3000",
    validateAuthority: false,
    postLogoutRedirectUri: window.location.origin,
  },
});

export function withAuth(WrappedComponent) {
  return class Auth extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authenticated: false,
        renewIframe: false,
        hasError: false,
        errorMessage: null,
      };
    }
    componentWillMount() {
      msalInstance.handleRedirectCallback(
        (response) => {
          // on success
          this.setState({
            authenticated: true,
          });
        },
        (authErr, accountState) => {
          // on fail
          console.log(authErr);

          this.setState({
            hasError: true,
            errorMessage: authErr.errorMessage,
          });
        }
      );
      console.log(msalInstance.getAccount());

      if (!msalInstance.getAccount()) {
        this.setState({
          authenticated: false,
        });
        console.log(msalInstance.getAccount());
        msalInstance.loginRedirect({
          scopes: [process.env.REACT_APP_SCOPE],
        });
        return;
      } else {
        // logged in, set authenticated state and init pnpjs library
        this.setState({
          authenticated: true,
        });
      }
    }
    render() {
      if (this.state.authenticated === false) {
        return <div>Not Authenticated</div>;
      }
      if (this.state.authenticated === true) {
        return (
          <WrappedComponent
            {...this.props}
            logout={() => msalInstance.logout()}
          />
        );
      }
    }
  };

App.js

import logo from "./logo.svg";
import "./App.css";
import { withAuth } from "./HOC";

function RootApp({ logout }) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <button onClick={() => logout()}>Logout</button>
    </div>
  );
}
const App = withAuth(RootApp);
export default App;

this is my package.json

{
  "name": "poc-single-sing-out-msal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "msal": "^1.4.6",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

the code is in this repo

0 Answers
Related