Http adapter for next auth | How to use next auth with custom backend

4 min readAug 17, 2023

next-auth aka auth.js is a popular library that simplifies the process of adding user authentication, identity management, and third-party login options, making it easier for developers to create secure and user-friendly login experiences. By handling various authentication strategies and providing session management.

next-auth used to be only supported with next.js, but now auth.js is headless and can be used with other meta frameworks including SevelteKit and SolidStart.

It supports many popular databases using many adapters that are already available in the library. But what if you’re like me and don’t want to use next.js as your backend in projects not suitable for it? And you still like me want to take advantage of its session management, third-party logins that are tricky and time-consuming to setup. It makes it very to drop in different third-party auth providers (Google, Facebook, Apple, etc) at the same time. But the feature I appreciate the most is frontend auth state management that comes built-in and available by wrapping components in provider.

But now comes the tricky part, you also want to store users in the database familiar to your backend ORM which is then required for things like SQL joints and user authentication. For instance, django has built-in user management and everything works together pretty smoothly if user is being stored in the database managed by django.

That’s why I wrote a simple next-auth adapter called next-auth-http-adapter that instead of persisting user’s information directly in the database, communicate with a custom backend for its needs.

mabdullahadeel/next-auth-http-adapter: next auth adapter for authentication over http (github.com)

Detailed information on how to use it in your application can be found in the REDME.

Authencation with your backend

Don’t make the required endpoints public as anyone will then be able to make request to your backend and create users. To make sure that your frontend is actually making the request, you can use different methods as per your need. But the simplest one is to share a secret token in the request header in each request made from the adapter.

You can easily override almost every aspect of the request being made to your backend. Here is how simple it is to attach a secret token in each request header so that your backend knows about the validity of the request.

import { httpAdapter } from "next-auth-http-adapter";

const myHttpAdapter = httpAdapter({
  baseURL: "http://localhost:8000", // or any other base url
  headers: {
    Authorization: process.env.YOUR_SECRET_TOKEN_HERE!,
  },
})

General configurations

To cofigure next-auth-http-adpter you need to provide some configurations all the required callbacks. As of now, only path is the required param which indicates the path the request will be made to get required information or to mutate the server state.

More information can be found in README of the project.

Custom tokens

Now, to be able to make subsequent requests after authentication, its recommended to opt for jwt authentication which is the most common authentication scheme now.

To enable it, configure next-auth like:

import NextAuth from "next-auth";

const handler = NextAuth({
// ....
  session: {
    strategy: "jwt",
  },
// ....
})

The token will be included as cookie to each request your app will make to the backend.

Here is how you can create custom tokens and share the secret with your backend.

If your backend jwt library supports algorithms for decoding tokens generated by next auth by default, you’re good. In other case, you can configure next-auth to create custom tokens like:


import type { JWT } from "next-auth/jwt";
import jwt from "jsonwebtoken";

// ....
jwt: {
    secret: process.env.NEXTAUTH_SECRET!,
    encode: async ({ secret, token, maxAge }) => {
      return jwt.sign(token!, secret, {
        algorithm: "HS256",
      });
    },
    decode: async ({ secret, token }) => {
      const decodeed = jwt.verify(token!, secret, {
        algorithms: ["HS256"],
      }) as JWT;
      return decodeed;
    },
  },
// ...

Conclusion

next-auth by default provide database adapters to persist user data and session. next-auth-http-adapter is a next-auth adapter that works seamlessly with next-auth to communicate with custom backend. This way, you can persist still save user data in your database managed by your backend and take advantage of out of the box session management and third-party logins along with other perks next-auth comes with.

Try the adapter: