Keycloak infinite redirect loop on iframe callback when logging in

This issue started after noticing chrome blocking third party cookies and iframes.
From my understanding, keycloak injects an iframe into the dom which is used to do a silent check, login, then return the token.

This is my _kc.init:

  _kc
    .init({
      onLoad: 'check-sso',
      responseMode: 'query',
      flow: 'implicit',
      checkLoginIframe: false,
      silentCheckSsoFallback: false,
      silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
      pkceMethod: 'S256',
    })

setting silentCheckSsoFallback: false, stops the infinite redirects, however, then it no longer does the silent check fallback to actually return the callback which leads to the user not being authenticated.
Then the url changes to:

http://localhost:3012/voting/voter/dashboard?session_state=…
With a blank screen

And I see this in the console:

Refused to frame 'https://<my-correct-url>.ca/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

requestStorageAccess: Must be handling a user gesture to use.
requestStorageAccess: Permission denied.
requestStorageAccess: Must be handling a user gesture to use.

Ive checked our live dev server, it does not have this issue because its behind https.
You need to use HTTPS because some vital cookies are blocked or rejected during authentication. This is due to the same site cookie protection scheme that was added to browsers for a few years ago.
I am not sure how to handle this on local.

when adding checkLoginIframe: false, it stopped the redirects, but then when I actually tried to login with credentials, the page doesnt redirect to the dashboard because the user is still not authenticated in the frontend without the callback token from KC.

Ive tried updating flow, responseMode and silentCheckSsoFallback.

Ive turned off the chrome setting to allow cookies, and this fixes the problem obviously.