import React , { useEffect } from "react" ; import { useService , useMachine } from "@xstate/react" ; import { makeStyles } from "@material-ui/core/styles" ; import { CssBaseline } from "@material-ui/core" ; import { snackbarMachine } from "../machines/snackbarMachine" ; import { notificationsMachine } from "../machines/notificationsMachine" ; import { authService } from "../machines/authMachine" ; import AlertBar from "../components/AlertBar" ; import { bankAccountsMachine } from "../machines/bankAccountsMachine" ; import PrivateRoutesContainer from "./PrivateRoutesContainer" ; import { useAuth0 , withAuthenticationRequired } from "@auth0/auth0-react" ; if ( window . Cypress ) { window . authService = authService ; } const useStyles = makeStyles ( ( theme ) => ( { root : { display : "flex" , } , } ) ) ; const AppAuth0 = ( ) => { const { isAuthenticated , user , getAccessTokenSilently } = useAuth0 ( ) ; const classes = useStyles ( ) ; const [ authState ] = useService ( authService ) ; const [ , , notificationsService ] = useMachine ( notificationsMachine ) ; const [ , , snackbarService ] = useMachine ( snackbarMachine ) ; const [ , , bankAccountsService ] = useMachine ( bankAccountsMachine ) ; if ( window . Cypress ) { useEffect ( ( ) => { const auth0 = JSON . parse ( localStorage . getItem ( "auth0Cypress" ) ! ) ; authService . send ( "AUTH0" , { user : auth0 . user , token : auth0 . token , } ) ; } , [ ] ) ; } else { useEffect ( ( ) => { ( async function waitForToken ( ) { const token = await getAccessTokenSilently ( ) ; authService . send ( "AUTH0" , { user , token } ) ; } ) ( ) ; } , [ isAuthenticated , user , getAccessTokenSilently ] ) ; } const isLoggedIn = authState . matches ( "authorized" ) || authState . matches ( "refreshing" ) || authState . matches ( "updating" ) ; return ( < div className = { classes . root } > < CssBaseline /> { isLoggedIn && ( < PrivateRoutesContainer isLoggedIn = { isLoggedIn } notificationsService = { notificationsService } authService = { authService } snackbarService = { snackbarService } bankAccountsService = { bankAccountsService } / > ) } < AlertBar snackbarService = { snackbarService } /> < /div>); } ; let appAuth0 = window . Cypress ? AppAuth0 : withAuthenticationRequired ( AppAuth0 ) ; export default appAuth0 ;