fix(web): support with Authentication function support for cognito backend

web/package.json

@@ -99,6 +99,7 @@
     "dependencies": {
         "@apollo/client": "3.7.14",
         "@auth0/auth0-react": "2.1.0",
+        "@aws-amplify/ui-react": "5.0.2",
         "@emotion/react": "11.11.0",
         "@emotion/styled": "11.11.0",
         "@floating-ui/react-dom": "2.0.0",
@@ -112,8 +113,8 @@
         "@ungap/event-target": "0.2.4",
         "apollo-link-sentry": "3.2.3",
         "apollo-upload-client": "17.0.0",
-        "aws-amplify": "5.2.2",
         "array-move": "4.0.0",
+        "aws-amplify": "5.2.2",
         "axios": "1.4.0",
         "cesium": "1.105.2",
         "cesium-dnd": "1.1.0",

web/src/classic/components/pages/EarthEditor/index.tsx

@@ -11,7 +11,7 @@ import PrimitiveHeader from "@reearth/classic/components/organisms/EarthEditor/P
 import RightMenu from "@reearth/classic/components/organisms/EarthEditor/RightMenu";
 import { useCore } from "@reearth/classic/util/use-core";
 import { Provider as DndProvider } from "@reearth/classic/util/use-dnd";
-import { withAuthenticationRequired, AuthenticationRequiredPage } from "@reearth/services/auth";
+import { withAuthorisation, AuthenticationRequiredPage } from "@reearth/services/auth";
 
 import useHooks from "./hooks";
 
@@ -45,4 +45,6 @@ const EarthEditor: React.FC<Props> = () => {
   );
 };
 
-export default withAuthenticationRequired(EarthEditor);
+const withAuthenticationFun = withAuthorisation();
+
+export default withAuthenticationFun(EarthEditor);

web/src/classic/components/pages/Preview/index.tsx

@@ -5,7 +5,7 @@ import CanvasArea from "@reearth/classic/components/organisms/EarthEditor/Canvas
 import CoreCanvasArea from "@reearth/classic/components/organisms/EarthEditor/core/CanvasArea";
 import { useCore } from "@reearth/classic/util/use-core";
 import { Provider as DndProvider } from "@reearth/classic/util/use-dnd";
-import { withAuthenticationRequired, AuthenticationRequiredPage } from "@reearth/services/auth";
+import { withAuthorisation, AuthenticationRequiredPage } from "@reearth/services/auth";
 import { useSceneId } from "@reearth/services/state";
 import { PublishedAppProvider as ThemeProvider } from "@reearth/services/theme";
 
@@ -33,4 +33,6 @@ const PreviewPage: React.FC<Props> = () => {
   ) : null;
 };
 
-export default withAuthenticationRequired(PreviewPage);
+const withAuthenticationFun = withAuthorisation();
+
+export default withAuthenticationFun(PreviewPage);

web/src/classic/components/pages/Settings/Project/Plugin/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import Plugin from "@reearth/classic/components/organisms/Settings/Project/Plugin";
-import { withAuthenticationRequired } from "@reearth/services/auth";
+import { withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -13,4 +13,6 @@ const PluginPage: React.FC<Props> = () => {
   return <Plugin projectId={projectId} />;
 };
 
-export default withAuthenticationRequired(PluginPage);
+const withAuthenticationFun = withAuthorisation();
+
+export default withAuthenticationFun(PluginPage);

web/src/classic/components/pages/Settings/ProjectList/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import OrganismsProjectList from "@reearth/classic/components/organisms/Settings/ProjectList";
-import { withAuthenticationRequired } from "@reearth/services/auth";
+import { withAuthorisation } from "@reearth/services/auth";
 
 export interface Props {
   path?: string;
@@ -13,4 +13,6 @@ const ProjectList: React.FC<Props> = () => {
   return <OrganismsProjectList workspaceId={workspaceId} />;
 };
 
-export default withAuthenticationRequired(ProjectList);
+const withAuthenticationFun = withAuthorisation();
+
+export default withAuthenticationFun(ProjectList);

web/src/services/auth/index.tsx

@@ -1,3 +1,5 @@
+import { withAuthenticationRequired } from "@auth0/auth0-react";
+import { withAuthenticator } from "@aws-amplify/ui-react";
 import { ReactNode } from "react";
 
 import GlobalModal from "@reearth/classic/components/organisms/GlobalModal";
@@ -7,8 +9,6 @@ import { useAuthenticationRequired } from "./useAuth";
 export { AuthProvider } from "./authProvider";
 export { useAuth, useCleanUrl, useAuthenticationRequired } from "./useAuth";
 
-export { withAuthenticationRequired } from "@auth0/auth0-react";
-
 export const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({ children }) => {
   const [isAuthenticated] = useAuthenticationRequired(); // TODO: show error
   return isAuthenticated && children ? (
@@ -18,3 +18,13 @@ export const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({
     </>
   ) : null;
 };
+
+export const withAuthorisation = (): ((props: any) => React.FC<any>) => {
+  const authProvider = window.REEARTH_CONFIG?.authProvider;
+
+  if (authProvider === "cognito") {
+    return withAuthenticator as unknown as (props: any) => React.FC<any>;
+  }
+
+  return withAuthenticationRequired as unknown as (props: any) => React.FC<any>;
+};