Fix refresh token and private routes

frontend/package.json

@@ -4,32 +4,37 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dataplane/dataplane-react-refreshtoken": "0.0.10",
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
-    "@dataplane/dataplane-react-refreshtoken": "0.0.10",
     "@mui/material": "^5.2.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.24.0",
     "countries-and-timezones": "^3.3.0",
+    "env-cmd": "^10.1.0",
     "graphql": "^16.1.0",
     "graphql-request": "^3.7.0",
+    "jwt-decode": "^3.1.2",
+    "qs": "^6.10.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.21.2",
+    "react-idle-timer": "^4.6.4",
     "react-lottie": "^1.2.3",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.3",
     "react-table": "^7.7.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH=../mainapp/frontbuild react-scripts build",
+    "start": "env-cmd -f ./src/enviroment/env.development react-scripts start --watch-poll",
+    "build": "env-cmd -f ./src/enviroment/env.build BUILD_PATH=../mainapp/frontbuild react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

frontend/src/App.js

@@ -26,28 +26,30 @@ function App() {
         },
     }),
     [],
-    );
+    );  
 
     const theme = React.useMemo(() => createTheme(createCustomTheme(mode)), [mode]);
 
     return (
         <ColorModeContext.Provider value={colorModeToggle}>
             <ThemeProvider theme={theme}>
-                <Box className="app" backgroundColor="background.main" >
+                <Box className="app" backgroundColor="background.main">
                     <UserAuth
                         refreshTokenUrl="/refreshtoken"
+                        LogincallbackUrl="/loginCallback"
                         loginUrl="/webapp/login"
                         logoutUrl="/webapp/logout"
                     >
-                            <Route exact path="/congratulations">
-                                <Congratulations />
-                            </Route>
-                            <Route exact path="/get-started">
-                                <GetStarted />
-                            </Route>
-                            <Route exact path="/login">
-                                <LoginUser />
-                            </Route>
+                        <Route exact path="/congratulations">
+                            <Congratulations />
+                        </Route>
+                        <Route exact path="/get-started">
+                            <GetStarted />
+                        </Route>
+                        <Route exact path="/login">
+                            <LoginUser />
+                        </Route>
+                        <Route exact path={["/", "/teams", "/teams/:teamId", "/teams/access/:accessId"]}>
                             <Layout>
                                 <Switch>
                                     <PrivateRoute exact path="/">
@@ -64,11 +66,12 @@ function App() {
                                     </PrivateRoute>
                                 </Switch>
                             </Layout>
-                        </UserAuth>
+                        </Route>
+                    </UserAuth>
                 </Box>
             </ThemeProvider>
         </ColorModeContext.Provider>
     );
 }
 
-export default App;
+export default App;

frontend/src/Auth/UserAuth.jsx

@@ -7,6 +7,7 @@ import axios from 'axios'
 import { Route, Switch, BrowserRouter } from 'react-router-dom'
 import { LoginCallback } from './LoginCallBack'
 import decode from 'jwt-decode'
