How would you implement silent token refresh in a SPA?

Access tokens expire (typically 15 min). Silent refresh keeps users logged in without forcing them to re-authenticate.

Option 1: Hidden iframe (OIDC prompt=none)

// When access token is near expiry, load IdP in hidden iframe
const iframe = document.createElement('iframe');
iframe.src = `${idpUrl}/authorize?prompt=none&response_type=code&...`;
iframe.style.display = 'none';
document.body.appendChild(iframe);
// Listen for redirect back to /silent-callback
// Parse new token from callback URL

Works if the user still has an active SSO session with the IdP. Requires prompt=none OIDC parameter. Blocked by Safari ITP (third-party cookie restrictions).

Option 2: Refresh token in HttpOnly cookie

// Before request, check token expiry
async function getAccessToken() {
  if (isExpiringSoon(accessToken)) {
    const { data } = await axios.post('/auth/refresh'); // sends HttpOnly cookie automatically
    accessToken = data.accessToken; // store in memory only
  }
  return accessToken;
}

Keep the access token in memory (not localStorage) to prevent XSS theft. The refresh token in HttpOnly cookie is safe from JavaScript. This is the recommended modern approach.