Hi folks, I'm having trouble using axios in a quasar (vue3) vite project with supertokens alongside ...
j
Hi folks, I'm having trouble using axios in a quasar (vue3) vite project with supertokens alongside hasura, as far as I can tell the interceptor needed for axios only exists in the react-native supertokens package as the one in supertokens-web-js is deprecated and doesn't seem to let me use the interceptor. When I import the react-native supertokens package in my project the build fails, I've tried it in both vite and webpack with similar results. The vite error is:
Copy code
7:52:14 PM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/react-native/Libraries/Utilities/PolyfillFunctions.js:28:31: ERROR: Expected "(" but found "<"
node_modules/react-native/index.js:14:7: ERROR: Unexpected "typeof"
    at failureErrorWithLog (C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:1621:15)
    at C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:1263:28
    at runOnEndCallbacks (C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:1043:63)
    at buildResponseToResult (C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:1261:7)
    at C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:1374:14
    at C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:675:9
    at handleIncomingPacket (C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:772:9)
    at Socket.readFromStdout (C:\Users\Josh\Documents\api-testing\ui-selfhosted\node_modules\esbuild\lib\main.js:641:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12)
Vite Error, /node_modules/.q-cache/vite/spa/deps/supertokens-react-native.js?v=c3ec6ab7 optimized info should be defined
Any ideas on how I can get this working with vite, I've had no luck trying the various solutions I've found on google so far.
r
hey @jmark
for web-js, we add the interceptors to axios automatically so you don't need to. The interceptors in web-js are added when you do session.init in supertokens.init
about the react native issue, @nkshah2 can help here
n
Hey can you explain a bit more, are you trying to build an app for react native or for the web?
j
Sorry, I should have explained in more detail. I am building a Quasar Framework app which is built on vue3 with echo for my Go backend. Quasar uses axios create for it's axios implementation, I've added withcredentials to it. I've tried it with headers and without but I wasn't sure how to match the ones supertokens needs without the interceptor. The frontend implementation seems to partially work, as I can login using supertokens and refresh tokens automatically. If I go to the sessioninfo route in my browser directly it loads and shows me the token but, when I try to get it using axios it throws a 405 error "CORS Missing Allow Origin" and attempting to post from the frontend throws the same error so, I assume the CORS aren't being set automatically by supertokens which is why I was trying to figure out the interceptor, which is why I was fiddling around with the react-native as in the docs I saw that was the only package that still implemented the interceptor.
Copy code
Example of my echo routes for the Go backend.
    authGroup := e.Group("/auth")
    authGroup.Use(SuperTokensCORSMiddleware)
    authGroup.Use(SuperTokensMiddleware)

    authedRoutingGroup := e.Group("/")
    authedRoutingGroup.Use(SuperTokensCORSMiddleware)
    authedRoutingGroup.POST("create/", createCommunity, verifySession(nil))
    authedRoutingGroup.GET("sessioninfo/", sessionInfo, verifySession(nil))
Copy code
Axios example
const api = axios.create({ baseURL: 'https://<url>:8000',
  headers: {'Access-Control-Allow-Origin': 'https://<url>', 'Content-Type': 'application/json'},
  withCredentials: true
})
n
Right so with web you dont need the interceptor at all its handled automatically. The CORS error usually means the backend setup is missing something. @sattvikc May be able to help better with the backend side of things. You do not need to use the react native SDK, it is designed to specifically work within the react native framework
s
I see that you have added the CORS middleware to the /auth routes only, could you try adding it globally for all the routes ?
j
Hm, oddly enough that does seem to work. I wonder why the /auth route applied the CORS without any issue but the other does not. I had it that way because one of the routes not included in my example uses a different CORS request but I guess I'll just have to separate that into a different microservice.
46 Views