const App = () => {
    const { isAuthenticated, isSessionLoading } = useSession()
    const { user, isUserLoading } = useUser()
    const { logout } = useDescope()

    const handleLogout = useCallback(() => {
        logout()
    }, [logout])

    return (
        { !isAuthenticated &&
            (
              <Descope
                flowId="sign-up-or-in"
                onSuccess = {(e) => console.log(e.detail.user)}
                onError={(e) => console.log('Could not log in!')}
              />
            )
        }
  
        {
          (isSessionLoading || isUserLoading) && <p>Loading...</p>
        }

        { isAuthenticated &&
            (
              <>
                <p>Hello ${user.name}</p>
                <div>My Private Component</div>
                <button onClick={handleLogout}>Logout</button>
              </>
            )
        }
    );
}