Logout user on failure when login via external source (#3405)

package.json

@@ -34,7 +34,7 @@
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
     "@saleor/macaw-ui": "^0.8.0-pre.52",
-    "@saleor/sdk": "^0.4.4",
+    "@saleor/sdk": "^0.4.5",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
     "@uiw/react-color-hue": "0.0.34",

src/auth/components/Layout.tsx

@@ -5,6 +5,9 @@ import { makeStyles, useTheme } from "@saleor/macaw-ui";
 import React from "react";
 import SVG from "react-inlinesvg";
 
+import { useUser } from "..";
+import LoginLoading from "./LoginLoading";
+
 const useStyles = makeStyles(
   theme => ({
     logo: {
@@ -72,10 +75,17 @@ const useStyles = makeStyles(
 
 const Layout: React.FC = props => {
   const { children } = props;
+  const { errors } = useUser();
 
   const classes = useStyles(props);
   const { themeType } = useTheme();
 
+  // show fullscreen loading when there is externalLoginError - we will redirect and
+  // logout user in meantime
+  if (errors.some(item => item === "externalLoginError")) {
+    return <LoginLoading />;
+  }
+
   return (
     <div className={classes.root}>
       <div className={classes.mainPanel}>

src/auth/hooks/useAuthProvider.ts

@@ -189,6 +189,7 @@ export function useAuthProvider({
         }
       } else {
         setErrors(["externalLoginError"]);
+        await handleLogout();
       }
 
       await logoutNonStaffUser(result.data.externalObtainAccessTokens);