wrapping api routes

[zoozalp]

What is the best practice for wrapping my API routes?

I mean I can wrap my pages with _app.js/tsx and handle things like authentication at a single point. It feels like there should be a similar solution for api routes but I couldn't find it yet.

I'm going to create my wrappers and import them into every api but a generic solution would be definitely cleaner.

[j0lvera]

@zoozalp I think you are talking about middlewares? If so here's an example of a simple one:

// hello.js

import { serialize } from "cookie";

const hello = (handler) => async (req, res) => {
      res.setHeader("Set-Cookie", serialize('hello', 'world'));
      return handler(req, res);
}

export { hello };

How you use it:

// pages/api/hello-cookie.js

import { hello } from './hello';

export default hello((req, res) => {
    return res.status(200).json({ message: "A cookie was set in this route by a middleware."})
});

If you are referring to set a middleware that affects all API routes I think that's not possible 🤔.

[AxelReid]

I'm using typescript, what is the type definition for the handler?

[leerob]

@AxelReid https://nextjs.org/docs/basic-features/typescript#api-routes

[coltenkrauter]

Thanks for this simple example. Very helpful.

[steven-tey]

@AxelReid the type definition for the handler is NextApiHandler :)

You can import that from next like this:

import { NextApiHandler, NextApiRequest, NextApiResponse } from "next";

[Esatollah]

@baptisteArno

Is there a way to pass down the authenticated user to the handler for example?

did you get to an answer?

[IRediTOTO]

Lets try next-connect :) very ok

[zoozalp]

Using next-connect is like creating a custom server. I'm talking about something like adding authentication and error handling without changing every single api route. Just like pages/_app.js does for pages.

[IRediTOTO]

I have a file called auth.js

export default (req, res, next) => {
   console.log("check user middleware")
   if (req.user) {
      next();
   } else {
      res.json({ title: "Waring", message: "nothing 4 u here" });
   }
};

In any api you can use like this

const handler = nextConnect();

handler.use(auth); 
// or like this. 
handler.get(auth, async (req, res) => {

Is this what you want ?

[zoozalp]

What I want is to make all api routes use that auth middleware by changing only one file. There is pages/_app.js for pages but I guess nextjs doesn't something similar for api routes yet.

[ctrlaltdylan]

I just want to bump this issue.

We really need some kind of central route wrapping definition.

It gets tricky because NextJS API routes are built to be distributed as standalone serverless functions, which means at build time the routes manifest would need to be read, and code generated to wrap the functions.

[phifa]

any updates on this?

[renenielsendk]

Still could use this logic, so we can reduce all the redundant code

[rsheppard-dev]

I made middleware to check auth for my api routes.

I create functions for each method and then wrap the export in a higher-order function that authenticates the method/route.

Here is an example from something I'm working on at moment with Typescript:

middleware/withProtect.ts

import { NextApiResponse } from 'next';

import jwt from 'jsonwebtoken';

import User from '../models/User';
import ExtendedNextApiRequest from '../interfaces/ExtendedNextApiRequest';
import connectMongo from '../db/mongoose';

const withProtect = (
	handler: (arg0: ExtendedNextApiRequest, arg1: NextApiResponse<any>) => any
) => {
	return async (req: ExtendedNextApiRequest, res: NextApiResponse) => {
		try {
			await connectMongo();

			const secret = process.env.JWT_SECRET!;
			const token = req.headers.authorization?.replace('Bearer ', '');

			if (!token) {
				throw new Error('Failed to authenticate user.');
			}

			const decoded: any = jwt.verify(token, secret);

			const user = await User.findOne({
				_id: decoded._id,
				'tokens.token': token,
			});

			if (!user) {
				throw new Error();
			}

			req.user = user;

			return handler(req, res);
		} catch (error) {
			console.log(error);
			res.status(500).json(error);
		}
	};
};

export default withProtect;

apis/getAllUsers.ts

import { NextApiResponse } from 'next';

import ExtendedNextApiRequest from '../interfaces/ExtendedNextApiRequest';
import withProtect from '../middleware/withProtect';
import User from '../models/User';

const getAllUsers = async (
	req: ExtendedNextApiRequest,
	res: NextApiResponse
) => {
	try {
		const users = await User.find({});

		res.status(200).json(users);
	} catch (error) {
		console.log(error);
		res.status(500).json(error);
	}
};

export default withProtect(getAllUsers);

pages/api/users/index.ts

import type { NextApiResponse } from 'next';

import connectMongo from '../../../db/mongoose';
import ExtendedNextApiRequest from '../../../interfaces/ExtendedNextApiRequest';
import createUser from '../../../apis/createUser';
import getAllUsers from '../../../apis/getAllUsers';

const handler = async (req: ExtendedNextApiRequest, res: NextApiResponse) => {
	try {
		await connectMongo();
	} catch (error) {
		console.log(error);
		res.status(500).json(error);
	}

	switch (req.method) {
		case 'POST':
			return createUser(req, res);
		case 'GET':
			return getAllUsers(req, res);
		default:
			break;
	}
};

export default handler;

[steven-tey]

Hey folks! Here's a real world example of how you can do exactly this with a helper function: https://github.com/steven-tey/dub/blob/main/lib/auth.ts#L33-L118

And here's how you use it in an API route: https://github.com/steven-tey/dub/blob/main/pages/api/projects/%5Bslug%5D/index.ts

The cool thing about this approach is you can even pass data from the helper function to your API route (and vice versa) 😃

[FPDK]

Link for readers in 2023 🙂