feat: adapt web to handle auth0 authentication

pathwar · May 16, 2023 · 9c6e9e0 · 9c6e9e0
1 parent 111aa83
commit 9c6e9e0
Show file tree

Hide file tree

Showing 9 changed files with 30,825 additions and 295 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -16,6 +16,7 @@
     "start:local-api": "env-cmd --file ./.env.integration npm run develop"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.1.0",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@loadable/component": "^5.10.2",

diff --git a/web/src/actions/userSession.js b/web/src/actions/userSession.js
@@ -5,20 +5,18 @@ import {
   LOGIN_FAILED,
   SET_USER_SESSION,
   SET_USER_SESSION_FAILED,
-  SET_KEYCLOAK_SESSION,
   LOGOUT,
   DELETE_ACCOUNT_FAILED,
   DELETE_ACCOUNT_SUCCESS,
   VALIDATE_COUPON_SUCCESS,
   VALIDATE_COUPON_FAILED,
-  SET_AUTH_SESSION,
+  SET_AUTH0_SESSION,
 } from "../constants/actionTypes";
-import {USER_AUTH_SESSION_TOKEN, USER_SESSION_TOKEN_NAME} from "../constants/userSession";
+import {USER_AUTH_SESSION_TOKEN} from "../constants/userSession";
 import {
   getUserSession,
   deleteUserAccount,
   postCouponValidation,
-  fetchAccessToken,
 } from "../api/userSession";
 import {
   fetchUserOrganizationsInvitations,
@@ -100,17 +98,16 @@ export const fetchUserSession = postPreferences => async dispatch => {
 };
 
 //TODO: receive authenticated parameter from the provider
-export const setAuthSession = () => async dispatch => {
+export const setAuthSession = token => async dispatch => {
   try {
-    const response = await fetchAccessToken();
     dispatch({
-      type: SET_AUTH_SESSION,
+      type: SET_AUTH0_SESSION,
       payload: {
-        token: response.data.token,
+        token: token,
         authenticated: true,
       }
     })
-    Cookies.set(USER_AUTH_SESSION_TOKEN, response.data.token);
+    Cookies.set(USER_AUTH_SESSION_TOKEN, token);
     dispatch(fetchUserSession(true));
   } catch (error) {
     dispatch({ type: LOGIN_FAILED, payload: { error } });

diff --git a/web/src/api/index.js b/web/src/api/index.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 import Cookies from "js-cookie";
-import {USER_AUTH_SESSION_TOKEN, USER_SESSION_TOKEN_NAME} from "../constants/userSession";
+import {USER_AUTH_SESSION_TOKEN} from "../constants/userSession";
 
 const withToken = function(config) {
   const token = Cookies.get(USER_AUTH_SESSION_TOKEN);
@@ -14,9 +14,5 @@ export const baseApi = axios.create({
   baseURL: process.env.GATSBY_API_URL,
 });
 
-export const baseAuthApi = axios.create({
-  baseURL: process.env.AUTH_SERVICE_URL,
-});
-
 // Authenticated routes
 baseApi.interceptors.request.use(withToken);
diff --git a/web/src/api/userSession.js b/web/src/api/userSession.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import {baseApi, baseAuthApi} from "./index";
+import {baseApi} from "./index";
 
 export function getUserSession() {
   return baseApi.get("/user/session");
@@ -14,8 +14,3 @@ export function deleteUserAccount(reason) {
 export function postCouponValidation(hash, teamID) {
   return baseApi.post(`/coupon-validation`, { hash: hash, team_id: teamID });
 }
-
-// authentication calls
-export function fetchAccessToken() {
-  return baseAuthApi.get("/token");
-}
diff --git a/web/src/components/ProtectedRoute.js b/web/src/components/ProtectedRoute.js
@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Dimmer } from "tabler-react";
 import { useAuth0 } from "@auth0/auth0-react";
+import {setAuthSession} from "../actions/userSession";
 
 
 //TODO: update redux state with isAuthenticated value
@@ -10,28 +11,32 @@ import { useAuth0 } from "@auth0/auth0-react";
 const ProtectedRoute = ({ component: Component, ...rest }) => {
   const dispatch = useDispatch();
   const userSession = useSelector(state => state.userSession);
-  const { isLoading, isAuthenticated, loginWithRedirect, getAccessTokenSilently } = useAuth0()
+  const {
+    isLoading,
+    isAuthenticated,
+    loginWithRedirect,
+    getAccessTokenSilently,
+  } = useAuth0()
 
   if (!isLoading && !isAuthenticated) {
-    loginWithRedirect();
-  } else if (!isLoading && isAuthenticated) {
-    getAccessTokenSilently().then((token) => {
-      console.log(token.__raw);
-    });
+    loginWithRedirect()
+      .then(() => {getAccessTokenSilently()
+        .then((token) => {
+          console.log(token);
+          dispatch(setAuthSession(token))
+        })
+      })
+  } else if (!isLoading && isAuthenticated && !userSession.accessToken) {
+     getAccessTokenSilently().then((token) => {
+        console.log(token);
+        dispatch(setAuthSession(token))
+     })
+  }
+
+  if (userSession.isAuthenticated && userSession.accessToken) {
+    return <Component {...rest} />;
   }
-  // useEffect(() => {
-  //   const { access_token } = userSession;
-  //   if (!access_token) {
-  //     dispatch(setAuthSession());
-  //   }
-  // }, []);
 
-    // if (userSession.isAuthenticated) {
-    //   return (
-    //   <Component {...rest} />
-    //   );
-    // }
-  console.log(isLoading, isAuthenticated)
   return <Dimmer active loader />;
 };
 

diff --git a/web/src/constants/actionTypes.js b/web/src/constants/actionTypes.js
@@ -2,7 +2,7 @@
 export const LOGIN_FAILED = "LOGIN_FAILED";
 export const SET_USER_SESSION = "SET_USER_SESSION";
 export const SET_USER_SESSION_FAILED = "SET_USER_SESSION_FAILED";
-export const SET_AUTH_SESSION = "SET_AUTH_SESSION";
+export const SET_AUTH0_SESSION = "SET_AUTH0_SESSION";
 export const LOGOUT = "LOGOUT";
 export const DELETE_ACCOUNT_SUCCESS = "DELETE_ACCOUNT_SUCCESS";
 export const DELETE_ACCOUNT_FAILED = "DELETE_ACCOUNT_FAILED";

diff --git a/web/src/constants/userSession.js b/web/src/constants/userSession.js
@@ -1,2 +1 @@
-export const USER_SESSION_TOKEN_NAME = "KEYCLOAK_IDENTITY";
 export const USER_AUTH_SESSION_TOKEN = "AUTH_TOKEN";
diff --git a/web/src/state/userSessionReducer.js b/web/src/state/userSessionReducer.js
@@ -5,7 +5,7 @@ import {
   VALIDATE_COUPON_SUCCESS,
   VALIDATE_CHALLENGE_SUCCESS,
   BUY_CHALLENGE_SUCCESS,
-  SET_AUTH_SESSION,
+  SET_AUTH0_SESSION,
 } from "../constants/actionTypes";
 
 const initialState = {
@@ -45,7 +45,7 @@ export default function userSessionReducer(
         accessToken: undefined,
       };
 
-      case SET_AUTH_SESSION:
+      case SET_AUTH0_SESSION:
       return {
         ...state,
         accessToken: action.payload.token,