Fixing auth0 integration

Author: daithihearn

.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

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",

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",

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 = () => {
             <SnackbarProvider maxSnack={3}>
                 <Auth0Provider
                     domain={AUTHO_DOMAIN}
-                    audience={AUTH0_AUDIENCE}
                     clientId={AUTH0_CLIENT_ID}
-                    redirectUri={window.location.origin}
-                    scope={AUTH0_SCOPE}
                     useRefreshTokens={true}>
                     <MyProfileSync />
                     <RouterProvider router={router} />

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

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 <></>
 }

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 (