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 { LoginCallback , SecureRoute , useOktaAuth , withOktaAuth } from "@okta/okta-react" ; import { Route } from "react-router-dom" ; 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" ; if ( window . Cypress ) { window . authService = authService ; } const useStyles = makeStyles ( ( theme ) => ( { root : { display : "flex" , } , } ) ) ; const AppOkta = ( ) => { const { authState : oktaAuthState , oktaAuth : oktaAuthService } = useOktaAuth ( ) ; const classes = useStyles ( ) ; const [ authState ] = useService ( authService ) ; const [ , , notificationsService ] = useMachine ( notificationsMachine ) ; const [ , , snackbarService ] = useMachine ( snackbarMachine ) ; const [ , , bankAccountsService ] = useMachine ( bankAccountsMachine ) ; if ( window . Cypress ) { useEffect ( ( ) => { const okta = JSON . parse ( localStorage . getItem ( "oktaCypress" ) ! ) ; authService . send ( "OKTA" , { user : okta . user , token : okta . token , } ) ; } , [ ] ) ; } else { useEffect ( ( ) => { if ( oktaAuthState . isAuthenticated ) { oktaAuthService . getUser ( ) . then ( ( user ) => { authService . send ( "OKTA" , { user , token : oktaAuthState . accessToken } ) ; } ) ; } } , [ oktaAuthState , oktaAuthService ] ) ; } 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 } / > ) } { authState . matches ( "unauthorized" ) && ( < > < Route path = "/implicit/callback" component = { LoginCallback } / > < SecureRoute exact path = "/" / > < />)} < AlertBar snackbarService = { snackbarService } / > < /div>); } ; let appOkta = window . Cypress ? AppOkta : withOktaAuth ( AppOkta ) ; export default appOkta ;