My authentication setup requires a setTimeout before redirect to allow cookies to write in the browser

Authentication flow:

1. User is redirected back to my site (to /auth/callback) after logging in with a 3rd party. The redirect back includes query params. The React function on the callback page sends these query params off to my API, which makes further upstream requests, stores them, and sends back an http only cookie "sid". This cookie is automatically sent with all further requests from the web client to my API. Here is the response from API:

   const cookie = 
         [
           `sid=${encodeURIComponent(sessionId)}`,
           "HttpOnly",
           "Secure",
           "SameSite=None",
           "Path=/",
           "Domain=.domain.com",
           `Max-Age=${THIRTY_DAYS_SEC}`
         ].filter(Boolean).join("; ");
       return {
         statusCode: 200,
         headers: {
           "Access-Control-Allow-Origin": origin,
           "Vary": "Origin",
           "Access-Control-Allow-Credentials": "true",
           "Access-Control-Allow-Headers": "Content-Type",
           "Access-Control-Allow-Methods": "POST,OPTIONS,DELETE,GET",
           "Content-Type": "application/json",
           "Set-Cookie": cookie
         },
         body: JSON.stringify({ success: true user_name: displayName })
       };
   

   2. Callback page receives the response, and sets 2 additional cookies:

      const body = await resp.json();
      if (!resp.ok) throw new Error('Auth callback failed');
      else {
        document.cookie = `session_present=true; path=/;`;
        document.cookie = `user_name=${body.user_name}; path=/;`;
      }
      } catch (e) {
      console.error(e);
      } finally {
        setTimeout(() => window.location.replace('/uploads'), 1000);
      }
      

I am setting 2 cookies from here because since the sid cookie is httpOnly, when the page at /uploads mounts, this cookie does not appear until later. Not sure why that is.

Here is a quick demo of the cookies as I refresh the page

During mount, the application cannot see a sid cookie, so it cannot determine what to set the authentication status to. The sid cookie only appears in the browser after the page mounts. That is why we have a session_present cookie, created by the browser, that is immediately available on mount. This does not replace the sid cookie, because requests to the API will still need it, and if the API returns a 401, then the application can remove the session_present cookie and correct auth state.

However, redirecting to /uploads immediately instead of a 1000ms delay causes the browser to not save any of the cookies, including the sid. I tried a few 3xx responses to see if the browser would queue up a redirect after it has written its cookies, but that did not seem to work. The browser redirected immediately still, leaving no cookies. These cookies do not appear to save unless I use a timeout, but I run the risk of setting the timeout too short that some browsers never save these cookies, while also forcing users to wait a predetermined period of time.

How can I wait until the browser finished writing the cookies and then direct to /uploads after, without just waiting 1000ms? Is there a way for the browser to tell me that the cookies are written and that I can redirect? Can I queue up a redirect for the browser in a way that allows the browser to control when it happens?