Theo's Typesafe Cult•2y ago

Next-Auth default middleware redirect to signin page even when logged in.

NextAuth version: 4.18.8 Next version: 13.1.1 I want to make some pages that only logged in users can visit, but next-auth middleware redirect to the signin page even when logged in.

15 Replies

Yatochka•2y ago

Same thing happens with that code. Session is just null.

Yatochka•2y ago

(Now it redirect to / page)

Yiannis•2y ago

i use gSSP to do this on each page, but my app doesn't have any static generated pages that need to be on protected routes. I couldn't get the session from the request that comes to middleware. I think the getServerAuthSession needs a different req and res which is not what comes in during middleware (disclaimer, I'm new to this, still haven't finished going trough the next js and next auth docs and there are way more qualified people on here to help you, just sharing what worked for me) hey there, dunno if you sorted that out but this works for me: Hope this helps

Yiannis•2y ago

Yiannis•2y ago

on the matcher you just add the pages that you want this to run on

thejessewinton•2y ago

What session strategy are you using? NextAuth only supports middleware with jwt sessions, so if you’re using database it won’t find a valid session. @Yiannis one thing to consider with you’re solution; it doesn’t validate the cookie, simply looks for a cookie with that key. If someone were to manually add a cookie with that key and any value, it seems to me that they’d be able to bypass the middleware and access the app.

Yiannis•2y ago

that's a fair point! Anarcist in another similar question provided this (not sure if tagging is allowed): https://next-auth.js.org/getting-started/client#require-session

Client API | NextAuth.js

The NextAuth.js client library makes it easy to interact with sessions from React applications.

Yiannis•2y ago

which looks a lot better

thejessewinton•2y ago

Yeah, the client API is great, it just can't be used in middleware. If you're wanting to use database sessions, then I've found it really useful to just export a gssp from each page.

import type { GetServerSidePropsContext } from "next";
import { getServerAuthSession } from "server/auth/get-server-auth-session";

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const session = await getServerAuthSession(ctx);

  if (!session) {
    return {
      redirect: {
        destination: "/sign-in",
        permanent: false,
      },
    };
  }

  return {
    props: {
      session,
    },
  };
};

import type { GetServerSidePropsContext } from "next";
import { getServerAuthSession } from "server/auth/get-server-auth-session";

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const session = await getServerAuthSession(ctx);

  if (!session) {
    return {
      redirect: {
        destination: "/sign-in",
        permanent: false,
      },
    };
  }

  return {
    props: {
      session,
    },
  };
};

then in your pages, just add export { getServerSideProps } from "utils/gssr.ts" or something similar; you could even add other arguments to allow you to pass any sort of server-side function and return it as props. But this all assumes that you're using SSR across your app.

Yiannis•2y ago

Yeah that’s the problem. If you want to have protected routes on static generated pages then it looks like you can’t if you use next auth (says on their docs it only works for jwts)

thejessewinton•2y ago

Yeah, that's true.

thejessewinton•2y ago

For others that might come through the thread, this would seem like an easy, effective solution too, based off of this SO thread. https://stackoverflow.com/questions/70325619/how-to-create-hoc-for-auth-in-next-js Create a function called withAuth or something similar that looks like:

export const withAuth = async (gssp: GetServerSideProps) => {
  return async (ctx: GetServerSidePropsContext) => {
    const session = await getServerAuthSession(ctx);

    if (!session) {
      return {
        redirect: {
          destination: "/sign-in",
          permanent: false,
        },
      };
    }

    const gsspData = await gssp(ctx);

    return {
      props: {
        ...gsspData,
        session,
      },
    };
  };
};

export const withAuth = async (gssp: GetServerSideProps) => {
  return async (ctx: GetServerSidePropsContext) => {
    const session = await getServerAuthSession(ctx);

    if (!session) {
      return {
        redirect: {
          destination: "/sign-in",
          permanent: false,
        },
      };
    }

    const gsspData = await gssp(ctx);

    return {
      props: {
        ...gsspData,
        session,
      },
    };
  };
};

Then, to use it, just use it in your getServerSideProps functions across pages:

export const getServerSideProps = withAuth(context => {
    return { props: {} };
});

export const getServerSideProps = withAuth(context => {
    return { props: {} };
});

Stack Overflow

How to create HOC for auth in Next.js?

I want to create basic Next.js HOC for authentication. I searched but I didn't figure it out. I have an admin page in my Next.js app. I want to fetch from http://localhost:4000/user/me and that URL

Yatochka•2y ago

I'm using a db

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

I ran into the same issue. The way I had to settle solving this issue is convert all my /admin pages to SSR as I did want to keep db sessions.

Gaming

Programming

Next-Auth default middleware redirect to signin page even when logged in.