https://supertokens.com/ logo
base path config in nextjs app
h

haxzie

05/17/2023, 2:30 PM
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?
r

rp

05/17/2023, 2:46 PM
hey @haxzie
you can set the websiteBasePath to
/kb/auth
and for the apiBasePath, you can set it to
/kb/api/auth
.
h

haxzie

05/17/2023, 2:49 PM
Oh awesome! it's working now
r

rp

05/17/2023, 2:49 PM
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

haxzie

05/17/2023, 2:50 PM
The files are already under /pages/auth/[[...path]] and /pages/api/auth/[[..path]] I just changed the websiteBasePath and it's working
r

rp

05/17/2023, 2:51 PM
hmm ok
h

haxzie

05/17/2023, 2:51 PM
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
if (!res.writableEnded) {
        res.status(404).send("Not found");
    }
r

rp

05/17/2023, 2:53 PM
can you enable the backend debug log and show the output?
h

haxzie

05/17/2023, 2:54 PM
i don't see any logs, is there a way I can enable the debug?
r

rp

05/17/2023, 2:54 PM
add the env var
DEBUG=com.supertokens
h

haxzie

05/17/2023, 2:57 PM

https://cdn.discordapp.com/attachments/1108401157568741428/1108407982183678003/Screenshot_2023-05-17_at_8.27.29_PM.png

r

rp

05/17/2023, 2:58 PM
Have you set the right apiBasePath on the frontend as well?
Also, does the /kb part get stripped away by some gateway?
h

haxzie

05/17/2023, 2:59 PM
Yes, the apiBasePath is /kb/api/auth
I don't think so, it shouldnt discard the /kb
r

rp

05/17/2023, 2:59 PM
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

haxzie

05/17/2023, 3:03 PM
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

r

rp

05/17/2023, 3:05 PM
apiBasePath and apiGatewayPath goes inside the
appInfo
object
h

haxzie

05/17/2023, 3:07 PM
what about the backend apiBasePath?

https://cdn.discordapp.com/attachments/1108401157568741428/1108410527631286362/Screenshot_2023-05-17_at_8.37.37_PM.png

r

rp

05/17/2023, 3:08 PM
that should be
/api/auth
on the backend ^^
on the frontend, the apiBasePath should be
/kb/api/auth
h

haxzie

05/17/2023, 3:12 PM
That screenshot is from appInfo.ts
For Frontend should I add this in frontendConfig.ts and for backend in backendConfig.ts?
r

rp

05/17/2023, 3:12 PM
yes
you can get rid of appInfo.ts
h

haxzie

05/17/2023, 3:20 PM
Worked 🙌 Thanks