Implementing an HTTP Proxy for Rest API in Next.js | by Furkan Demir | Apr, 2022


Safety should be certainly one of your most vital considerations when constructing an online software. Normally, you don’t need to expose the delicate information of your customers.

Most trendy net functions authenticate with tokens. Tokens ought to be saved by the shopper to ship requests after. There’s loads of method of storing a consumer’s token within the consumer’s browser. Nonetheless, the preferred approach to preserve all forms of tokens in native storage or regular cookies. Sadly, it’s not the most secure place to retailer tokens.

Native storage and regular cookies each of them could be accessed from third-party scripts and browser extensions. I’ll be speaking about storing the token at cookies as HttpOnly.

HttpOnly cookies can’t be accessed by way of client-side JavaScript code. Due to this fact, browser extensions and any JavaScript code that runs on the client-side can not entry these cookies. Thus, your JWT or one thing else is safe and secure. Lastly.

Utilizing an HTTP proxy doesn’t come simply from safe cookies. It additionally offers safety benefits — even when a cross-site scripting (XSS) flaw exists, and a consumer by chance accesses a hyperlink that exploits the flaw, the browser won’t reveal the cookie to the third celebration.

Earlier than we write the code I’ll share the movement with you. We’re going to make two completely different endpoints for the BFF. The primary one is barely to deal with login operations. The second can be used to ahead all requests to the precise API.

login movement

The movement above signifies how the login endpoint works. In reality, we will implement all of it in a single level. It doesn’t make sense to maintain all logic in a single file. Due to that, I’ve separated login logic to elsewhere.

speaking with BFF with proxy after authentication

On this step, we’ll add and allow the API proxy. We should create a proxy server to ahead the requests to the goal useful resource.

0. Arrange atmosphere variables

You should outline some atmosphere variables earlier than beginning. Create a file named .env within the root listing in the event you don’t have one. We’re going to get our back-end service URL from env variables.

Notice: We shouldn’t prefix the env variable with NEXT_PUBLIC_* to keep away from exposing it to the browser.


1. Set up http-proxy and cookies bundle as a dependency

We’d like http-proxy to create a proxy server and the cookies bundle to cope with cookies.

npm set up http-proxy cookies

2. Create a proxy server

You should create a proxy server occasion to make use of API routes. Firstly, create a folder referred to as serverin your root listing. This folder comprises all of your server sorts of stuff and so forth. Simply in case, you may arrange your individual customized server on this folder.

After you’ve created the server folder. Create a folder referred to as proxy.js in /server listing.

3. Implement login endpoint

You need to create an endpoint to deal with login operations. I assume you might have an authentication service to check in to the customers. To attain that, create a folder referred to as api the pages folder. This folder comprises routes.

After you’ve accomplished these steps. You need to create a route file referred to as login.js in your api/authfolder.

4. Implement API proxy

We’d like an entry level to ahead the requests to the goal useful resource. To try this we’ll create a file referred to as [..path].js beneath the api folder that we’ve created. This route will deal with all endpoints after comes /api prefix.

That’s it. You’re prepared to make use of your proxy server. In reality, you may add some options to this implementation. I’ve additionally added a logout API route. I’ve ready a demo. You may view it from Github.

This characteristic comes with all disadvantages and benefits really. Since we’re utilizing the proxy to speak BFF. That results in a rise in TTFB time. Additionally, the setup and upkeep of a proxy server could be expensive.

More Posts