Update images in docs

core/src/backends/git-gateway/AuthenticationPage.tsx

@@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import alert from '../../components/UI/Alert';
 import AuthenticationPage from '../../components/UI/AuthenticationPage';
 import { colors } from '../../components/UI/styles';
 
@@ -56,17 +57,37 @@ const GitGatewayAuthenticationPage = ({
   }>({});
 
   useEffect(() => {
-    if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) {
-      onLogin(window.netlifyIdentity.currentUser());
-      window.netlifyIdentity.close();
+    try {
+      if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) {
+        onLogin(window.netlifyIdentity.currentUser());
+        window.netlifyIdentity.close();
+      }
+    } catch (e: unknown) {
+      console.error(e);
+      if (e instanceof Error) {
+        alert({
+          title: 'auth.errors.authTitle',
+          body: { key: 'auth.errors.authBody', options: { details: e.message } },
+        });
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleIdentityLogin = useCallback(
     (user: User) => {
-      onLogin(user);
-      window.netlifyIdentity?.close();
+      try {
+        onLogin(user);
+        window.netlifyIdentity?.close();
+      } catch (e: unknown) {
+        console.error(e);
+        if (e instanceof Error) {
+          alert({
+            title: 'auth.errors.authTitle',
+            body: { key: 'auth.errors.authBody', options: { details: e.message } },
+          });
+        }
+      }
     },
     [onLogin],
   );
@@ -92,11 +113,21 @@ const GitGatewayAuthenticationPage = ({
   useNetlifyIdentifyEvent('error', handleIdentityError);
 
   const handleIdentity = useCallback(() => {
-    const user = window.netlifyIdentity?.currentUser();
-    if (user) {
-      onLogin(user);
-    } else {
-      window.netlifyIdentity?.open();
+    try {
+      const user = window.netlifyIdentity?.currentUser();
+      if (user) {
+        onLogin(user);
+      } else {
+        window.netlifyIdentity?.open();
+      }
+    } catch (e: unknown) {
+      console.error(e);
+      if (e instanceof Error) {
+        alert({
+          title: 'auth.errors.authTitle',
+          body: { key: 'auth.errors.authBody', options: { details: e.message } },
+        });
+      }
     }
   }, [onLogin]);
 
@@ -142,7 +173,17 @@ const GitGatewayAuthenticationPage = ({
         return;
       }
 
-      onLogin(response);
+      try {
+        onLogin(response);
+      } catch (e: unknown) {
+        console.error(e);
+        if (e instanceof Error) {
+          alert({
+            title: 'auth.errors.authTitle',
+            body: { key: 'auth.errors.authBody', options: { details: e.message } },
+          });
+        }
+      }
     },
     [email, handleAuth, onLogin, password, t],
   );

core/src/backends/git-gateway/implementation.tsx

@@ -360,6 +360,7 @@ export default class GitGateway implements BackendClass {
       return { name: userData.name, login: userData.email } as User;
     });
   }
+
   async restoreUser() {
     const client = await this.getAuthClient();
     const user = client?.currentUser();

core/src/components/App/App.tsx

@@ -81,10 +81,6 @@ function EditEntityRedirect() {
   return <Navigate to={`/collections/${name}/entries/${entryName}`} />;
 }
 
-history.listen(e => {
-  console.log(e);
-});
-
 const App = ({
   auth,
   user,
@@ -116,14 +112,21 @@ const App = ({
     [loginUser],
   );
 
-  const authenticating = useCallback(() => {
+  const AuthComponent = useMemo(() => {
     if (!config.config) {
       return null;
     }
 
     const backend = currentBackend(config.config);
+    return backend?.authComponent();
+  }, [config.config]);
 
-    if (backend == null) {
+  const authenticationPage = useMemo(() => {
+    if (!config.config) {
+      return null;
+    }
+
+    if (AuthComponent == null) {
       return (
         <div>
           <h1>{t('app.app.waitingBackend')}</h1>
@@ -132,21 +135,22 @@ const App = ({
     }
 
     return (
-      <div>
-        {React.createElement(backend.authComponent(), {
-          onLogin: handleLogin,
-          error: auth.error,
-          inProgress: auth.isFetching,
-          siteId: config.config.backend.site_domain,
-          base_url: config.config.backend.base_url,
-          authEndpoint: config.config.backend.auth_endpoint,
-          config: config.config,
-          clearHash: () => history.replace('/'),
-          t,
-        })}
+      <div key="auth-page-wrapper">
+        <AuthComponent
+          key="auth-page"
+          onLogin={handleLogin}
+          error={auth.error}
+          inProgress={auth.isFetching}
+          siteId={config.config.backend.site_domain}
+          base_url={config.config.backend.base_url}
+          authEndpoint={config.config.backend.auth_endpoint}
+          config={config.config}
+          clearHash={() => history.replace('/')}
+          t={t}
+        />
       </div>
     );
-  }, [auth.error, auth.isFetching, config.config, handleLogin, t]);
+  }, [AuthComponent, auth.error, auth.isFetching, config.config, handleLogin, t]);
 
   const defaultPath = useMemo(() => getDefaultPath(collections), [collections]);
 
@@ -163,7 +167,7 @@ const App = ({
   }
 
   if (!user) {
-    return authenticating();
+    return authenticationPage;
   }
 
   return (