Is this the correct and secure way to connect Next.js + NextAuth with a Django Rest Framework API?

[mahieyin-rahmun]

Your question
I have been working on a Next.js app with a custom backend using Django Rest Framework, with the main focus on authentication with social platforms (Google, Github etc). My question is whether the way I am doing it is secure and will not cause security issues.

What are you trying to do
I am trying to make my Next.js app interact securely with a Django Rest Framework backend. Here's the flow I am wanting to use:

1. Have the NextAuth do the heavy lifting for social authentication. It gets back, for instance, an access token and an id token when the user wants to login with his/her Google account.
2. Put the id token and access token given back by Google into the NextAuth session object.
3. In the frontend, use those two tokens in the session object to make a POST request to the DRF backend which essentially accepts the access token and id token and returns a access token and a refresh token. NB. The DRF backend has dj-rest-auth and django-allauth setup to handle social authentication.
4. The DRF backend sends back the tokens in the form of HTTPOnly cookies. So, next time I want to make a request to the DRF API, the cookies should be passed along the request.

Reproduction
Here's the code for context:

index.tsx

import React, { useEffect } from "react";
import { signIn, signOut, useSession } from "next-auth/client";
import { Typography, Button, Box } from "@material-ui/core";
import { makeUrl, BASE_URL, SOCIAL_LOGIN_ENDPOINT } from "../urls";
import axios from "axios";
axios.defaults.withCredentials = true;

function index() {
  const [session, loading] = useSession();

  useEffect(() => {
    const getTokenFromServer = async () => {
      // TODO: handle error when the access token expires
      const response = await axios.post(
        // DRF backend endpoint, api/social/google/ for example
        // this returns accessToken and refresh_token in the form of HTTPOnly cookies
        makeUrl(BASE_URL, SOCIAL_LOGIN_ENDPOINT, session.provider),
        {
          access_token: session.accessToken,
          id_token: session.idToken,
        },
      );
    };

    if (session) {
      getTokenFromServer();
    }
  }, [session]);

  return (
    <React.Fragment>
      <Box
        display="flex"
        justifyContent="center"
        alignItems="center"
        m={5}
        p={5}
        flexDirection="column"
      >
        {!loading && !session && (
          <React.Fragment>
            <Typography variant="button">Not logged in</Typography>
            <Button
              variant="outlined"
              color="secondary"
              onClick={() => signIn()}
            >
              Login
            </Button>
          </React.Fragment>
        )}
        {!loading && session && (
          <React.Fragment>
            <Typography>Logged in as {session.user.email}</Typography>
            <pre>{JSON.stringify(session, null, 2)}</pre>
            <Button
              variant="outlined"
              color="primary"
              onClick={() => signOut()}
            >
              Sign Out
            </Button>
          </React.Fragment>
        )}
      </Box>
    </React.Fragment>
  );
}

export default index;

api/auth/[...nextauth].ts

import NextAuth from "next-auth";
import { InitOptions } from "next-auth";
import Providers from "next-auth/providers";
import { NextApiRequest, NextApiResponse } from "next";
import axios from "axios";

import { BASE_URL, SOCIAL_LOGIN_ENDPOINT, makeUrl } from "../../../urls";
import { AuthenticatedUser, CustomSessionObject } from "../../../types";
import { GenericObject } from "next-auth/_utils";

const settings: InitOptions = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorizationUrl:
        "https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code",
    }),
  ],

  secret: process.env.NEXT_AUTH_SECRET,

  session: {
    maxAge: 6 * 60 * 60, // 6 hours
  },

  callbacks: {
    async signIn(user: AuthenticatedUser, account, profile) {
      if (account.provider === "google") {
        const { accessToken, idToken, provider } = account;
        user.accessToken = accessToken;
        user.idToken = idToken;
        user.provider = provider;
        return true;
      }

      return false;
    },

    async session(session: CustomSessionObject, user: AuthenticatedUser) {
      session.accessToken = user.accessToken;
      session.idToken = user.idToken;
      session.provider = user.provider;
      return session;
    },

    async jwt(token, user: AuthenticatedUser, account, profile, isNewUser) {
      if (user) {
        token.accessToken = user.accessToken;
        token.idToken = user.idToken;
        token.provider = user.provider;
      }

      return token;
    },
  },
};

