base path config in nextjs app

Question

Hey I was trying out supertokens with one of our Next js application The application has a basepath prefix so that all the pages gets prefixed after that eg if the prefix is kb home page index tsx will be rendered under kb and others will be like kb api x kb page1 etc I followed the sample nextjs app to see if it works but unfortunately it doesnt render the login ui if I have a basepath prefix as the auth page is at prefix auth and all the apis are at prefix api auth this is how my appInfo ts looks like where kb is the prefix ```const port = process env APP PORT || 3000 const apiBasePath = kb api auth export const websiteDomain = process env APP URL || process env NEXT PUBLIC APP URL || `http localhost $ port ` export const appInfo = appName Sample App websiteDomain apiDomain websiteDomain apiBasePath ``` If I remove the prefix the UI gets rendered well I can see the requests are being hit to respective files but the UI doesnt seem to get rendered Any other change should I make to get it working with a basepath in next apps

rp · Answer

hey < haxzie>

rp · Answer

you can set the websiteBasePath to ` kb auth`

rp · Answer

and for the apiBasePath you can set it to ` kb api auth`

haxzie · Answer

Oh awesome it s working now

rp · Answer

This also means that in the pages directory you will have to change the location of the `pages auth path tsx` file as well as of the `pages api auth path tsx` fule

rp · Answer

oh hmm It worked without changing the file locations

rp · Answer

interesting

haxzie · Answer

The files are already under pages auth path and pages api auth path I just changed the websiteBasePath and it s working

rp · Answer

hmm ok

haxzie · Answer

I got the UI to be rendered But the API requests are failing with 404

haxzie · Answer

I can see the requests were actually recieved by pages api auth path but the following condition failed in that file ```if res writableEnded res status 404 send Not found ```

rp · Answer

can you enable the backend debug log and show the output

haxzie · Answer

i don t see any logs is there a way I can enable the debug

rp · Answer

add the env var `DEBUG=com supertokens`

haxzie · Answer

https cdn discordapp com attachments 1108401157568741428 1108407982183678003 Screenshot 2023 05 17 at 8 27 29 PM png

rp · Answer

Have you set the right apiBasePath on the frontend as well

rp · Answer

Also does the kb part get stripped away by some gateway

haxzie · Answer

Yes the apiBasePath is kb api auth

haxzie · Answer

I don t think so it shouldnt discard the kb

rp · Answer

Well it seems like something is removing the kb cause the request path the SDK is seeing is without kb

rp · Answer

Either way Try this

rp · Answer

Set the frontend apiBasePath to kb api auth

rp · Answer

Set the backend apiBasePath to api auth

rp · Answer

Add an extra property on the backend called apiGatewayPath and set that to kb This is ONLY to be added on the backend s appInfo object

haxzie · Answer

is there something I am missing or where should I add the backend apiBasePath https cdn discordapp com attachments 1108401157568741428 1108409464740139068 Screenshot 2023 05 17 at 8 33 07 PM png

rp · Answer

apiBasePath and apiGatewayPath goes inside the `appInfo` object

haxzie · Answer

what about the backend apiBasePath

haxzie · Answer

https cdn discordapp com attachments 1108401157568741428 1108410527631286362 Screenshot 2023 05 17 at 8 37 37 PM png

rp · Answer

that should be ` api auth`

rp · Answer

on the backend ^^

rp · Answer

on the frontend the apiBasePath should be ` kb api auth`

haxzie · Answer

That screenshot is from appInfo ts

haxzie · Answer

For Frontend should I add this in frontendConfig ts and for backend in backendConfig ts

rp · Answer

yes

rp · Answer

you can get rid of appInfo ts

haxzie · Answer

Worked Thanks