+import removeBaseName from '../utils/removeBaseName'
 
 // LOGIC silent replacement of tokens:
 /*
@@ -132,9 +133,9 @@ export const UserAuth = ({
 
       axios
         .post(
-          refreshTokenUrl,
+          `${process.env.REACT_APP_DATAPLANE_ENDPOINT}${refreshTokenUrl}`,
           {},
-          { "headers": { 'Authorization': `Bearer ${refreshToken}` } , withCredentials: true }
+          { headers: { 'Authorization': `Bearer ${refreshToken}` } , withCredentials: true }
           // {withCredentials: true}
         )
         .then((resp) => {
@@ -150,7 +151,7 @@ export const UserAuth = ({
           // first set local storage:
           //  by redirecting this will flush out the existing in memory token
           // only use path name for redirection otherwise token will get removed from memory
-          localStorage.setItem('redirectLocation', window.location.pathname )
+          localStorage.setItem('redirectLocation', window.location.pathname === "/webapp" ? "/" : removeBaseName(window.location.pathname) )
           window.location.href = loginUrl
 
           return 'fail'
@@ -188,7 +189,6 @@ export const UserAuth = ({
 
 // This is a wrapper component to set the authState privateRoute flag
 const PrivateRouteChecker =({children}) => {
-  ConsoleLogHelper("AUTH: ", children)
   ConsoleLogHelper("on private route")
   let auth = useGlobalAuthState();
   const refreshCount = useHookState(refreshCountState)
@@ -216,13 +216,11 @@ const PrivateRouteChecker =({children}) => {
 
 // PrivateRoute just wraps the normal Route Component and ensure user is logged in if we gets to this route
 export const PrivateRoute = ({ children, ...rest }) => {
-  ConsoleLogHelper("PRIVATE ROUTE" ,children)
   return (
     <Route {...rest}>
       <PrivateRouteChecker>
         {children}
       </PrivateRouteChecker>
     </Route>
   );
-}
-
+}

frontend/src/components/LoginForm/index.jsx

@@ -28,7 +28,7 @@ const LoginForm = ({ handleNext }) => {
     //Store refresh_token to local storage and navigate to main page
     if (response){
       localStorage.setItem("refresh_token", response.refresh_token);      
-      history.push('/')
+      history.push(`loginCallback?accesstoken=${response.access_token}&refreshtoken=${response.refresh_token}`)
     }
   }
 

frontend/src/components/Sidebar/index.jsx

@@ -1,17 +1,15 @@
-import './styles.css'
-import { useLocation, useHistory } from "react-router-dom";
-import checkActivePage from "../../utils/checkActivePage";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faKey, faCog, faUsers, faGraduationCap, faBullhorn, faAlignCenter, faConciergeBell, faCodeBranch } from '@fortawesome/free-solid-svg-icons'
-import ThemeToggle from '../ThemeToggle';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
+import './styles.css';
+import { faAlignCenter, faBullhorn, faCodeBranch, faCog, faConciergeBell, faGraduationCap, faKey, faUsers } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Box } from '@mui/material';
 import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import { useHistory, useLocation } from "react-router-dom";
+import checkActivePage from "../../utils/checkActivePage";
 import CustomSwitch from '../CustomSwitch';
-import { Box } from '@mui/material';
 
 const Sidebar = () => {
     const location = useLocation();

frontend/src/enviroment/env.build

@@ -0,0 +1,3 @@
+REACT_APP_DATAPLANE_ENDPOINT=""
+REACT_APP_GRAPHQL_ENDPOINT_PUBLIC=/public/graphql
+REACT_APP_GRAPHQL_ENDPOINT_PRIVATE=/private/graphql

frontend/local.env → frontend/src/enviroment/env.development

@@ -1,3 +1,3 @@
-dataplane_graphql=http://localhost:9000/graphql
+REACT_APP_DATAPLANE_ENDPOINT=http://localhost:9000
 REACT_APP_GRAPHQL_ENDPOINT_PUBLIC=http://localhost:9000/public/graphql
 REACT_APP_GRAPHQL_ENDPOINT_PRIVATE=http://localhost:9000/private/graphql

frontend/src/pages/TeamGroup.jsx

@@ -18,7 +18,7 @@ const TeamGroup = () => {
     const [isAdmin] = useState(true);
 
     return (
-        <Box className="team_details" width="83%">
+        <Box className="page" width="83%">
             <Grid container alignItems="center">
                 <Typography component="h2" variant="h2" color="text.primary">
                     Team {">"} Access group {">"} Data engineering team

frontend/src/utils/removeBaseName.js

@@ -0,0 +1,5 @@
+const removeBaseName = (url) => {
+    return url.replace("/webapp", "");
+}
+
+export default removeBaseName

mainapp/auth/authtokens.go

@@ -42,7 +42,7 @@ func GenerateAccessClaims(userID string, username string, usertype string) strin
 
 	claim := &Claims{
 		RegisteredClaims: jwt.RegisteredClaims{
-			ExpiresAt: jwt.NewNumericDate(t.Add(5 * time.Minute)), // access token valid for 5 minutes
+			ExpiresAt: jwt.NewNumericDate(t.Add(60 * time.Second)), // access token valid for 5 minutes
 			IssuedAt:  jwt.NewNumericDate(t),
 			NotBefore: jwt.NewNumericDate(t),
 			Issuer:    "dataplane.app",

mainapp/routes/routes.go

@@ -6,7 +6,6 @@ import (
 	"dataplane/database/models"
 	"dataplane/logging"
 	"dataplane/logme"
-	"dataplane/scheduler"
 	"fmt"
 	"log"
 	"net/http"
@@ -61,7 +60,7 @@ func Setup() *fiber.App {
 	go database.DBConn.Delete(&models.AuthRefreshTokens{}, "expires < ?", time.Now())
 
 	// Start the scheduler
-	scheduler.SchedulerStart()
+	// scheduler.SchedulerStart()
 
 	//recover from panic
 	app.Use(recover.New())
@@ -83,7 +82,9 @@ func Setup() *fiber.App {
 
 	// CORS
 	app.Use(cors.New(cors.Config{
-		AllowOrigins: "*",
+		AllowOrigins:     "*",
+		AllowCredentials: true,
+		// AllowHeaders: "*",
 		AllowHeaders: "Origin, Content-Type, Accept, Authorization",
 	}))