Merge pull request #164 from dekart-xyz/oss-fix-error-wher-requesting…

…-auth

Oss fix error wher requesting auth

Makefile

@@ -161,15 +161,19 @@ postgres:
 docker: # build docker for local use
 	docker buildx build --push --tag ${DEKART_DOCKER_DEV_TAG} -o type=image --platform=linux/amd64 -f ./Dockerfile .
 
+up-and-down:
+	docker-compose  --env-file .env --profile local up; docker-compose --env-file .env --profile local down --volumes
+
+
 up:
 	docker-compose  --env-file .env --profile local up
 
+down:
+	docker-compose --env-file .env --profile local down --volumes
+
 cloudsql:
 	docker-compose  --env-file .env --profile cloudsql up
 
-rm:
-	docker-compose rm
-
 server:
 	go run ./src/server/main.go
 

src/client/App.js

@@ -15,9 +15,8 @@ import { useSelector, useDispatch } from 'react-redux'
 import { getUsage } from './actions/usage'
 import { AuthState, RedirectState as DekartRedirectState } from '../proto/dekart_pb'
 import { getEnv } from './actions/env'
-import { setRedirectState } from './actions/redirectState'
+import { authRedirect, setRedirectState } from './actions/redirect'
 import { subscribeUserStream, unsubscribeUserStream } from './actions/user'