export default (req: NextApiRequest, res: NextApiResponse) => {
  return NextAuth(req, res, settings);
};

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• [*] Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[lukeswilliams]

Did you get anywhere with this? I am also interested!

[jlarmstrongiv]

I am also interested in the best way to integrate next-auth and django

[jstormail2]

Here’s some related information https://arunoda.me/blog/add-auth-support-to-a-next-js-app-with-a-custom-backend but I don’t have a clear answer

Also, another Q&A about this topic that was unanswered #1226

[j-lee8]

This is helpful, but Arunoda doesn't show how the token is generated in the API server, how the authorisation is handled and how to make the requests to the API server from Next. For those of us who are totally new to Next and auth this is super frustrating as every resource seems to assume you're using API routes.

[mahieyin-rahmun]

Hello, OP here. Sorry for the delay in response.

I figured a better way to integrate django-rest-framework and next-auth, however, I still am unsure whether this is the right way to do it, so feel free to suggest/criticize. Much of it is inspired by this post by Arunoda but requires some specific settings at the Django level in the backend.

I wrote an article here, the associated code can be found at here, under the branch named part-1. I am currently in the process of writing a part 2, however, I don't know if it is valid. The details of the modifications that I am doing for part 2 are as follows:

Assuming you have done everything mentioned in the article, (or you could clone the part-1 branch of the given repo and set it up), you create a separate file utils.ts, which contains the following code,

export namespace NextAuthUtils {
  export const checkAccessTokenValidity = async function (accessToken) {
    try {
      const response = await axios.post(
        "http://localhost:8000/api/auth/token/verify/",
        {
          token: accessToken,
        },
      );

      return true;
    } catch {
      return false;
    }
  };

  export const refreshToken = async function (refreshToken) {
    try {
      const response = await axios.post(
        "http://localhost:8000/api/auth/token/refresh/",
        {
          refresh: refreshToken,
        },
      );

      const { access, refresh } = response.data;

      return [access, refresh];
    } catch {
      return [null, null];
    }
  };
}

Then, in the [...nextauth].ts file, you can make the following modifications:

const settings: InitOptions = {
  secret: process.env.SESSION_SECRET,
  session: {
    jwt: true,
    maxAge: 24 * 60 * 60, // 24 hours
  },
  jwt: {
    secret: process.env.JWT_SECRET,
  },
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async signIn(user: AuthenticatedUser, account, profile) {
      // may have to switch it up a bit for other providers
      if (account.provider === "google") {
        // extract these two tokens
        const { accessToken, idToken } = account;

        // make a POST request to the DRF backend
        try {
          const response = await axios.post(
            // tip: use a seperate .ts file or json file to store such URL endpoints, or better, an environment variable
             "http://127.0.0.1:8000/api/social/login/google/",
            {
              access_token: accessToken, // note the differences in key and value variable names
              id_token: idToken,
            },
          );

          // extract the returned token from the DRF backend and add it to the `user` object
          const { access_token, refresh_token } = response.data;
          user.accessToken = access_token;
          user.refreshToken = refresh_token;

          return true; // return true if everything went well
        } catch (error) {
          return false;
        }
      }
      return false;
    },

    async jwt(token, user: AuthenticatedUser, account, profile, isNewUser) {
      if (user) {
        const { accessToken, refreshToken } = user;

        // reform the `token` object from the access token we appended to the `user` object
        token = {
          ...token,
          accessToken,
          refreshToken,
        };

        // remove the tokens from the user objects just so that we don't leak it somehow
        delete user.accessToken;
        delete user.refreshToken;

        return token;
      }

      // cheking session validity, check if the token is still valid
      const accessTokenValid = await NextAuthUtils.checkAccessTokenValidity(
        token.accessToken,
      );

      // token has been invalidated, try refreshing it
      if (!accessTokenValid) {
        const [
          newAccessToken,
          newRefreshToken,
        ] = await NextAuthUtils.refreshToken(token.refreshToken);

        if (newAccessToken && newRefreshToken) {
          token = {
            ...token,
            accessToken: newAccessToken,
            refreshToken: newRefreshToken,
            iat: Math.floor(Date.now() / 1000),
            exp: Math.floor(Date.now() / 1000 + 2 * 60 * 60),
          };

          return token;
        }

        // unable to refresh tokens from DRF backend, invalidate the token
        return {
          ...token,
          exp: 0,
        };
      }

      // token valid
      return token;
    },
  },
};

