32 lines
884 B
TypeScript
32 lines
884 B
TypeScript
import { useEffect } from 'react'
|
|
import { useLocation, useNavigate } from 'react-router-dom'
|
|
|
|
import { PATHS } from '@src/lib/paths'
|
|
import { useAuthState } from '@src/machines/appMachine'
|
|
|
|
/**
|
|
* A simple hook that listens to the auth state of the app and navigates
|
|
* accordingly.
|
|
*/
|
|
export function useAuthNavigation() {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const authState = useAuthState()
|
|
|
|
// Subscribe to the auth state of the app and navigate accordingly.
|
|
useEffect(() => {
|
|
console.log('authState', authState.value)
|
|
if (
|
|
authState.matches('loggedIn') &&
|
|
location.pathname.includes(PATHS.SIGN_IN)
|
|
) {
|
|
navigate(PATHS.INDEX)
|
|
} else if (
|
|
authState.matches('loggedOut') &&
|
|
!location.pathname.includes(PATHS.SIGN_IN)
|
|
) {
|
|
navigate(PATHS.SIGN_IN)
|
|
}
|
|
}, [authState, location.pathname])
|
|
}
|