DEV Community

Shubham-Praj
Shubham-Praj

Posted on

Next JS & Node Js Project API call architecture

I have a
Next JS Frontend - 15 (App router)

Node Server - Express JS 4.21

I am trying to create a login system using nextauth, google provider.

Once the user logs in, I want to make an external API call to my node js auth endpoint, with the nextauth google provider session data to create and entry in my postgres DB.

Once the entry is created, I want to create a jwt token using that data, which also includes a newly created user_uuid field and set that cookie in next js frontend client side, so every external API request has that jwt token.

Also on every request I want to refresh the jwt token and again set it as a cookie on client side.

Can someone please explain me how to to make the api call from frontend to backend, I have thought of the following solutions (not sure, wheather they are right or not)

  1. Shall my next js client side api call, hit the next js api/routes endpoint and then it should call the node js backend endpoint ??

  2. Client should directly call the node js endpoints

3.Client should call a service functions (server side), and then those services will call node api endpoints ??

I am confused rn

Any help/references/links/leads would be appreciated

Thanks

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (2)

Collapse
 
ironexdev profile image
Ironex

I'd recommend the 1/ approach - to use Next.js API routes as a middleware between the frontend and the Express backend to keep the backend hidden, secure JWT handling with HTTP-only cookies, manage authentication centrally and you won't have to worry about setting up CORS or XSRF protection.

I have a similar setup in my stack (Express + Next.js). You can check it out here if you want.

Collapse
 
shubhampraj profile image
Shubham-Praj

Thanks for the recommendation and reference

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay