What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How can I do SSE and auth session at the same time without a 302 redirect?

How can I do SSE and auth session at the same time without a 302 redirect?

tajbowness
Shopify Partner
26 2 7

I'm trying to make a progress bar with SSE. But I need to get the session id and then call the DB to get the clients progress to pass back.

 

But when trying to get the session id 

 

const { session } = await authenticate.admin(request)

 

This error occurs

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

Because the authenticate line is returning a 302, wanting to redirect the client to login. This breaks the SSE.

This is the catched response from authenticate

Response {
    [Symbol(realm)]: { settingsObject: {} },
    [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: false,
    requestIncludesCredentials: false,
    type: 'default',
    status: 302,
    timingInfo: null,
    cacheState: '',
    statusText: '',
    headersList: HeadersList {
        cookies: null,
        [Symbol(headers map)]: [Map],
        [Symbol(headers map sorted)]: null
    },
    urlList: []
    },
    [Symbol(headers)]: HeadersList {
    cookies: null,
    [Symbol(headers map)]: Map(1) { 'location' => [Object] },
    [Symbol(headers map sorted)]: null
    }
}

This is the SSE code

 

import { eventStream } from "remix-utils/sse/server";
import { authenticate } from "../shopify.server";


export async function loader({ request }) {

  const { session } = await authenticate.admin(request);

  let controller = new AbortController();

  request.signal.addEventListener("abort", () => controller.abort());

  let start = Date.now();

  return eventStream(controller.signal, function setup(send) {
    let timer = setInterval(async () => {
      let date = new Date();
      // MAKE DB REQUEST WITH SESSION ID. FETCHS INFO. PASSES IT BACK TO CLIENT
      if (date.getTime() - start > 10000) return controller.abort()

      send({ event: "time", data: "HOLA"});
    }, 1000);

    return function clear() {
      clearInterval(timer);
    };
  });
}

 

Is there perhaps a way to pass the session id to the SSE loader instead?


What am I doing wrong? Any insight would be much appreciated!

 

Replies 0 (0)