export default (req: NextApiRequest, res: NextApiResponse) =>
  NextAuth(req, res, settings);

Next, in your _app.tsx file:

import { Provider as AuthProvider } from "next-auth/client";
import { AppProps } from "next/app";
import React from "react";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider
      session={pageProps.session}
      { /* these values can change depending on the `ACCESS_TOKEN_LIFETIME` and `REFRESH_TOKEN_LIFETIME` in your django `settings.py` */ }
      options={{
        clientMaxAge: 5 * 60, 
        keepAlive: 3 * 60,
      }}
    >
        <Component {...pageProps} />
    </AuthProvider>
  );
}

export default MyApp;

This works, but with 2 caveats:

1. If you are interacting with the web app, the token will get refreshed in the background. But, if you keep the app open, go for a stroll and return after the access token has expired, you have to refresh the page to get the new pair of access token and refresh token from the django backend.
2. There's an issue with different providers (e.g. a person signs up with Google and the same person later on tries to sign in with Github with same email), but I believe it is an easy fix once we solve the other problems.

Let me know about your suggestions/criticisms. Thanks and have a nice day.

[balazsorban44]

Small suggestions:

the way how you patch user in signIn feels a bit wrong. I would do it in the if branch in the jwt callback.

the validity check of the access token shouldn't happen on each invocation of the jwt callback either, as it would contact the backend more often than needed. get hold of the expiry time of the access token, and add it to the check validity function. if still not expired, you could simply assume it is still valid without a backend call

otherwise looking good!

[mahieyin-rahmun]

the way how you patch user in signIn feels a bit wrong. I would do it in the if branch in the jwt callback.

Yeah, now that I look at it, the jwt() callback is called with pretty much the same set of arguments as the signIn() callback on first sign in, so it's kind of redundant. Silly me!

the validity check of the access token shouldn't happen on each invocation of the jwt callback either, as it would contact the backend more often than needed. get hold of the expiry time of the access token, and add it to the check validity function. if still not expired, you could simply assume it is still valid without a backend call

That is indeed a better way.

Thank you very much for your input.

[longfellowone]

If you fetch the access token in jwt() how do you then reject a bad login/user from inside this function?

[georgekrax]

@longfellowone you should not fetch on JWT, because it runs many times. You should only generate a jwt token there, with a function from either jsonwebtoken or jose packages

[quroom]

@georgekrax I am just curious why you said "you should not fetch on JWT because it runs many times"
Altough it runs many times, the code will be run with specific condition branch like ".
I am sure it's problem to fetch many times to verify token.
But I guess it doesn't matter with his updated code.
How do you think?

This is updated code I guess.

NextJsWithDRFExample/client/constants
/Utils.ts

import jwt from "jsonwebtoken";

export namespace JwtUtils {
  export const isJwtExpired = (token: string) => {
    // offset by 60 seconds, so we will check if the token is "almost expired".
    const currentTime = Math.round(Date.now() / 1000 + 60);
    const decoded = jwt.decode(token);

    console.log(`Current time + 60 seconds: ${new Date(currentTime * 1000)}`);
    console.log(`Token lifetime: ${new Date(decoded["exp"] * 1000)}`);

    if (decoded["exp"]) {
      const adjustedExpiry = decoded["exp"];

      if (adjustedExpiry < currentTime) {
        console.log("Token expired");
        return true;
      }

      console.log("Token has not expired yet");
      return false;
    }

    console.log('Token["exp"] does not exist');
    return true;
  };
}

export namespace UrlUtils {
  export const makeUrl = (...endpoints: string[]) => {
    let url = endpoints.reduce((prevUrl, currentPath) => {
      if (prevUrl.length === 0) {
        return prevUrl + currentPath;
      }

      return prevUrl.endsWith("/")
        ? prevUrl + currentPath + "/"
        : prevUrl + "/" + currentPath + "/";
    }, "");
    return url;
  };
}

import { NextApiRequest, NextApiResponse } from "next";
import NextAuth from "next-auth";
import { NextAuthOptions } from "next-auth";
import Providers from "next-auth/providers";
import axios from "axios";
import { JwtUtils, UrlUtils } from "../../../constants/Utils";

