Hello, my react web frontend received 401 error, and do not refresh token. I use fetch. What can be wrong?

js
SuperTokens.init({
  appInfo: {
    appName: 'test',
    apiDomain: AUTH_BASE_URL,
    websiteDomain: APP_DOMAIN,
    apiBasePath: '/auth',
    websiteBasePath: '/auth',
  },
  recipeList: [
    EmailPassword.init(),
    Session.init(),
  ],
})

python in the attached, i have some overrides a lot of text. @rp_st cc

hey @rougsig

Request >>>

GET /api/rest/project/2 HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ru;q=0.8
Connection: keep-alive
Cookie: sAccessToken=EDITED; st-last-access-token-update=EDITED; sFrontToken=EDITED
Host: localhost:3003
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
sec-ch-ua: "Google Chrome";v="113", "Chromium";v="113", "Not-A.Brand";v="24"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"

<<< Response

HTTP/1.1 401 Unauthorized
Vary: Origin
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
WWW-Authenticate: Bearer realm="Ktor Server"
Content-Length: 0
Connection: keep-alive

right. Seems like interception is not happening.

Server allow to use cookie and Header Bearer auth. Frontend use cookie auth.

whats the value of the apiDomain?

supertokens sdk domain http://localhost:3001

right. So that can't work. You need to have the same domain for supertokens backend SDK and your backend domain (can do this using a reverse proxy as explained in our docs). Or, you can setup custom domains for supertokens sdk domain and your backend domain such that they are different sub domains, and then share a session across sub domains (https://supertokens.com/docs/session/common-customizations/sessions/share-sessions-across-sub-domains)

Ouch. Thx

or, you can use header based auth and then fetch the access token on the frontend using

await session.getAccessToken()

and then add that to each request as an authrization bearer token.

I can't 😦 I required to used cookie bases, because i need to protect images. I can't add header to default browser img download logic. Thx!

right. Ok fair.