Server sided NextJS components are getting 'unauth...
# support-questions-legacy
c
Hi, I would appreciate some help with getting session authorization to work with a second api. I have NextJS 14 setup with app router and a backend api with Express. Server sided components are getting 'unauthorised' responses from the Express api.
I have a NextJS 14 project with app pages but I have a separate API built with Node/Express where I do all of the backend work. The recipe I'm trying to use is ThirdPartyEmailPassword. Everything is being hosted locally right now in a dev environment in docker containers. I've followed the documentation for NextJS (https://supertokens.com/docs/thirdparty/nextjs/app-directory/about) and setup both the frontend and backend config in my NextJS project. I supplemented with this documentation: https://supertokens.com/docs/emailpassword/custom-ui/init/backend - for the Express backend https://supertokens.com/docs/thirdparty/common-customizations/sessions/multiple-api-endpoints - for the init config modifications below I've used this appInfo in NextJS frontend, NextJS backend, and Express backend. front.domain.com points to the NextJS app: appName: "app", apiDomain: "https://front.domain.com", websiteDomain: "https://front.domain.com", apiBasePath: "/api/auth", websiteBasePath: "/auth"
On NextJS I: Created the frontend config file Using ThirdPartyEmailPasswordReact.init(...) Using Session.init({sessionTokenBackendDomain: ".domain.com"}), Created the backend config file Using ThirdPartyEmailPasswordNode.init(...) Using Dashboard.init() Using SessionNode.init({cookieDomain: ".domain.com"}), Created supertokensProvider and wrapped my layout with it to initialize the frontend config Created app/auth/[[...path]]/page.tsx Created app/api/auth/[[...path]]/route.ts Modified my fetch function to have Fetches to backend api at https://back.domain.com/api/ On Express I: Setup SuperTokens.init Using ThirdPartyEmailPasswordNode.init(...) Using Session.init({cookieDomain: ".domain.com"}) Setup CORS cors({ origin: ['https://front.domain.com', 'https://back.domain.com'], allowedHeaders: ["content-type", ...SuperTokens.getAllCORSHeaders()], methods: ["GET", "PUT", "POST", "DELETE"], credentials: true, }) Added verifySession() to my api routes Order of initialization: Express SuperTokens.init CORS Supertokens-Express middleware Express router Supertokens error handler Express error handler I am able to go to the /auth page and sign in or sign up as the user. If I run fetch from my "use client" page to an Express api route which has verifySession() then I am able to successfully access routes which use verifySession(). If I run a fetch from my server component page to an Express api route which has verifySession() then my NextJS console shows "Error getting response: { message: 'unauthorised' }". If I run a fetch from my server component page to an Express api route without verifySession() then I am able to successfully access the unprotected route. So it looks like I am only able to verify the user session when using client sided components.
Is this how things are expected to work with a NextJS/Express setup? I'm been pulling my hair out for a few days trying to get this to work and I'm worried I have some conceptual misunderstanding. Thanks!
t
Did you work this out? I'm trying to do the same thing! I have a pre-existing express server that manages auth for a phone app, but now building a nextjs app and want to use the express server to manage auth, but struggling to get this to work.
13 Views