Focuses on API authentication, access scopes, and permission management.
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!