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/Dashboard/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import Dashboard from "@reearth/classic/components/organisms/Dashboard";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -17,4 +17,4 @@ const DashboardPage: React.FC<Props> = () => {
   );
 };
 
-export default DashboardPage;
+export default withAuthorisation()(DashboardPage);

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,4 @@ const EarthEditor: React.FC<Props> = () => {
   );
 };
 
-export default withAuthenticationRequired(EarthEditor);
+export default withAuthorisation()(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,4 @@ const PreviewPage: React.FC<Props> = () => {
   ) : null;
 };
 
-export default withAuthenticationRequired(PreviewPage);
+export default withAuthorisation()(PreviewPage);

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

@@ -1,7 +1,7 @@
 import React from "react";
 
 import Account from "@reearth/classic/components/organisms/Settings/Account";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -13,4 +13,4 @@ const AccountPage: React.FC<Props> = () => (
   </AuthenticationRequiredPage>
 );
 
-export default AccountPage;
+export default withAuthorisation()(AccountPage);

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

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import Dataset from "@reearth/classic/components/organisms/Settings/Project/Dataset";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -17,4 +17,4 @@ const DatasetPage: React.FC<Props> = () => {
   );
 };
 
-export default DatasetPage;
+export default withAuthorisation()(DatasetPage);

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

@@ -2,15 +2,19 @@ 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 { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
 };
 
 const PluginPage: React.FC<Props> = () => {
   const { projectId = "" } = useParams();
-  return <Plugin projectId={projectId} />;
+  return (
+    <AuthenticationRequiredPage>
+      <Plugin projectId={projectId} />;
+    </AuthenticationRequiredPage>
+  );
 };
 
-export default withAuthenticationRequired(PluginPage);
+export default withAuthorisation()(PluginPage);

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

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import Public from "@reearth/classic/components/organisms/Settings/Project/Public";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -17,4 +17,4 @@ const PublicPage: React.FC<Props> = () => {
   );
 };
 
-export default PublicPage;
+export default withAuthorisation()(PublicPage);

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

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

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,4 @@ const ProjectList: React.FC<Props> = () => {
   return <OrganismsProjectList workspaceId={workspaceId} />;
 };
 
-export default withAuthenticationRequired(ProjectList);
+export default withAuthorisation()(ProjectList);

web/src/classic/components/pages/Settings/Workspace/Asset/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import Asset from "@reearth/classic/components/organisms/Settings/Workspace/Asset";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -17,4 +17,4 @@ const AssetPage: React.FC<Props> = () => {
   );
 };
 
-export default AssetPage;
+export default withAuthorisation()(AssetPage);

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

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import Workspace from "@reearth/classic/components/organisms/Settings/Workspace";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -17,4 +17,4 @@ const WorkspacePage: React.FC<Props> = () => {
   );
 };
 
-export default WorkspacePage;
+export default withAuthorisation()(WorkspacePage);

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

@@ -2,7 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import OrganismsWorkspaceList from "@reearth/classic/components/organisms/Settings/WorkspaceList";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -17,4 +17,4 @@ const WorkspaceList: React.FC<Props> = () => {
   );
 };
 
-export default WorkspaceList;
+export default withAuthorisation()(WorkspaceList);

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>;
+};