get user identity on log in

Author: dylanmcreynolds

web-frontend/src/App.tsx

@@ -4,37 +4,38 @@ import Container from "@mui/material/Container";
 import ErrorBoundary from "./components/error-boundary";
 import { Outlet } from "react-router-dom";
 import TiledAppBar from "./components/tiled-app-bar";
-import UserContext, {userObjectContext, userUpdateFunctionTemplate} from './context/user';
+import UserContext, {userObjectContext} from './context/user';
 
 
 
 
 function App() {
 
   const [userContext, setUserContext] = React.useState(userObjectContext)
-
-  // Create funtion to update the current context, prioritizing new over old changed properties
+  const [user, setUser] = React.useState({user: ""});
+  const value = { user, setUser };
+  // Create function to update the current context, prioritizing new over old changed properties
   const updateContext = (contextUpdates = {}) =>
     setUserContext(currentContext => ({ ...currentContext, ...contextUpdates }))
 
   // useEffect prevents the entire context for rerendering when component rerenders
   React.useEffect(() => {
-    if (userContext?.updateUser === userUpdateFunctionTemplate) {
+
       updateContext({
-        updateStatus: (value: string) => updateContext({ status: value }),
+        updateStatus: (value: string) => updateContext({ user: value }),
       })
-    }
-  }, [userContext?.updateUser])
+
+  }, [])
   return (
     <Container>
-      <UserContext.Provider value={userContext} >
+      {/* <UserContext.Provider value={user.user} > */}
         <AxiosInterceptor>
           <TiledAppBar />
           <ErrorBoundary>
             <Outlet />
           </ErrorBoundary>
         </AxiosInterceptor>
-        </UserContext.Provider>
+        {/* </UserContext.Provider> */}
       </Container>
   );
 }

web-frontend/src/client.ts

@@ -66,33 +66,45 @@ interface Props {
 const AxiosInterceptor = ({children}: Props) => {
 
   const navigate = useNavigate();
-  const userContext = useContext(UserContext);
+  const {user, setUser} = useContext(UserContext);
 
   useEffect(() => {
 
-      const responseInterceptor = (response: AxiosResponse) => {
+      const responseInterceptor = async (response: AxiosResponse) => {
           // if 401, delete local toke
 
           // looku
-          const refreshToken = response.data.access_token;
+          const refreshToken = response.data.refresh_token;
           if (refreshToken){
             localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken)
             localStorage.setItem(ACCESS_TOKEN_KEY, response.data.access_token);
+            // follow up request to /api/whoami to get user info
+            const whomiResponse = await axiosInstance.get("/auth/whoami");
+            //what provider was this? this is ugly
+            const provider = response.config.url!.split("/")[2];
+            //now find the identity for this provider
+            // I guess a types file for tiled would be could, we could avoid the any here
+            const identity = whomiResponse.data.identities.find((identity: any) => identity.provider === provider);
+            //update user context
+            setUser(identity.id);
           }
 
-          //uddate user
+
+
+
+
           return response;
       }
 
-      const requestInterceptor = (requestConfig: AxiosRequestConfig) => {
+      const requestInterceptor =  (requestConfig: AxiosRequestConfig) => {
         // for all requests, lookup refresh token in local storage
         // if found, add to the reqeust
         const storedAccessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
         if (storedAccessToken){
           if (!requestConfig.headers){
             requestConfig.headers = {};
           }
-          requestConfig.headers["Authorization"] = "Bearer: " + storedAccessToken;
+          requestConfig.headers["Authorization"] = "Bearer " + storedAccessToken;
         }
         return requestConfig;
     }

web-frontend/src/components/tiled-app-bar.tsx

@@ -8,6 +8,7 @@ import Typography from "@mui/material/Typography";
 import UserContext from '../context/user';
 const TiledAppBar = () => {
   const user = React.useContext(UserContext);
+
   return (
     <AppBar position="static">
       <Container maxWidth="xl">
@@ -31,7 +32,7 @@ const TiledAppBar = () => {
             </Button>
           </Typography>
           <Typography>
-            {user}
+            {user.user}
           </Typography>
         </Toolbar>
       </Container>

web-frontend/src/context/user.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-// required to compare function by reference when context changes
-export const userUpdateFunctionTemplate = () => {}
+// // required to compare function by reference when context changes
+// export const userUpdateFunctionTemplate = () => {}
 
 export const userObjectContext = {
-    name: "Ford Prefect",
-    updateUser: userUpdateFunctionTemplate,
+    user: "Ford Prefect",
+    setUser: (user: string) => {console.log( user)}
   }
 
 

web-frontend/src/routes/login.tsx

@@ -1,4 +1,4 @@
-import Box from '@mui/material/Box';
+
 import Auth from '../components/auth';
 import { useParams } from "react-router-dom";