Is there a better way to load private script with JWT?

1 week ago 7
ARTICLE AD BOX

I wrote some script to load the admin bundle js and style on my site after getting the JWT. Looks like this:

async loadBundle(){ if (this.loaded){ return; } const [style, bundle] = await Promise.all([ fetch("/styleAdmin", { method: "GET", headers: { "Authorization": "Bearer "+this.token, "Cache-Control": "no-store" } }), fetch("/bundleAdmin", { method: "GET", headers: { "Authorization": "Bearer "+this.token, "Cache-Control": "no-store" } }) ]); if (style.status !== 200 || bundle.status !== 200){ throw new Error('Loading error.'); } const [css, js] = await Promise.all([style.text(), bundle.text()]); this.loaded = true; const styleTag = document.createElement("style"); styleTag.innerHTML = css; const scriptTag = document.createElement("script"); scriptTag.innerHTML = js; document.head.appendChild(styleTag); document.head.appendChild(scriptTag); }

The bundle contains a window.main method I call after loading it and pass the token to it. So the authorization part is totally public, but the admin content is reachable only with valid JWT.

I am not proud of this code. I mean somehow it does not feel right, but since I don't have server side session and session cookie I am not sure how to solve this with JWT.

Another server side thing here, that I want to serve static files with CloudFlare from AWS S3 and I am not sure how to validate JWT there.

Read Entire Article