CODEWITHSUNDEEP
authenticationcookiesmiddlewarenext.js13
Muhammad Kamran
Muhammad Kamran

Reputation: 1

User Authentication Issue in Next.js: Protected Routes Accessible After Logout Until Page Refresh

I am currently working on a Next.js application where I have implemented user authentication using cookies and Redux. I've encountered an issue where protected routes remain accessible immediately after the user logs out, but they become inaccessible after a full page refresh. I would appreciate some guidance on how to address this issue effectively.

Problem Description:

1: Authentication Process: When a user logs in, an authentication token is stored in a cookie and the client-side authentication state is updated (e.g., in Redux). and the server return the token which is stored in the browser.

2: Logging Out: When the user clicks the "Logout" button, I am making a DELETE request to the server to clear the authentication token from the cookie. I also dispatch an action to clear the client-side authentication state. After logging out, I redirect the user to the login page.

3: Issue: After logging out, I can still access protected routes without being redirected to the login page. However, when I manually refresh the page, the protected routes become inaccessible, which is the desired behavior.

1: Why are protected routes accessible immediately after logging out, and how can I prevent this behavior? What could be causing this issue, especially considering that a page refresh resolves it?

2: Are there any best practices or additional steps I should follow when implementing user authentication and protected routes in Next.js to avoid such issues?

Code Overview:

Client-Side Logout Handling:

const handleLogout = () => {
  const logout = async () => {
    try {
      await axios.delete(`${config.baseUrl}/users/logout`, {
        withCredentials: true,
      });
      dispatch(logoutUser());
      router.push("/login");
    } catch (error) {
      console.error("Logout failed:", error);
    }
  };

  logout();
};

Next.js Middleware:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname;

  const isPublicPath = path === "/login" || path === "/signup";

  const token = request.cookies.get("token")?.value || "";

  if (isPublicPath && token) {
    return NextResponse.redirect(new URL("/", request.nextUrl));
  }

  if (!isPublicPath && !token) {
    return NextResponse.redirect(new URL("/login", request.nextUrl));
  }
}

Server-Side Logout Endpoint:

exports.LogoutUser = catchAsyncErrors(async (req, res, next) => {

  clearCookie(res, "token");

  if (!req.cookies.token) {
    return next(new ErrorHandler("Login First to Logout", 200));
  }

  res.status(200).json({
    success: true,
    message: "User logged out successfully",
  });
});

I would appreciate any insights, suggestions, or guidance on how to ensure that protected routes are consistently protected immediately after logging out.

Thank you for your assistance.

Upvotes: 0

Views: 563

Answers (1)

Rinu Thomas
Rinu Thomas

Reputation: 161

I faced the same issue and I was not able to find a proper way to solve the issue. The simple that I am currently using is just to replace the URL if the user is not authenticated. calling it inside the useEffect shows flickering. So checking it straight inside the react component

 if (!isAuthenticated) {
    router.replace("/login");
  }

Upvotes: 0

Related Questions