Is mutual TLS authentication possible with next.js without a custom server?

[paulhayessilex]

Does anyone know of any examples?

[pmilic021]

@paulhayessilex Did you manage to solve it in the meantime? I'm also looking for an answer.

[monecchi]

I've been trying to find a method to properly set up axios and Client Certificate while using Next.js 14 because my App API Routes call an external API service that requires (mTLS - mutual TLS) client certificate authentication. Besides the client certificates, the API requires a token acquired during OAuth authentication. I'm using next-auth for authentication.

I'm setting up the certificates with axios as bellow:

/lib/banking-api.ts

import https from 'https'
import fs from 'fs'
import axios from 'axios'
import { getServerSession } from 'next-auth'
import { authOptions } from '@/auth'

const baseURL = process.env.BANKING_API_BASE_URL

const certFile = fs.readFileSync('certificates/api-cert.crt')
const keyFile = fs.readFileSync('certificates/api-cert-key.key')

export const httpsAgent = new https.Agent({
  cert: certFile,
  key: keyFile,
  rejectUnauthorized: false
})

Here I finish axios configuration such as passing token to headers config...

export const httpClient = axios.create({
  baseURL: baseURL,
  headers: {
    'x-account': process.env.BANKING_API_ACCOUNT,
    withCredentials: true
  },
  httpsAgent: httpsAgent
})

httpClient.interceptors.request.use(
  async (config) => {
    const session = await getServerSession(authOptions)
    const token = session?.user?.access_token
    config.headers.Authorization = token ? `Bearer ${token}` : ''
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

const api = httpClient 

export default api

Within API routes I've tried to use Next.js 14 fetch() but it seems not to support the https.agent configuration so I couldn't set up the certificates. I've tried something along the lines bellow:

import { httpsAgent } from '@/lib/banking-api'

const result = await fetch('https://api.banking.com', {
    (...)
    agent: httpsAgent
}

Bellow is an API route that successfuly works as expected, but given the way I've set up axios as httpClient under /lib/banking-api.ts, a few issues arrise as I explain ahead.

/api/banking/balance/route.ts

'use server'
import type { NextApiHandler } from 'next'
import { NextApiRequest, NextApiResponse } from 'next'
import { NextResponse } from 'next/server'
import { httpClient } from '@/lib/banking-api'

const dateSimple = () => new Date().toISOString().slice(0, 10) // 2024-04-18

export const GET: NextApiHandler = async (request: NextApiRequest, response: NextApiResponse) => {
  try {
    // calling external api service with custom axios config
    const response = await httpClient.get('https://api.banking.com/v2/balance', {
      params: {
        date: dateSimple()
      }
    })

    const data = response.data

    return NextResponse.json(data, { status: 200 })
  } catch (error) {
    return NextResponse.json(error, { status: 500 })
  }
}

On client components or pages explicity setting 'use client' directive, if I make a request to https://localhost:3000/api/banking/balance using Next.js fetch() I successfully get a response data from the API route above. I then use React.useState() to manage the data for the component or page...

However, If I try to import the custom httpClient and use it to make requests within client components, 'fs' and 'https' modules won't load giving "module not found" error as long as they're used server side only.

On server components or pages if I make a request to https://localhost:3000/api/banking/balance using Next.js fetch() I get a 401 unauthorized response as long as fetch() is not sending the client certificates in the request.

I'm not sure what to do now...