From 6d6e2efeae690aefcc38a87c65c0d72e13bb6835 Mon Sep 17 00:00:00 2001 From: Pragyansh Chaturvedi Date: Sat, 28 Jan 2023 07:56:07 -0500 Subject: [PATCH] fix: Integrate auth0 and test and fix studyportal --- .env.sample | 3 +++ docker/Dockerfile.dev | 2 ++ package-lock.json | 5 ++++ package.json | 2 ++ src/App.js | 6 +++++ src/api/userApi.js | 6 +++-- src/components/header/header.js | 3 ++- src/components/home/header.js | 3 ++- src/config/config.js | 3 +++ src/index.js | 4 +++ src/pages/callback.js | 45 +++++++++++++++++++++++++++++++++ src/store/store.js | 13 +++++++++- 12 files changed, 90 insertions(+), 5 deletions(-) create mode 100644 src/pages/callback.js diff --git a/.env.sample b/.env.sample index a35e5b0..b0cb5a5 100644 --- a/.env.sample +++ b/.env.sample @@ -4,3 +4,6 @@ REACT_APP_ARCEUS_ROOT=http://arceus.sdslabs.local REACT_APP_STUDY_ROOT=http://studyportal.sdslabs.local REACT_APP_MEDIA_ROOT=http://localhost:8005 REACT_APP_WS_ROOT=ws://localhost:8005 +REACT_APP_AUTH_ROOT= +REACT_APP_AUTH_CLIENT_ID= +REACT_APP_AUTH_REDIRECT= diff --git a/docker/Dockerfile.dev b/docker/Dockerfile.dev index f310a01..2f2c3ce 100644 --- a/docker/Dockerfile.dev +++ b/docker/Dockerfile.dev @@ -13,3 +13,5 @@ COPY . /usr/app RUN rm -rf /usr/app/node_modules/ RUN npm install + +RUN npm i redux-persist diff --git a/package-lock.json b/package-lock.json index 7752413..0e17fb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14715,6 +14715,11 @@ "@babel/runtime": "^7.9.2" } }, + "redux-persist": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz", + "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==" + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index 1f57383..a05c901 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react-swipeable-views": "^0.13.9", "react-toastify": "^7.0.3", "redux": "^4.0.4", + "redux-persist": "^6.0.0", "websocket": "^1.0.31" }, "scripts": { @@ -64,6 +65,7 @@ "husky": "^4.3.6", "lint-staged": "^10.5.3", "prettier": "^2.2.1", + "redux-persist": "^6.0.0", "react-styleguidist": "^9.2.0" }, "husky": { diff --git a/src/App.js b/src/App.js index 36edefa..b22dc71 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ import { getDepartmentsList } from 'api/departmentApi'; import { getUser } from 'utils/getUser'; import { ADD_DEPARTMENTS, RESET_APP } from 'constants/action-types'; import AdminRouter from 'routers/AdminRouter'; +import Callback from './pages/callback'; function mapStateToProps(state) { return { @@ -38,6 +39,8 @@ class App extends Component { } canAccessAdmin = (user) => { + console.log("yeh le user") + console.log(user) return user.login && (user.role === 'admin' || user.role === 'moderator'); }; @@ -64,6 +67,9 @@ class App extends Component { {this.canAccessAdmin(this.props.user) ? : } + + + diff --git a/src/api/userApi.js b/src/api/userApi.js index 9866985..e1c6216 100644 --- a/src/api/userApi.js +++ b/src/api/userApi.js @@ -1,5 +1,5 @@ import { axiosInstance } from './axiosInstance'; -import { setCookie } from 'utils/handleCookies'; +import { getCookie, setCookie } from 'utils/handleCookies'; function loginUserWithToken(token) { return axiosInstance @@ -20,10 +20,12 @@ function loginUserWithToken(token) { } function loginUserWithCookie() { + console.log(`Authorization ${document.cookie}`) + const sdslabs = getCookie('sdslabs') return axiosInstance .get('/users', { headers: { - Authorization: 'Bearer None', + Authorization: `StudyPortal ${sdslabs}`, 'Content-Type': 'application/json', Accept: 'application/json', }, diff --git a/src/components/header/header.js b/src/components/header/header.js index aeff224..bd7caae 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -18,7 +18,8 @@ import { Link } from 'react-router-dom'; const Header = () => { const user = useSelector((state) => state.user); const authenticate = (value) => { - window.location.href = `${CONFIG.arceusRoot}/${value}?redirect=${window.location.href}`; + window.location.href = `${CONFIG.authRoot}/authorize?response_type=token&client_id=${CONFIG.authClientId}&scope=openid%20profile%20email&redirect_uri=${CONFIG.authRedirect}`; + }; return ( diff --git a/src/components/home/header.js b/src/components/home/header.js index 2bd1e81..c683eef 100644 --- a/src/components/home/header.js +++ b/src/components/home/header.js @@ -18,7 +18,8 @@ import { Link } from 'react-router-dom'; const Header = () => { const user = useSelector((state) => state.user); const authenticate = (value) => { - window.location.href = `${CONFIG.arceusRoot}/${value}?redirect=${window.location.href}`; + window.location.href = `${CONFIG.authRoot}/authorize?response_type=token&client_id=${CONFIG.authClientId}&scope=openid%20profile%20email&redirect_uri=${CONFIG.authRedirect}`; + }; return ( diff --git a/src/config/config.js b/src/config/config.js index 988ebb2..0e13b5a 100644 --- a/src/config/config.js +++ b/src/config/config.js @@ -1,4 +1,7 @@ export const CONFIG = { + authRoot: process.env.REACT_APP_AUTH_ROOT, + authClientId: process.env.REACT_APP_AUTH_CLIENT_ID, + authRedirect: process.env.REACT_APP_AUTH_REDIRECT, nexusRoot: process.env.REACT_APP_NEXUS_ROOT, arceusRoot: process.env.REACT_APP_ARCEUS_ROOT, studyRoot: process.env.REACT_APP_STUDY_ROOT, diff --git a/src/index.js b/src/index.js index da3eb8f..3e8688c 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,9 @@ import ReactDOM from 'react-dom'; import { ToastContainer } from 'react-toastify'; import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; +import { PersistGate } from 'redux-persist/lib/integration/react'; import store from 'store/store'; +import { persistor } from "store/store"; import 'react-toastify/dist/ReactToastify.css'; import './index.css'; import App from './App'; @@ -11,6 +13,7 @@ import MobileBanner from 'components/cover/mobileBanner'; ReactDOM.render( + + , document.getElementById('root'), ); diff --git a/src/pages/callback.js b/src/pages/callback.js new file mode 100644 index 0000000..f56d53e --- /dev/null +++ b/src/pages/callback.js @@ -0,0 +1,45 @@ +import React, { useRef, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { RESET_ACTIVES, CLOSE_MODAL } from 'constants/action-types'; +import { useHistory } from 'react-router-dom'; + +const useDidMount = () => { + const didMountRef = useRef(true); + const history=useHistory() + useEffect(() => { + didMountRef.current = false; + const url = window.location.href + const urlParams = url.split("#")[1].split("&") + const accessToken = urlParams[0].split("=")[1] + const expireTime = urlParams[2].split("=")[1] + console.log(accessToken, expireTime); + try { + document.cookie = `sdslabs=${accessToken}; Max-Age=${expireTime}; domain=10.25.1.18; SameSite=Lax;`; + console.log("cookie made") + } catch (err) {console.log(err)} + history.push("/") + }); + return didMountRef.current; +}; + +/** + * Component to render different pages in Studyportal. + */ +const Callback = () => { + const dispatch = useDispatch(); + const didMount = useDidMount(); + useEffect(() => { + if (didMount) { + dispatch({ type: CLOSE_MODAL }); + dispatch({ type: RESET_ACTIVES }); + } // eslint-disable-next-line + }, [didMount]); + + return ( +
+ Logging in +
+ ); +}; + +export default Callback; diff --git a/src/store/store.js b/src/store/store.js index 01b91f0..4460cfe 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -4,6 +4,9 @@ import contentReducer from 'reducers/contentReducer'; import modalReducer from 'reducers/modalReducer'; import searchReducer from 'reducers/searchReducer'; import adminPanelReducer from 'reducers/adminPanelReducer'; +import { persistReducer, persistStore } from 'redux-persist'; +import storage from 'redux-persist/lib/storage'; +// import autoMergeLevel3 from 'redux-persist/lib/stateReconciler/autoMergeLevel3'; const rootReducer = combineReducers({ user: userReducer, @@ -13,5 +16,13 @@ const rootReducer = combineReducers({ adminPanel: adminPanelReducer, }); -const store = createStore(rootReducer); +const persistConfig = { + key: 'root', + storage +} + +const persistedReducer = persistReducer(persistConfig, rootReducer) + +const store = createStore(persistedReducer); export default store; +export const persistor = persistStore(store);