-import { authRedirect } from './lib/api'
 
 // RedirectState reads states passed in the URL from the server
 function RedirectState () {
@@ -50,15 +49,16 @@ function AppRedirect () {
   const { status, doNotAuthenticate } = httpError
   const { newReportId } = useSelector(state => state.reportStatus)
   const location = useLocation()
+  const dispatch = useDispatch()
 
   useEffect(() => {
     if (status === 401 && doNotAuthenticate === false) {
       const state = new AuthState()
       state.setUiUrl(window.location.href)
       state.setAction(AuthState.Action.ACTION_REQUEST_CODE)
-      authRedirect(state)
+      dispatch(authRedirect(state))
     }
-  }, [status, doNotAuthenticate])
+  }, [status, doNotAuthenticate, dispatch])
 
   if (status === 401 && doNotAuthenticate === false) {
     // redirect to authentication endpoint from useEffect

src/client/Header.js

@@ -1,12 +1,12 @@
 import styles from './Header.module.css'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import DekartMenu from './DekartMenu'
 import { getRef } from './lib/ref'
 import Avatar from 'antd/es/avatar'
 import Dropdown from 'antd/es/dropdown'
 import { AuthState } from '../proto/dekart_pb'
-import { authRedirect } from './lib/api'
 import classNames from 'classnames'
+import { authRedirect } from './actions/redirect'
 
 function getSignature (email) {
   if (!email) {
@@ -23,6 +23,7 @@ function getSignature (email) {
 function User ({ buttonDivider }) {
   const token = useSelector(state => state.token)
   const user = useSelector(state => state.user)
+  const dispatch = useDispatch()
   if (!user || !token) {
     return null
   }
@@ -46,7 +47,7 @@ function User ({ buttonDivider }) {
                 state.setUiUrl(window.location.href)
                 state.setAction(AuthState.Action.ACTION_REQUEST_CODE)
                 state.setSwitchAccount(true)
-                authRedirect(state)
+                dispatch(authRedirect(state))
               }
             },
             {
@@ -56,7 +57,7 @@ function User ({ buttonDivider }) {
                 state.setUiUrl(window.location.href)
                 state.setAction(AuthState.Action.ACTION_REVOKE)
                 state.setAccessTokenToRevoke(token.access_token)
-                authRedirect(state)
+                dispatch(authRedirect(state))
               }
             }
           ]

src/client/actions/message.js

@@ -58,6 +58,7 @@ export function setHttpError (status, message = '') {
 export function setStreamError (code, msg) {
   return (dispatch) => {
     dispatch({ type: setStreamError.name })
+    console.error(code)
     // https://github.com/grpc/grpc/blob/master/doc/statuscodes.md
     switch (code) {
       case 1:

src/client/actions/redirect.js

@@ -0,0 +1,18 @@
+
+export function setRedirectState (redirectState) {
+  return { type: setRedirectState.name, redirectState }
+}
+
+const { REACT_APP_API_HOST } = process.env // this never changes, passed during build
+
+// authRedirect will redirect the browser to the authentication endpoint
+export function authRedirect (state) {
+  return async (dispatch) => {
+    dispatch({ type: authRedirect.name })
+    const req = new URL('/api/v1/authenticate', REACT_APP_API_HOST || window.location.href)
+    state.setAuthUrl(req.href)
+    const stateBase64 = btoa(String.fromCharCode.apply(null, state.serializeBinary()))
+    req.searchParams.set('state', stateBase64)
+    window.location.href = req.href
+  }
+}

src/client/lib/api.js

@@ -29,13 +29,3 @@ export async function get (endpoint, token = null) {
   }
   return res
 }
-
-const { REACT_APP_API_HOST } = process.env // this never changes, passed during build
-
-export function authRedirect (state) {
-  const req = new URL('/api/v1/authenticate', REACT_APP_API_HOST || window.location.href)
-  state.setAuthUrl(req.href)
-  const stateBase64 = btoa(String.fromCharCode.apply(null, state.serializeBinary()))
-  req.searchParams.set('state', stateBase64)
-  window.location.href = req.href
-}

src/client/reducers/httpErrorReducer.js

@@ -0,0 +1,42 @@
+import { setHttpError } from '../actions/message'
+import { authRedirect, setRedirectState } from '../actions/redirect'
+
+export default function httpError (state = {}, action) {
+  switch (action.type) {
+    case setHttpError.name: {
+      if (action.status === 401 && state.doNotAuthenticate) {
+        // just keep showing auth error, do not override it with other 401
+        return state
+      } else if (state.redirecting) {
+        // do nothing as page is getting redirected and requests are getting cancelled
+        return state
+      } else {
+        return {
+          status: action.status,
+          message: action.message,
+          doNotAuthenticate: false
+        }
+      }
+    }
+    case authRedirect.name: {
+      return {
+        ...state,
+        redirecting: true
+      }
+    }
+    case setRedirectState.name: {
+      const err = action.redirectState.getError()
+      if (err) {
+        return {
+          status: 401,
+          message: err,
+          doNotAuthenticate: true
+        }
+      } else {
+        return {} // reset error
+      }
+    }
+    default:
+      return state
+  }
+}

src/client/reducers/rootReducer.js

@@ -2,19 +2,19 @@ import { combineReducers } from 'redux'
 import { ActionTypes as KeplerActionTypes } from '@dekart-xyz/kepler.gl/dist/actions'
 import { setUserMapboxAccessTokenUpdater } from '@dekart-xyz/kepler.gl/dist/reducers/ui-state-updaters'
 import { openReport, reportUpdate, forkReport, saveMap, reportTitleChange, newReport, newForkedReport, unsubscribeReports, reportsListUpdate } from '../actions/report'
-import { downloading, finishDownloading, setHttpError, setStreamError } from '../actions/message'
+import { downloading, finishDownloading, setStreamError } from '../actions/message'
 import { closeDatasetSettingsModal, openDatasetSettingsModal, setActiveDataset } from '../actions/dataset'
 import { queries, queryStatus } from './queryReducer'
 import { setUsage } from '../actions/usage'
 import { setEnv } from '../actions/env'
 import { newRelease } from '../actions/version'
 import { uploadFile, uploadFileProgress, uploadFileStateChange } from '../actions/file'
-import { setRedirectState } from '../actions/redirectState'
 import keplerGlReducer from '@dekart-xyz/kepler.gl/dist/reducers'
 import stream from './streamReducer'
 import token from './tokenReducer'
 import connection from './connectionReducer'
 import user from './userReducer'
+import httpError from './httpErrorReducer'
 
 const customKeplerGlReducer = keplerGlReducer.initialState({
   uiState: {
@@ -179,37 +179,6 @@ function env (state = defaultEnv, action) {
   }
 }
 
-function httpError (state = {}, action) {
-  switch (action.type) {
-    case setHttpError.name: {
-      if (action.status === 401 && state.doNotAuthenticate) {
-        // just keep showing auth error, do not override it with other 401
-        return state
-      } else {
-        return {
-          status: action.status,
-          message: action.message,
-          doNotAuthenticate: false
-        }
-      }
-    }
-    case setRedirectState.name: {
-      const err = action.redirectState.getError()
-      if (err) {
-        return {
-          status: 401,
-          message: err,
-          doNotAuthenticate: true
-        }
-      } else {
-        return {} // reset error
-      }
-    }
-    default:
-      return state
-  }
-}
-
 function downloadingDatasets (state = [], action) {
   const { dataset } = action
   switch (action.type) {

src/client/reducers/tokenReducer.js

@@ -1,4 +1,4 @@
-import { setRedirectState } from '../actions/redirectState'
+import { setRedirectState } from '../actions/redirect'
 
 export default function token (state = null, action) {
   switch (action.type) {