fix(web): fix page auth bug with aws (#567)

reearth · Jul 11, 2023 · 2bad970 · 2bad970
1 parent ac87ec3
commit 2bad970
Show file tree

Hide file tree

Showing 15 changed files with 57 additions and 56 deletions.
diff --git a/web/src/beta/pages/Page.tsx b/web/src/beta/pages/Page.tsx
@@ -1,8 +1,8 @@
 import React, { ReactElement, ReactNode, useMemo } from "react";
 
 import GlobalModal from "@reearth/classic/components/organisms/GlobalModal"; // todo: migrate to beta
+import { AuthenticatedPage } from "@reearth/services/auth";
 import { useMeFetcher, useProjectFetcher, useSceneFetcher } from "@reearth/services/api";
-import { AuthenticationRequiredPage } from "@reearth/services/auth";
 import { useTheme } from "@reearth/services/theme";
 
 import Loading from "../components/Loading";
@@ -61,11 +61,11 @@ const PageWrapper: React.FC<Props> = ({ sceneId, projectId, workspaceId, childre
 };
 
 const Page: React.FC<Props> = ({ sceneId, projectId, workspaceId, children }) => (
-  <AuthenticationRequiredPage>
+  <AuthenticatedPage>
     <PageWrapper sceneId={sceneId} projectId={projectId} workspaceId={workspaceId}>
       {children}
     </PageWrapper>
-  </AuthenticationRequiredPage>
+  </AuthenticatedPage>
 );
 
 export default Page;
diff --git a/web/src/classic/components/pages/Dashboard/index.tsx b/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, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const DashboardPage: React.FC<Props> = () => {
   const { workspaceId } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <Dashboard workspaceId={workspaceId} />
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(DashboardPage);
+export default DashboardPage;
diff --git a/web/src/classic/components/pages/EarthEditor/index.tsx b/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 { withAuthorisation, AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 import useHooks from "./hooks";
 
@@ -25,7 +25,7 @@ const EarthEditor: React.FC<Props> = () => {
   const core = useCore("earth_editor");
 
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <BrowserWidthWarning />
       <DndProvider>
         <EarthEditorPage
@@ -41,8 +41,8 @@ const EarthEditor: React.FC<Props> = () => {
           right={<RightMenu />}
         />
       </DndProvider>
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(EarthEditor);
+export default EarthEditor;
diff --git a/web/src/classic/components/pages/Preview/index.tsx b/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 { withAuthorisation, AuthenticationRequiredPage } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 import { useSceneId } from "@reearth/services/state";
 import { PublishedAppProvider as ThemeProvider } from "@reearth/services/theme";
 
@@ -25,12 +25,12 @@ const PreviewPage: React.FC<Props> = () => {
   return sceneId2 ? (
     <ThemeProvider>
       <DndProvider>
-        <AuthenticationRequiredPage>
+        <AuthenticatedPage>
           {typeof core === "boolean" && (core ? <CoreCanvasArea /> : <CanvasArea />)}
-        </AuthenticationRequiredPage>
+        </AuthenticatedPage>
       </DndProvider>
     </ThemeProvider>
   ) : null;
 };
 
-export default withAuthorisation()(PreviewPage);
+export default PreviewPage;
diff --git a/web/src/classic/components/pages/Settings/Account/index.tsx b/web/src/classic/components/pages/Settings/Account/index.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 
 import Account from "@reearth/classic/components/organisms/Settings/Account";
-import { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
 };
 
 const AccountPage: React.FC<Props> = () => (
-  <AuthenticationRequiredPage>
+  <AuthenticatedPage>
     <Account />
-  </AuthenticationRequiredPage>
+  </AuthenticatedPage>
 );
 
-export default withAuthorisation()(AccountPage);
+export default AccountPage;
diff --git a/web/src/classic/components/pages/Settings/Project/Dataset/index.tsx b/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, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const DatasetPage: React.FC<Props> = () => {
   const { projectId = "" } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <Dataset projectId={projectId} />
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(DatasetPage);
+export default DatasetPage;
diff --git a/web/src/classic/components/pages/Settings/Project/Plugin/index.tsx b/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 { AuthenticationRequiredPage, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const PluginPage: React.FC<Props> = () => {
   const { projectId = "" } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <Plugin projectId={projectId} />;
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(PluginPage);
+export default PluginPage;
diff --git a/web/src/classic/components/pages/Settings/Project/Public/index.tsx b/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, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const PublicPage: React.FC<Props> = () => {
   const { projectId = "" } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <Public projectId={projectId} />
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(PublicPage);
+export default PublicPage;
diff --git a/web/src/classic/components/pages/Settings/Project/index.tsx b/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, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const ProjectPage: React.FC<Props> = () => {
   const { projectId = "" } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <Project projectId={projectId} />
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(ProjectPage);
+export default ProjectPage;
diff --git a/web/src/classic/components/pages/Settings/ProjectList/index.tsx b/web/src/classic/components/pages/Settings/ProjectList/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import OrganismsProjectList from "@reearth/classic/components/organisms/Settings/ProjectList";
-import { withAuthorisation } from "@reearth/services/auth";
 
 export interface Props {
   path?: string;
@@ -13,4 +12,4 @@ const ProjectList: React.FC<Props> = () => {
   return <OrganismsProjectList workspaceId={workspaceId} />;
 };
 
-export default withAuthorisation()(ProjectList);
+export default ProjectList;
diff --git a/web/src/classic/components/pages/Settings/Workspace/Asset/index.tsx b/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, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const AssetPage: React.FC<Props> = () => {
   const { workspaceId = "" } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <Asset workspaceId={workspaceId} />
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(AssetPage);
+export default AssetPage;
diff --git a/web/src/classic/components/pages/Settings/Workspace/index.tsx b/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, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const WorkspacePage: React.FC<Props> = () => {
   const { workspaceId = "" } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <Workspace workspaceId={workspaceId} />
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(WorkspacePage);
+export default WorkspacePage;
diff --git a/web/src/classic/components/pages/Settings/WorkspaceList/index.tsx b/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, withAuthorisation } from "@reearth/services/auth";
+import { AuthenticatedPage } from "@reearth/services/auth";
 
 export type Props = {
   path?: string;
@@ -11,10 +11,10 @@ export type Props = {
 const WorkspaceList: React.FC<Props> = () => {
   const { workspaceId = "" } = useParams();
   return (
-    <AuthenticationRequiredPage>
+    <AuthenticatedPage>
       <OrganismsWorkspaceList workspaceId={workspaceId} />
-    </AuthenticationRequiredPage>
+    </AuthenticatedPage>
   );
 };
 
-export default withAuthorisation()(WorkspaceList);
+export default WorkspaceList;
diff --git a/web/src/services/auth/authProvider.tsx b/web/src/services/auth/authProvider.tsx
@@ -1,5 +1,5 @@
 import { Auth0Provider } from "@auth0/auth0-react";
-import React, { createContext, ReactNode } from "react";
+import React, { createContext, ReactNode, Fragment } from "react";
 
 import type { AuthHook } from "./authHook";
 import { useAuth0Auth } from "./authOAuth";
@@ -47,5 +47,5 @@ export const AuthProvider: React.FC<{ children?: ReactNode }> = ({ children }) =
     return <CognitoWrapper>{children}</CognitoWrapper>;
   }
 
-  return <>{children}</>; // or some default fallback
+  return <Fragment>{children}</Fragment>; // or some default fallback
 };
diff --git a/web/src/services/auth/index.tsx b/web/src/services/auth/index.tsx
@@ -7,17 +7,19 @@ import { useAuthenticationRequired } from "./useAuth";
 export { AuthProvider } from "./authProvider";
 export { useAuth, useCleanUrl, useAuthenticationRequired } from "./useAuth";
 
-export const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({ children }) => {
+const AuthenticationRequiredPage: React.FC<{ children?: ReactNode }> = ({ children }) => {
   const [isAuthenticated] = useAuthenticationRequired(); // TODO: show error
   return isAuthenticated && children ? <>{children}</> : null;
 };
 
-export const withAuthorisation = (): ((props: any) => React.FC<any>) => {
+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>;
+  } else if (authProvider === "auth0") {
+    return withAuthenticationRequired as unknown as (props: any) => React.FC<any>;
   }
-
-  return withAuthenticationRequired as unknown as (props: any) => React.FC<any>;
+  return (props: any) => props;
 };
+
+export const AuthenticatedPage = withAuthorisation()(AuthenticationRequiredPage);