How to use a NextJS app with an existing Node.js backend?

Question

Currently I have an existing Node.js backend that works with my create-react-app project.
I'm migrating to NextJS but have some questions.

I have a simple JWT authentication process:

1. frontend makes request to my-server/api/auth
2. backend authenticates user, adds refresh token as httpOnly cookie to response header. and returns access token as response body.
3. Every next call to server will include the access token and refresh token in cookies.

My quesetion is if my NextJS app which is deployed to vercel with domain: www.my-nextjs-app.vercel.com, is making requests to my backend app which is deployed to aws at www.my-backend-app.aws.com, then the cookies my backend set won't be applied because of CORS (since they considered third party cookies from different domain).

(That's also true if I locally server my create-react-app at localhost:3000 and make requests to my local server at localhost:5000, chrome won't show the httpOnly cookie because it's from a different domain)

This is different from my create-react-app which was served directly from my backend at the same domain and thus had no problem of third party cookies.

Is there a solution for that?

Edit: Also, is Next.JS really meant to be used with an existing server? or serverless only

Answer 1

Using multiple servers for ui and backend is pretty common. There are several ways to solve your issue:

1.Deploy everything on one domain and set up reverse proxy (the image is taken from here )

Ofcourse those orging servers can be different apps on the machine running on different ports. You could use nginx as a reverse proxy the config would look like this:

server {
    listen      80;
    server_name yourapp.com;

    location / {
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_pass http://uiapp.com:3000;
    }

    location /backend/ {
       rewrite ^/backend(/.*)$ $1 break;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_pass http://backendapp.com:8000;
    }
}

The rewrite directive is required if you'd like to proxy requests from http://yourapp.com/backend/foobar to http://backendapp.com:8000/foobar

More details on how to set up nginx is here. But there are lots of other guied on the internet.

You can also use middleware for your existing node.js app to proxypass to your NextJs app.

2.Deploy your backend server on subdomain. If you specify Domain for http-only cookies they will be send to subdomains as well. E.g. if use yourapp.com as a domain the cookie will be available on backend.yourapp.com and yourapp.com

Set-Cookie: name=value; domain=yourapp.com

3.Use Authorizatin header instead of cookies. In this case you'll need to send tokens to the UI app and it'll store them either in cookies, sesionStorage or localStorage and you UI app will add Authorization header with your token for your backend:

var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
return xhr;

Ofcourse in this case your backend needs to be able to accept token in Authorization header.