Hi, does SuperTokens support Next.js 13 app router...
# support-questions-legacy
a
Hi, does SuperTokens support Next.js 13 app router? I tried to follow: https://supertokens.com/docs/emailpassword/nextjs/setting-up-backend but I get "error Detected default export in ...... Export a named export for each HTTP method instead."
r
a
The api is still located inside /pages
Though if this works, I don't think it is a bad practise
r
yea, it's not too bad
a
Thanks it worked, I just had to use NextCors too
s
@rp_st but back to the original question. does supertokens support App Router?
If yes is their new documentation? I can only find the pages documentation.
Also is it possible to use next-auth with supertokens?
r
im not sure we support app router for navigation of the auth screens. But we do support app dir
you can use next-auth via the credentials flow that they have. Here is an example: https://github.com/porcellus/nextauth-supertokens-integration-test/tree/supertokens-integration
However, we recommend that you replace nextauth entirely with supertokens
s
r
yea, well.. we work woth app dir, but the specific new router they have, that doesn't work for page navgiation that supertokens does (for example, when the user clicks the forgot password link in the sign in page).
so we just do a full page redirect in that case.
s
@rp_st hmm honestly sounds a bit confusing.... feels like it is not properly integrated with next.js
r
except for the routing, it is
instead of using next router for our auth redirections, we do full page
but we do work with app-dir, as the example app shows
s
hmm maybe I am just confusing myself. Only start using next.js after they implented the App Router so I do not completely understand the /pages concept
r
right. So, we do work with app dir.
s
r
this is for the prebuilt UI.
If you want to use custom UI, you will have to build your own UI and call our sdk functions
s
anyways to avoid from putting "use client" in the layout file (https://github.com/supertokens/next.js/blob/app-dir/examples/with-supertokens/app/layout.tsx)? since it is not recommended to use it across the whole application and only on a need-by-need basis
r
Yea. Extra the supertokens wrapper in its own component and use the use client in there
s
by any chance is there a code example for that?
r
There isn’t yet. Sorry. We will be working on the example in the coming days
s
its good. Just figured that part out... time to figure out my outer billion questions
@rp_st just double checking. https://supertokens.com/docs/emailpassword/nextjs/setting-up-backend there is not documentation for the app dir huh?
r
Yea. That’s for pages dir. The docs are not for app dir cause that’s still WIP
s
gotcha. I gotta try to figure it out then........🫡
@rp_st would you know why "TypeError: Cannot read properties of undefined (reading 'setHeader')" ?
Copy code
import { superTokensNextWrapper } from 'supertokens-node/nextjs'
import supertokens from 'supertokens-node'
import { middleware } from 'supertokens-node/framework/express'
import { backendConfig } from '../../../../config/backendConfig'
supertokens.init(backendConfig());
export default async function superTokens(req, res) {
 await superTokensNextWrapper(
  async (next) => {
   res.setHeader(
    "Cache-Control",
    "no-cache, no-store, max-age=0, must-revalidate"
   );
   await middleware()(req, res, next)
  },
  req,
  res
 )
 if (!res.writableEnded) {
  res.status(404).send("Not found");
 }
}
r
Not sure. This seems right though.
If you need help here, maybe it would be best if you upload a repo that we can try and run to reproduce the error
s
Ahh App Router no longer passes the "res" variable
r
Oh yea. This goes in the pages dir. like it’s shown in our demo app
s
can you use pages and app dir?
r
Yes
s
at the same time?
r
Yea
s
anyway to simply motify it to work in app dir? creating a new response instance?
r
I don’t think so.
Well, not sure.
It’s still work in progress
s
yea. so is it plan to fully intregrate supertokens with next.js App Router? Since i am asumming /pages will at some point be removed from next.js
r
Not sure. We will try to do that.
s
FYI: when trying to create a manual response via NextResponse this is the error it gives. https://justpaste.it/7ylue
r
yup. You need to conform it to our base response interface and pass that in
10 Views