namespace NextAuthUtils {
  export const refreshToken = async function (refreshToken) {
    try {
      const response = await axios.post(
        // "http://localhost:8000/api/auth/token/refresh/",
        UrlUtils.makeUrl(
          process.env.BACKEND_API_BASE,
          "auth",
          "token",
          "refresh",
        ),
        {
          refresh: refreshToken,
        },
      );

      const { access, refresh } = response.data;
      // still within this block, return true
      return [access, refresh];
    } catch {
      return [null, null];
    }
  };
}

const settings: NextAuthOptions = {
  secret: process.env.SESSION_SECRET,
  session: {
    jwt: true,
    maxAge: 24 * 60 * 60, // 24 hours
  },
  jwt: {
    secret: process.env.JWT_SECRET,
  },
  debug: process.env.NODE_ENV === "development",
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async jwt(token, user, account, profile, isNewUser) {
      // user just signed in
      if (user) {
        // may have to switch it up a bit for other providers
        if (account.provider === "google") {
          // extract these two tokens
          const { accessToken, idToken } = account;

          // make a POST request to the DRF backend
          try {
            const response = await axios.post(
              // tip: use a seperate .ts file or json file to store such URL endpoints
              // "http://127.0.0.1:8000/api/social/login/google/",
              UrlUtils.makeUrl(
                process.env.BACKEND_API_BASE,
                "social",
                "login",
                account.provider,
              ),
              {
                access_token: accessToken, // note the differences in key and value variable names
                id_token: idToken,
              },
            );

            // extract the returned token from the DRF backend and add it to the `user` object
            const { access_token, refresh_token } = response.data;
            // reform the `token` object from the access token we appended to the `user` object
            token = {
              ...token,
              accessToken: access_token,
              refreshToken: refresh_token,
            };

            return token;
          } catch (error) {
            return null;
          }
        }
      }

      // user was signed in previously, we want to check if the token needs refreshing
      // token has been invalidated, try refreshing it
      if (JwtUtils.isJwtExpired(token.accessToken as string)) {
        const [
          newAccessToken,
          newRefreshToken,
        ] = await NextAuthUtils.refreshToken(token.refreshToken);

        if (newAccessToken && newRefreshToken) {
          token = {
            ...token,
            accessToken: newAccessToken,
            refreshToken: newRefreshToken,
            iat: Math.floor(Date.now() / 1000),
            exp: Math.floor(Date.now() / 1000 + 2 * 60 * 60),
          };

          return token;
        }

        // unable to refresh tokens from DRF backend, invalidate the token
        return {
          ...token,
          exp: 0,
        };
      }

      // token valid
      return token;
    },

    async session(session, userOrToken) {
      session.accessToken = userOrToken.accessToken;
      return session;
    },
  },
};

export default (req: NextApiRequest, res: NextApiResponse) =>
  NextAuth(req, res, settings);

[johnvonneumann7]

How can I make this support authentication with credentials (username or email + password)?
I've spent quite a bit of time looking into this, but am consuming a lot of time with no information.
The backend is DRF + dj-rest-auth + simplejwt(httponly cookie)

We also need to get the other user information that is associated with Django's User.

[andremantaswow]

random, unrelated question...

i was using import { GenericObject } from "next-auth/_utils"; on 3.11 but now its gone on 3.29... where can i import it from?

[balazsorban44]

it was never intended to be imported (hence _). you should refactor your code not to rely on that internal module

[balazsorban44]

Newer versions of next-auth has much better/built-in TypeScript support, you should consider upgrading.

[demonhunter3333]

So is the code working with DRF or not?😅

[levanidev]

sir did u ever figure it out?

[betancourtl]

I've been stuck on this a couple of weeks now. Anyone found other alternatives besides next-auth?

[georgekrax]

I do not think there is, except from something you implement custom on your own.

[balazsorban44]

What are you exactly stuck on? It's probably worth opening a new discussion, with detailed explanation of what you have tried and what's not working. Commenting "stuck for weeks" has no value for us to be able to help you.

[mojtabajahannia]

Hello friends
I also use this method and it works:

/api/auth/[...nextauth].js:

/* eslint-disable no-undef */
import jwtDecode from "jwt-decode"
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import axiosInstance from "../../../src/axios"

