Merge pull request #585 from Emina-M/add-redirect-after-auth

Support redirection to a specific page

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.9.0-rc.0] - 2024-07-08
 ### Added
 - Allow generating admin JWT using `gen-edgehog-jwt`.
+- Support redirection to a specific page after successful authentication
 ### Changed
 - Change logo and brand images with the latest brand revision.
 - BREAKING: The Admin API is now JSON-API compliant, which implies a slightly different format,

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 /*
   This file is part of Edgehog.
 
-  Copyright 2021-2023 SECO Mind Srl
+  Copyright 2021-2024 SECO Mind Srl
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -49,6 +49,7 @@ import UpdateCampaignCreate from "pages/UpdateCampaignCreate";
 import UpdateCampaigns from "pages/UpdateCampaigns";
 import Login from "pages/Login";
 import Logout from "pages/Logout";
+import AttemptLogin from "pages/AttemptLogin";
 
 import { version, repository, bugs } from "../package.json";
 
@@ -58,11 +59,13 @@ type RouterRule = {
 };
 
 const publicRoutes: RouterRule[] = [
+  { path: Route.auth, element: <AttemptLogin /> },
   { path: Route.login, element: <Login /> },
   { path: "*", element: <Navigate to={Route.login} /> },
 ];
 
 const authenticatedRoutes: RouterRule[] = [
+  { path: Route.auth, element: <AttemptLogin /> },
   { path: Route.devices, element: <Devices /> },
   { path: Route.devicesEdit, element: <Device /> },
   { path: Route.deviceGroups, element: <DeviceGroups /> },

frontend/src/Navigation.tsx

@@ -51,6 +51,7 @@ enum Route {
   updateCampaigns = "/update-campaigns",
   updateCampaignsNew = "/update-campaigns/new",
   updateCampaignsEdit = "/update-campaigns/:updateCampaignId",
+  auth = "/auth",
   login = "/login",
   logout = "/logout",
 }
@@ -108,6 +109,7 @@ const generatePath = (route: ParametricRoute): string => {
     case Route.updateCampaignsNew:
     case Route.login:
     case Route.logout:
+    case Route.auth:
       return route.route;
   }
 };

frontend/src/pages/AttemptLogin.tsx

@@ -0,0 +1,65 @@
+/*
+  This file is part of Edgehog.
+
+  Copyright 2024 SECO Mind Srl
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+  SPDX-License-Identifier: Apache-2.0
+*/
+
+import { useEffect } from "react";
+import { Spinner } from "react-bootstrap";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { Route } from "Navigation";
+import { AuthConfig, useAuth } from "../contexts/Auth";
+
+const AttemptLogin = () => {
+  const auth = useAuth();
+  const { search } = useLocation();
+  const searchParams = new URLSearchParams(search);
+  const tenantSlug = searchParams.get("tenantSlug") || "";
+  const authToken = searchParams.get("authToken") || "";
+  const redirectTo = searchParams.get("redirectTo") || "";
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const authConfig: AuthConfig = {
+      tenantSlug: tenantSlug,
+      authToken: authToken,
+    };
+    auth
+      .login(authConfig, false)
+      .then((isValidLogin) => {
+        if (isValidLogin) {
+          navigate(redirectTo, { replace: true });
+        } else {
+          navigate(Route.login, { replace: true });
+        }
+      })
+      .catch(() => {
+        navigate(Route.login, { replace: true });
+      });
+  }, []);
+
+  return (
+    <div data-testid="app" className="d-flex vh-100 flex-column">
+      <div className="d-flex justify-content-center">
+        <Spinner />
+      </div>
+    </div>
+  );
+};
+
+export default AttemptLogin;