diff --git a/web-frontend/src/client.ts b/web-frontend/src/client.ts index 9714be158..f11d7b49a 100644 --- a/web-frontend/src/client.ts +++ b/web-frontend/src/client.ts @@ -5,8 +5,8 @@ import { useNavigate } from 'react-router-dom' import UserContext from "./context/user"; -const REFRESH_TOKEN_KEY = "refresh_token"; -const ACCESS_TOKEN_KEY = "access_token"; +export const REFRESH_TOKEN_KEY = "refresh_token"; +export const ACCESS_TOKEN_KEY = "access_token"; const apiURL = process.env.REACT_APP_API_PREFIX || "../api"; @@ -70,32 +70,6 @@ const AxiosInterceptor = ({children}: Props) => { useEffect(() => { - const responseInterceptor = async (response: AxiosResponse) => { - // if 401, delete local toke - - // looku - 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); - } - - - - - - return response; - } - const requestInterceptor = (requestConfig: AxiosRequestConfig) => { // for all requests, lookup refresh token in local storage // if found, add to the reqeust @@ -109,26 +83,24 @@ const AxiosInterceptor = ({children}: Props) => { return requestConfig; } - const errInterceptor = (error: any) => { + // const errInterceptor = (error: any) => { - if (error.response.status === 401) { - navigate('/login'); - } + // if (error.response.status === 401) { + // navigate('/login'); + // } - return Promise.reject(error); - } + // return Promise.reject(error); + // } const reqInterceptor = axiosInstance.interceptors.request.use(requestInterceptor); - const interceptor = axiosInstance.interceptors.response.use(responseInterceptor, errInterceptor); + // const interceptor = axiosInstance.interceptors.response.use(errInterceptor); // Why does the article do this and do I need to eject the request intereptor? - return () => axiosInstance.interceptors.response.eject(interceptor); + // return () => axiosInstance.interceptors.response.eject(interceptor); }, [navigate]) return children; } - - export { axiosInstance, AxiosInterceptor }; diff --git a/web-frontend/src/components/auth.tsx b/web-frontend/src/components/auth.tsx index ef7a0ef16..2753790f6 100644 --- a/web-frontend/src/components/auth.tsx +++ b/web-frontend/src/components/auth.tsx @@ -2,23 +2,30 @@ import * as React from "react"; import { Paper, withStyles, Grid, TextField, Button, FormControlLabel, Checkbox } from '@mui/material'; import {axiosInstance} from '../client'; import { useState } from "react"; +import {ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY} from "../client"; interface Props{ } function Auth (props: Props) { - function login(){ + async function login(){ const loginData = new FormData(); loginData.append("username", username); loginData.append("password", password); - axiosInstance.post("auth/provider/toy/token", loginData, { + const response = await axiosInstance.post("auth/provider/toy/token", loginData, { headers: { "Content-Type": "multipart/form-data", "X-CSRF": 'm0rVhrUEgq1Z1kpmOKFLRzD_f6zRb8D5t5-fFifLbn8', }}); + + localStorage.setItem(REFRESH_TOKEN_KEY, response.data.refresh_token); + localStorage.setItem(ACCESS_TOKEN_KEY, response.data.access_token); + + //update user context + console.log(response.data.identity.id); } const [username, setUsername] = useState(""); diff --git a/web-frontend/src/routes/login.tsx b/web-frontend/src/routes/login.tsx index 3ac6ffbbd..c496ee6cc 100644 --- a/web-frontend/src/routes/login.tsx +++ b/web-frontend/src/routes/login.tsx @@ -10,21 +10,10 @@ login providers Basic */ - - - const Login = () => { - // Extract from path from react-router. - const params = useParams<{ "*": string }>(); - // Transform "/a/b/c" to ["a", "b", "c"]. - const segments = (params["*"] || "").split("/").filter(function (segment) { - return segment; - }); - console.log(`segments: ${segments}`) return ( // list of buttons of providers to choose from - ); }