diff --git a/.env b/.env index 99a72b9..d923c71 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ PORT=3000 -REACT_APP_API_URL=http://localhost:8080 +REACT_APP_API_URL=http://localhost:7080 REACT_APP_WEBSOCKET_URL=http://localhost:7070 # Auth0 diff --git a/package.json b/package.json index eb8b616..cec5543 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "frontend", - "version": "6.0.0", + "version": "6.1.0", "description": "React frontend for the Cards 110", "author": "Daithi Hearn", "license": "MIT", "private": true, "dependencies": { - "@auth0/auth0-react": "1.12.1", + "@auth0/auth0-react": "2.0.1", "@coreui/coreui": "^4.2.6", "@coreui/icons": "^3.0.0", "@coreui/react": "^4.6.0", diff --git a/public/manifest.json b/public/manifest.json index e128aaa..b76e724 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { "short_name": "Cards 110", "name": "Cards 110", - "version": "6.0.0", + "version": "6.1.0", "icons": [ { "src": "./assets/favicon.png", diff --git a/src/App.tsx b/src/App.tsx index 9912ad3..6887acd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -32,9 +32,7 @@ import Layout from "./pages/Layout/Layout" import ErrorPage from "./pages/Error/Error" const AUTHO_DOMAIN = process.env.REACT_APP_AUTH0_DOMAIN as string -const AUTH0_AUDIENCE = process.env.REACT_APP_AUTH0_AUDIENCE as string const AUTH0_CLIENT_ID = process.env.REACT_APP_AUTH0_CLIENT_ID as string -const AUTH0_SCOPE = process.env.REACT_APP_AUTH0_SCOPE as string const router = createBrowserRouter( createRoutesFromElements( @@ -53,10 +51,7 @@ const App = () => { diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx index d330420..f26d2da 100644 --- a/src/components/Header/NavBar.tsx +++ b/src/components/Header/NavBar.tsx @@ -55,7 +55,7 @@ const NavBar = () => { const myProfile = useAppSelector(getMyProfile) - const signOut = () => logout({ returnTo: window.location.origin }) + const signOut = () => logout() if (!myProfile) { return null diff --git a/src/components/MyProfile/MyProfileSync.tsx b/src/components/MyProfile/MyProfileSync.tsx index 16be2de..9add110 100644 --- a/src/components/MyProfile/MyProfileSync.tsx +++ b/src/components/MyProfile/MyProfileSync.tsx @@ -7,6 +7,9 @@ import { useAppDispatch } from "caches/hooks" import { useSnackbar } from "notistack" import parseError from "utils/ErrorUtils" +const AUTH0_AUDIENCE = process.env.REACT_APP_AUTH0_AUDIENCE as string +const AUTH0_SCOPE = process.env.REACT_APP_AUTH0_SCOPE as string + const MyProfileSync: React.FC = () => { const dispatch = useAppDispatch() const { user, error, isAuthenticated, getAccessTokenSilently } = useAuth0() @@ -16,31 +19,39 @@ const MyProfileSync: React.FC = () => { if (error) enqueueSnackbar(error.message, { variant: "error" }) }, [error]) + const updateProfile = async (name: string, picture: string) => { + console.log(`DAITHI: Attempting to update profile: ${name}`) + const accessToken = await getAccessTokenSilently({ + authorizationParams: { + audience: AUTH0_AUDIENCE, + redirect_uri: window.location.origin, + scope: AUTH0_SCOPE, + }, + }) + + console.log(`DAITHI: Got access token: ${accessToken}`) + + dispatch( + ProfileService.updateProfile( + { + name, + picture, + }, + accessToken, + ), + ).catch((e: Error) => + enqueueSnackbar(parseError(e), { + variant: "error", + }), + ) + } + useEffect(() => { + console.log(`DAITHI: isAuthenticated: ${isAuthenticated} user: ${user}`) if (isAuthenticated && user && user.name && user.picture) { - getAccessTokenSilently() - .then(accessToken => - dispatch( - ProfileService.updateProfile( - { - name: user.name!, - picture: user.picture!, - }, - accessToken, - ), - ).catch((e: Error) => - enqueueSnackbar(parseError(e), { - variant: "error", - }), - ), - ) - .catch((e: Error) => - enqueueSnackbar(parseError(e), { - variant: "error", - }), - ) + updateProfile(user.name, user.picture) } - }, [user, isAuthenticated]) + }, [user, isAuthenticated, getAccessTokenSilently]) return <> } diff --git a/src/pages/Layout/Layout.tsx b/src/pages/Layout/Layout.tsx index 7c23ffc..107b320 100644 --- a/src/pages/Layout/Layout.tsx +++ b/src/pages/Layout/Layout.tsx @@ -6,12 +6,25 @@ import DefaultHeader from "components/Header/Header" import { useEffect } from "react" import Loading from "components/icons/Loading" +const AUTH0_AUDIENCE = process.env.REACT_APP_AUTH0_AUDIENCE as string +const AUTH0_SCOPE = process.env.REACT_APP_AUTH0_SCOPE as string + const Layout = () => { const accessToken = useAppSelector(getAccessToken) const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0() useEffect(() => { - if (!isLoading && !isAuthenticated) loginWithRedirect() + console.log( + `DAITHI: isLoading: ${isLoading} isAuthenticated: ${isAuthenticated}`, + ) + if (!isLoading && !isAuthenticated) + loginWithRedirect({ + authorizationParams: { + audience: AUTH0_AUDIENCE, + redirect_uri: window.location.origin, + scope: AUTH0_SCOPE, + }, + }) }, [isLoading, isAuthenticated]) return (