Using iframe to access localStorage of subdomain not working?

In app.appname.io I am saving a login session in localStorage. I want to use this session in app.subdomain.appname.io

I am sure that on the app.appname.io I have the data I need in localStorage. The magicLogin function uses the localStorage to automatically authenticate when isCaseworkerLoggedIn returns true. The problem is that when I call the function in the iframe it's like it does not have access to the correct localStorage ie for app.appname.io.

  const magicLogin = () => {
    const isCaseworkerLoggedInStorage = !!localStorage.getItem(
        'isCaseworkerLoggedIn'
    )

    if (isCaseworkerLoggedInStorage) {
        caseworkerLogin()
    }
}

The iframe embed only on the subdomain route I want to use calling the magicLogin onLoad

 <iframe
    src="http://app.localhost:3000/"
    style={{
      display: 'none',
    }}
    onLoad={magicLogin}
 ></iframe>