fix: Integrate auth0 and test and fix studyportal

.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=

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

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": {

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 {
           <Route path="/admin">
             {this.canAccessAdmin(this.props.user) ? <AdminRouter /> : <ErrorPage />}
           </Route>
+          <Route path="/login/callback">
+            <Callback />
+          </Route>
           <Route path="*" component={ErrorPage} />
         </Switch>
       </Router>

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',
       },

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 (

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 (

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,

src/index.js

@@ -3,14 +3,17 @@ 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';
 import MobileBanner from 'components/cover/mobileBanner';
 
 ReactDOM.render(
   <Provider store={store}>
+    <PersistGate persistor={persistor}>
     <BrowserRouter>
       <App />
       <ToastContainer
@@ -24,6 +27,7 @@ ReactDOM.render(
       />
       <MobileBanner />
     </BrowserRouter>
+    </PersistGate>
   </Provider>,
   document.getElementById('root'),
 );

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 (
+    <div style={{height:"100vh",width:"100vh"}}>
+      Logging in
+    </div>
+  );
+};
+
+export default Callback;

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);