async function refreshAccessToken(token) {
	try {
		const res = await axiosInstance.post("/token/refresh/", {
			refresh: token.refresh,
		})

		return {
			...token,
			access: res.data.access,
			refresh: res.data.refresh,
		}
	} catch (error) {
		console.error(error)

		return {
			...token,
			error: "RefreshAccessTokenError",
		}
	}
}

export const authOptions = {
	// Configure one or more authentication providers
	providers: [
		CredentialsProvider({
			name: "Credentials",
			
			async authorize(credentials) {
				// Add logic here to look up the user from the credentials supplied
				const { otp, phone } = credentials

				try {
					const res = await axiosInstance.post("token/", {
						otp: otp,
						phone: phone,
					})
					return res.data
				} catch (error) {
					return null
				}
			},
		}),
	],
	secret: process.env.JWT_SECRET,
	pages: {
		signIn: "/login",
	},
	callbacks: {
		async jwt({ token, account, user }) {
			if (user && account) {
				return {
					...token,
					access: user.access,
					refresh: user.refresh,
					is: user.is,
					user: user.user,
					_ag: user._ag,
					_mI: user._mI,
					_uI: user._uI,
				}
			}
			const tokenParts = jwtDecode(token.access)
			if (Date.now() < tokenParts.exp * 1000) {
				console.log("EXISTING ACCESS TOKEN IS VALID")
				return token
			}
			console.log("ACCESS TOKEN HAS EXPIRED, REFRESHING...")
			return await refreshAccessToken(token)
		},
		async session({ session, token }) {
			session.access = token.access
			session.refresh = token.refresh
			session.is = token.is
			session.user = token.user
			session._ag = token._ag
			session._mI = token._mI
			session._uI = token._uI

			return session
		},
	},
}

export default NextAuth(authOptions)

my login page login.jsx:

import { signIn } from "next-auth/react"

....

const handleSubmited = (data) => {
  if (timer > 0) {
	  setloading(true)
	  signIn("credentials", {
		  phone: data.phone,
		  otp: data.otp,
		  callbackUrl: '/panel',
	  })
  }
}

...

_middleware.js:

/* eslint-disable no-undef */
import { getToken } from "next-auth/jwt"
import { NextResponse } from "next/server"

export async function middleware(req) {
	const token = await getToken({ req, secret: process.env.JWT_SECRET })

	const { pathname, search } = req.nextUrl

	if (pathname.includes("/api/auth") || (token && pathname !== "/login")) {
		return NextResponse.next()
	}

	if (token && pathname === "/login") {
		return NextResponse.redirect("/panel")
	}

	if (!token && pathname !== "/login") {
		return NextResponse.redirect("/login")
	}
}

_app.js:

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
	const getLayout = Component.getLayout || ((page) => page)

return (
  <SessionProvider session={session}>
    ...
      {getLayout(<Component {...pageProps} />)}
    ...
  </SessionProvider>
)
}

If you want to use the rendering server feature in the pages section, do the following:

import { authOptions } from "../api/auth/[...nextauth]"
import { getServerSession } from "next-auth"
import { getSession } from "next-auth/react"


export async function getServerSideProps(context) {
        const { access, _ag } = await getSession(context) ❌
	const { access, _ag } = await getServerSession(context, authOptions) ✅

	const headers = {
		Authorization: `Bearer ${access}`,
		"Content-Type": "application/json",
		accept: "application/json",
	}

	const res = await axios.get(
		`${process.env.BACKEND_URL}/api/full-location/${_ag}/`,
		{
			headers: headers,
		}
	)

	const location = await res.data

	return {
		props: { location: location, ag: _ag },
	}
}

If you use the first method, I do not know why it uses the old token when refreshing the token. And that caused me a lot of trouble.
In this method, I used a mobile number and OTP code for authentication, which you can change with your username and email or anything else. and; If you have a better suggestion, I would be happy to improve this code.

[SultanNasyrovDeveloper]

Since you're using only access token on the client part, maybe better not to include refresh token into session.

[hillmark]

I have been struggling with this for a couple of days and found the answer by @mojtabajahannia to be very useful along with a few other scattered resources online. I've put together a complete example which may be a useful starting point for others. I am not sure if it is the best approach either, but it's working...

[cadenforrest]

One idea is to put your server in front of Next.JS as a reverse-proxy. This is a Gin server, but same idea:

https://story.tomasen.org/a-better-practice-mixing-gin-with-next-js-and-nextauth-on-the-side-4f9d1fb9e486