next-auth.js with next.js middleware redirects to sign-in page after successful sign-in - next.js

Question

I use next-auth.js with Google as my login provider and Django as my backend. To protect pages in next.js, I am trying to integrate next-auth.js with next.js middleware. Reference link
The issue I have is when the user is logged out, the middleware correctly routes to the login page. But after successful login, the user is redirected to the login page again. What am I missing?
middleware.js
export { default } from "next-auth/middleware"
export const config = { matcher: ["/jobs/:path*", "/accounts/:path*", "/profile/:path*", "/uploads/:path*"] }
/pages/api/auth/[...nextauth.js]
import axios from "axios";
import NextAuth from "next-auth"
import Google from "next-auth/providers/google";
import { isJwtExpired } from "../../../constants/Utils";
async function refreshAccessToken(token) {
try {
const response = await axios.post(
process.env.NEXT_PUBLIC_BACKEND_BASE + "/api/auth/token/refresh/", {
refresh: token.refreshToken
});
const { access, refresh } = response.data;
return {
...token,
accessToken: access,
refreshToken: refresh,
}
} catch (error) {
console.log(error)
return {
...token,
error: "RefreshTokenError"
}
}
}
export default NextAuth({
providers: [
Google({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
authorization: {
params: {
access_type: "offline",
response_type: "code",
scope:'openid profile email'
}
}
}),
],
callbacks: {
async jwt({ token, user, account}) {
// Initial sign in
if (account && user) {
if (account.provider === "google") {
const { access_token: accessToken } = account;
try {
// make a GET request to the DRF backend
const response = await axios.get(
process.env.NEXT_PUBLIC_BACKEND_BASE + "/api/auth/register-by-token/google-oauth2/",
{
params:
{
access_token: accessToken
}
}
);
const { access, refresh } = response.data;
token = {
...token,
accessToken: access,
refreshToken: refresh,
};
return token
} catch (error) {
console.log(error)
return {
...token,
error: "NewUserTokenError"
}
}
}
return {
...token,
error: "InvalidProviderError"
}
}
if (isJwtExpired(token.accessToken)) {
return refreshAccessToken(token)
} else {
return token
}
},
async session({ session, token }) {
session.accessToken = token.accessToken
session.refreshToken = token.refreshToken
session.error = token.error
return session
}
}
})

Answer 1

Upgrading next-auth.js to 4.7.0 with next.js at 12.2.0 fixed it for me.

Answer 2

I've run into the same problem and I was able to get it working correctly by disabled prefetching on the <Link prefetch={false} href={'/protected-route'}/> component associated with the protected pages in the application. I think that the prefetched version is cached and, upon successful singIn(), the cached version is served.
I hope it helps!

Answer 3

In nextjs 11.1.4 and NextAuth 4.18.8 this problem still persist
i fixed issue like this.
import { withAuth } from "next-auth/middleware"
// i used advanced middleware configuration
export default withAuth(
function middleware(req) {
// some actions here
},
{
callbacks: {
authorized: ({ token }) => {
// verify token and return a boolean
return true
},
},
}
)
export const config = { matcher: ["/jobs/:path*", "/accounts/:path*", "/profile/:path*", "/uploads/:path*"] }