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
Yatochka2y ago
Same thing happens with that code. Session is just null.
Yatochka
Yatochka2y ago
(Now it redirect to / page)
Yiannis
Yiannis2y 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
Yiannis2y ago
Yiannis
Yiannis2y ago
on the matcher you just add the pages that you want this to run on
thejessewinton
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
Yiannis2y 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
Yiannis2y ago
which looks a lot better
thejessewinton
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
Yiannis2y 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
Yeah, that's true.
thejessewinton
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
Yatochka2y ago
I'm using a db
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Xaohs
Xaohs2y 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.
Want results from more Discord servers?
Add your server