https://supertokens.com/ logo
Join Discord
Powered by
Hey, I was trying out supertokens with one of our ...
# support-questions-legacy
h
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
Copy code
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?
r
hey @haxzie.
you can set the websiteBasePath to 
/kb/auth
and for the apiBasePath, you can set it to 
/kb/api/auth
.
h
Oh awesome! it's working now
r
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
oh hmm. It worked without changing the file locations?
interesting
h
The files are already under /pages/auth/[[...path]] and /pages/api/auth/[[..path]] I just changed the websiteBasePath and it's working
r
hmm ok
h
I got the UI to be rendered. But the API requests are failing with 404
I can see the requests were actually recieved by /pages/api/auth/[[..path]] but the following condition failed in that file
Copy code
if (!res.writableEnded) {
        res.status(404).send("Not found");
    }
r
can you enable the backend debug log and show the output?
h
i don't see any logs, is there a way I can enable the debug?
r
add the env var 
DEBUG=com.supertokens
h
r
Have you set the right apiBasePath on the frontend as well?
Also, does the /kb part get stripped away by some gateway?
h
Yes, the apiBasePath is /kb/api/auth
I don't think so, it shouldnt discard the /kb
r
Well it seems like something is removing the /kb cause the request path the SDK is seeing is without /kb
Either way. Try this
Set the frontend apiBasePath to /kb/api/auth
Set the backend apiBasePath to /api/auth
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
h
is there something I am missing? or where should I add the backend apiBasePath?
r
apiBasePath and apiGatewayPath goes inside the 
appInfo
object
h
what about the backend apiBasePath?
r
that should be 
/api/auth
on the backend ^^
on the frontend, the apiBasePath should be 
/kb/api/auth
h
That screenshot is from appInfo.ts
For Frontend should I add this in frontendConfig.ts and for backend in backendConfig.ts?
r
yes
you can get rid of appInfo.ts
h
Worked 🙌 Thanks
PreviousNext
Powered by