Protected routes

palicz · 2025-01-20T20:31:05.546Z

Hello! I'd like to achieve a route for example `/admin` which should be only accessible for "admin" role users. If the user have "user" role, they should be redirected to the home page. Also I'd followed the docs, but I don't know how to make the `/sign-in` route inaccessible for those who are already signed in. Later I'd like more complex role based access control for routes. How to achieve this?

R

remakker•1/20/25, 10:01 PM

Nextjs supports all this functionality

P

paliczOP•1/20/25, 10:04 PM

I wanted to know how to do it.

D

daveycodez•1/20/25, 10:52 PM

There are 3 ways to do this, you can do it Client side with the useSession hook, through middleware, or through the route itself

D

daveycodez•1/20/25, 10:52 PM

What is your setup

B

Brokenwind•1/21/25, 1:01 AM

Here's my middleware:

import type { Session } from "better-auth/types";

import { betterFetch } from "@better-fetch/fetch";
import { NextResponse, type NextRequest } from "next/server";

// ---

const notAuthenticated = ["/login"];

export default async function authMiddleware(request: NextRequest) {
  const { data: session } = await betterFetch<Session>("/api/auth/get-session", {
    baseURL: request.nextUrl.origin,
    headers: {
      cookie: request.headers.get("cookie") || "",
    },
  });

  const isNotAuthenticatedRoute = notAuthenticated.includes(request.nextUrl.pathname);

  if (isNotAuthenticatedRoute && session) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  if (!session && !isNotAuthenticatedRoute) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|logo|robots.txt|403|404|500).*)"],
};

import type { Session } from "better-auth/types";

import { betterFetch } from "@better-fetch/fetch";
import { NextResponse, type NextRequest } from "next/server";

// ---

const notAuthenticated = ["/login"];

export default async function authMiddleware(request: NextRequest) {
  const { data: session } = await betterFetch<Session>("/api/auth/get-session", {
    baseURL: request.nextUrl.origin,
    headers: {
      cookie: request.headers.get("cookie") || "",
    },
  });

  const isNotAuthenticatedRoute = notAuthenticated.includes(request.nextUrl.pathname);

  if (isNotAuthenticatedRoute && session) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  if (!session && !isNotAuthenticatedRoute) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|logo|robots.txt|403|404|500).*)"],
};

import type { Session } from "better-auth/types";

import { betterFetch } from "@better-fetch/fetch";
import { NextResponse, type NextRequest } from "next/server";

// ---

const notAuthenticated = ["/login"];

export default async function authMiddleware(request: NextRequest) {
  const { data: session } = await betterFetch<Session>("/api/auth/get-session", {
    baseURL: request.nextUrl.origin,
    headers: {
      cookie: request.headers.get("cookie") || "",
    },
  });

  const isNotAuthenticatedRoute = notAuthenticated.includes(request.nextUrl.pathname);

  if (isNotAuthenticatedRoute && session) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  if (!session && !isNotAuthenticatedRoute) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|logo|robots.txt|403|404|500).*)"],
};

import type { Session } from "better-auth/types";

import { betterFetch } from "@better-fetch/fetch";
import { NextResponse, type NextRequest } from "next/server";

// ---

const notAuthenticated = ["/login"];

export default async function authMiddleware(request: NextRequest) {
  const { data: session } = await betterFetch<Session>("/api/auth/get-session", {
    baseURL: request.nextUrl.origin,
    headers: {
      cookie: request.headers.get("cookie") || "",
    },
  });

  const isNotAuthenticatedRoute = notAuthenticated.includes(request.nextUrl.pathname);

  if (isNotAuthenticatedRoute && session) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  if (!session && !isNotAuthenticatedRoute) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|logo|robots.txt|403|404|500).*)"],
};

This one will not let you go in the /login if you're already logged in. You can just extend that by adding in the notAuthenticated array if you want to disable sign ups or any other pages.

D

daveycodez•1/21/25, 1:17 AM

I'm wondering why the docs are recommending sending an entire fetch request in middleware when you already have the cookie

D

daveycodez•1/21/25, 1:37 AM

Yea so it looks like you need to use better-fetch in middleware to get the latest verified session data, however I made a helper function that checks the Cookie directly and verifies it without needing an extra request, so if you need extremely low latency middleware for some reason

   if (request.cookies.has("better-auth.session_data")) {
        const session = await verifySession(request.cookies.get("better-auth.session_data")!.value)
    }

   if (request.cookies.has("better-auth.session_data")) {
        const session = await verifySession(request.cookies.get("better-auth.session_data")!.value)
    }

   if (request.cookies.has("better-auth.session_data")) {
        const session = await verifySession(request.cookies.get("better-auth.session_data")!.value)
    }

   if (request.cookies.has("better-auth.session_data")) {
        const session = await verifySession(request.cookies.get("better-auth.session_data")!.value)
    }

export type Session = typeof auth.$Infer.Session

export const verifySession = async (sessionDataCookie?: string) => {
    const sessionDataPayload = sessionDataCookie
        ? safeJSONParse<{
            session: Session
            signature: string
            expiresAt: number
        }>(binary.decode(base64.decode(sessionDataCookie)))
        : null

    if (sessionDataPayload) {
        const isValid = await createHMAC("SHA-256", "base64urlnopad").verify(
            process.env.BETTER_AUTH_SECRET!,
            JSON.stringify(sessionDataPayload.session),
            sessionDataPayload.signature,
        )

        if (isValid) return sessionDataPayload

    }

    return null
}

function safeJSONParse<T>(data: string): T | null {
    try {
        return JSON.parse(data)
    } catch {
        return null
    }
}

export type Session = typeof auth.$Infer.Session

export const verifySession = async (sessionDataCookie?: string) => {
    const sessionDataPayload = sessionDataCookie
        ? safeJSONParse<{
            session: Session
            signature: string
            expiresAt: number
        }>(binary.decode(base64.decode(sessionDataCookie)))
        : null

    if (sessionDataPayload) {
        const isValid = await createHMAC("SHA-256", "base64urlnopad").verify(
            process.env.BETTER_AUTH_SECRET!,
            JSON.stringify(sessionDataPayload.session),
            sessionDataPayload.signature,
        )

        if (isValid) return sessionDataPayload

    }

    return null
}

function safeJSONParse<T>(data: string): T | null {
    try {
        return JSON.parse(data)
    } catch {
        return null
    }
}

export type Session = typeof auth.$Infer.Session

export const verifySession = async (sessionDataCookie?: string) => {
    const sessionDataPayload = sessionDataCookie
        ? safeJSONParse<{
            session: Session
            signature: string
            expiresAt: number
        }>(binary.decode(base64.decode(sessionDataCookie)))
        : null

    if (sessionDataPayload) {
        const isValid = await createHMAC("SHA-256", "base64urlnopad").verify(
            process.env.BETTER_AUTH_SECRET!,
            JSON.stringify(sessionDataPayload.session),
            sessionDataPayload.signature,
        )

        if (isValid) return sessionDataPayload

    }

    return null
}

function safeJSONParse<T>(data: string): T | null {
    try {
        return JSON.parse(data)
    } catch {
        return null
    }
}

export type Session = typeof auth.$Infer.Session

export const verifySession = async (sessionDataCookie?: string) => {
    const sessionDataPayload = sessionDataCookie
        ? safeJSONParse<{
            session: Session
            signature: string
            expiresAt: number
        }>(binary.decode(base64.decode(sessionDataCookie)))
        : null

    if (sessionDataPayload) {
        const isValid = await createHMAC("SHA-256", "base64urlnopad").verify(
            process.env.BETTER_AUTH_SECRET!,
            JSON.stringify(sessionDataPayload.session),
            sessionDataPayload.signature,
        )

        if (isValid) return sessionDataPayload

    }

    return null
}

function safeJSONParse<T>(data: string): T | null {
    try {
        return JSON.parse(data)
    } catch {
        return null
    }
}

D

daveycodez•1/21/25, 1:46 AM

middleware.ts

const protectedRoutes = ["/books"]

export async function middleware(request: NextRequest) {
    if (protectedRoutes.includes(request.nextUrl.pathname)) {
        let session = (await verifySession(request.cookies.get("better-auth.session_data")?.value))?.session

        if (!session && request.cookies.has("better-auth.session_token")) {
            const { data } = await betterFetch<Session>(
                "/api/auth/get-session",
                {
                    baseURL: request.nextUrl.origin,
                    headers: {
                        //get the cookie from the request
                        cookie: request.headers.get("cookie") || "",
                    },
                },
            )

            if (data) {
                session = data
            }
        }

        if (!session) {
            return NextResponse.redirect(new URL("/", request.url))
        }
    }

    return NextResponse.next();
}

const protectedRoutes = ["/books"]

export async function middleware(request: NextRequest) {
    if (protectedRoutes.includes(request.nextUrl.pathname)) {
        let session = (await verifySession(request.cookies.get("better-auth.session_data")?.value))?.session

        if (!session && request.cookies.has("better-auth.session_token")) {
            const { data } = await betterFetch<Session>(
                "/api/auth/get-session",
                {
                    baseURL: request.nextUrl.origin,
                    headers: {
                        //get the cookie from the request
                        cookie: request.headers.get("cookie") || "",
                    },
                },
            )

            if (data) {
                session = data
            }
        }

        if (!session) {
            return NextResponse.redirect(new URL("/", request.url))
        }
    }

    return NextResponse.next();
}

const protectedRoutes = ["/books"]

export async function middleware(request: NextRequest) {
    if (protectedRoutes.includes(request.nextUrl.pathname)) {
        let session = (await verifySession(request.cookies.get("better-auth.session_data")?.value))?.session

        if (!session && request.cookies.has("better-auth.session_token")) {
            const { data } = await betterFetch<Session>(
                "/api/auth/get-session",
                {
                    baseURL: request.nextUrl.origin,
                    headers: {
                        //get the cookie from the request
                        cookie: request.headers.get("cookie") || "",
                    },
                },
            )

            if (data) {
                session = data
            }
        }

        if (!session) {
            return NextResponse.redirect(new URL("/", request.url))
        }
    }

    return NextResponse.next();
}

const protectedRoutes = ["/books"]

export async function middleware(request: NextRequest) {
    if (protectedRoutes.includes(request.nextUrl.pathname)) {
        let session = (await verifySession(request.cookies.get("better-auth.session_data")?.value))?.session

        if (!session && request.cookies.has("better-auth.session_token")) {
            const { data } = await betterFetch<Session>(
                "/api/auth/get-session",
                {
                    baseURL: request.nextUrl.origin,
                    headers: {
                        //get the cookie from the request
                        cookie: request.headers.get("cookie") || "",
                    },
                },
            )

            if (data) {
                session = data
            }
        }

        if (!session) {
            return NextResponse.redirect(new URL("/", request.url))
        }
    }

    return NextResponse.next();
}

D

daveycodez•1/21/25, 1:47 AM

This won't respect if you get "logged out" from another computer like during a reset password flow or something though, just a low latency function if you need rapid verification or less HTTP requests / queries in general and don't care too much about log out others feature

D

daveycodez•1/21/25, 2:39 AM

It will first try to verify the session if session_data cookie is present, and if that cookie is not present or it fails (expired session) then it will fallback to send a request to get-session if the session_token cookie is present

D

daveycodez•1/21/25, 2:53 AM

If you are using a static export or need to do it client side then ..

export default function ProtectedPage() {
    const router = useRouter()
    const { data: session, isPending } = useSession()

    useEffect(() => {
        if (!session && !isPending) router.push("/")
    }, [session, isPending, router])
    
    if (!session) return <>Loading...</>
}

export default function ProtectedPage() {
    const router = useRouter()
    const { data: session, isPending } = useSession()

    useEffect(() => {
        if (!session && !isPending) router.push("/")
    }, [session, isPending, router])
    
    if (!session) return <>Loading...</>
}

export default function ProtectedPage() {
    const router = useRouter()
    const { data: session, isPending } = useSession()

    useEffect(() => {
        if (!session && !isPending) router.push("/")
    }, [session, isPending, router])
    
    if (!session) return <>Loading...</>
}

export default function ProtectedPage() {
    const router = useRouter()
    const { data: session, isPending } = useSession()

    useEffect(() => {
        if (!session && !isPending) router.push("/")
    }, [session, isPending, router])
    
    if (!session) return <>Loading...</>
}

P

paliczOP•1/21/25, 7:25 AM

Thanks! I will try out your approach for sure

P

paliczOP•1/21/25, 4:59 PM

@daveycodez I actually just realized, that I don't understand your explaination

BBrokenwind Here's my middleware: ``` import type { Session } from "better-auth/types"; im...

P

paliczOP•1/21/25, 4:59 PM

This is your middleware.ts

Ddaveycodez middleware.ts ```ts const protectedRoutes = ["/books"] export async function m...

P

paliczOP•1/21/25, 5:00 PM

Or this one can also be the middleware.ts

Ddaveycodez Yea so it looks like you need to use better-fetch in middleware to get the lates...

P

paliczOP•1/21/25, 5:01 PM

What's this?

P

paliczOP•1/21/25, 5:13 PM

Also I don't really know how to create an adminroute from this. I mean I tried, but I got errors

D

daveycodez•1/21/25, 7:10 PM

The difference with my solution is that it uses cookies first before sending the fetch request

D

daveycodez•1/21/25, 7:10 PM

It's not good practice to use HTTP requests in Next.js middleware, it should be optimistic routing

Ddaveycodez This won't respect if you get "logged out" from another computer like during a r...

P

paliczOP•1/21/25, 7:54 PM

Okay, I just realized what you were talking about here

P

paliczOP•1/21/25, 7:54 PM

I had problem with this:

P

paliczOP•1/21/25, 7:54 PM

P

paliczOP•1/21/25, 7:54 PM

The commented part

P

paliczOP•1/21/25, 7:54 PM

It complitely ruined the terminate session-like stuff

D

daveycodez•1/21/25, 7:55 PM

That enforces the session to be alive for 5 minutes even if it gets logged out elsewhere

P

paliczOP•1/21/25, 7:55 PM

import { betterFetch } from '@better-fetch/fetch';
import { type NextRequest, NextResponse } from 'next/server';

import type { auth } from '@/lib/auth';

// Define Session type based on auth module's session type
type Session = typeof auth.$Infer.Session;

/**
 * Middleware to protect routes by checking if user is authenticated
 * @param request - The incoming Next.js request object
 * @returns NextResponse with either redirect or next()
 */
export default async function authMiddleware(request: NextRequest) {
  // Fetch the current session by making API call to auth endpoint
  const { data: session } = await betterFetch<Session>(
    '/api/auth/get-session',
    {
      baseURL: request.nextUrl.origin,
      headers: {
        // Get the cookie from the request headers
        cookie: request.headers.get('cookie') || '',
      },
    },
  );

  // If no session exists, redirect to sign-in page
  const isSignInRoute = request.nextUrl.pathname === '/sign-in';
  if (!session && !isSignInRoute) {
    return NextResponse.redirect(new URL('/sign-in', request.url));
  }

  if (session && isSignInRoute) {
    // Redirect signed-in users attempting to access sign-in page
    return NextResponse.redirect(new URL('/', request.url));
  }
  // Check if route requires admin access
  const isAdminRoute = request.nextUrl.pathname.startsWith('/admin');
  if (isAdminRoute && session?.user.role !== 'admin') {
    // Redirect non-admin users attempting to access admin routes
    return NextResponse.redirect(new URL('/', request.url));
  }

  // Otherwise allow request to continue
  return NextResponse.next();
}

// Configure which routes this middleware should run on
export const config = {
  matcher: ['/dashboard', '/admin/:path*', '/sign-in'],
};

import { betterFetch } from '@better-fetch/fetch';
import { type NextRequest, NextResponse } from 'next/server';

import type { auth } from '@/lib/auth';

// Define Session type based on auth module's session type
type Session = typeof auth.$Infer.Session;

/**
 * Middleware to protect routes by checking if user is authenticated
 * @param request - The incoming Next.js request object
 * @returns NextResponse with either redirect or next()
 */
export default async function authMiddleware(request: NextRequest) {
  // Fetch the current session by making API call to auth endpoint
  const { data: session } = await betterFetch<Session>(
    '/api/auth/get-session',
    {
      baseURL: request.nextUrl.origin,
      headers: {
        // Get the cookie from the request headers
        cookie: request.headers.get('cookie') || '',
      },
    },
  );

  // If no session exists, redirect to sign-in page
  const isSignInRoute = request.nextUrl.pathname === '/sign-in';
  if (!session && !isSignInRoute) {
    return NextResponse.redirect(new URL('/sign-in', request.url));
  }

  if (session && isSignInRoute) {
    // Redirect signed-in users attempting to access sign-in page
    return NextResponse.redirect(new URL('/', request.url));
  }
  // Check if route requires admin access
  const isAdminRoute = request.nextUrl.pathname.startsWith('/admin');
  if (isAdminRoute && session?.user.role !== 'admin') {
    // Redirect non-admin users attempting to access admin routes
    return NextResponse.redirect(new URL('/', request.url));
  }

  // Otherwise allow request to continue
  return NextResponse.next();
}

// Configure which routes this middleware should run on
export const config = {
  matcher: ['/dashboard', '/admin/:path*', '/sign-in'],
};

import { betterFetch } from '@better-fetch/fetch';
import { type NextRequest, NextResponse } from 'next/server';

import type { auth } from '@/lib/auth';

// Define Session type based on auth module's session type
type Session = typeof auth.$Infer.Session;

/**
 * Middleware to protect routes by checking if user is authenticated
 * @param request - The incoming Next.js request object
 * @returns NextResponse with either redirect or next()
 */
export default async function authMiddleware(request: NextRequest) {
  // Fetch the current session by making API call to auth endpoint
  const { data: session } = await betterFetch<Session>(
    '/api/auth/get-session',
    {
      baseURL: request.nextUrl.origin,
      headers: {
        // Get the cookie from the request headers
        cookie: request.headers.get('cookie') || '',
      },
    },
  );

  // If no session exists, redirect to sign-in page
  const isSignInRoute = request.nextUrl.pathname === '/sign-in';
  if (!session && !isSignInRoute) {
    return NextResponse.redirect(new URL('/sign-in', request.url));
  }

  if (session && isSignInRoute) {
    // Redirect signed-in users attempting to access sign-in page
    return NextResponse.redirect(new URL('/', request.url));
  }
  // Check if route requires admin access
  const isAdminRoute = request.nextUrl.pathname.startsWith('/admin');
  if (isAdminRoute && session?.user.role !== 'admin') {
    // Redirect non-admin users attempting to access admin routes
    return NextResponse.redirect(new URL('/', request.url));
  }

  // Otherwise allow request to continue
  return NextResponse.next();
}

// Configure which routes this middleware should run on
export const config = {
  matcher: ['/dashboard', '/admin/:path*', '/sign-in'],
};

import { betterFetch } from '@better-fetch/fetch';
import { type NextRequest, NextResponse } from 'next/server';

import type { auth } from '@/lib/auth';

// Define Session type based on auth module's session type
type Session = typeof auth.$Infer.Session;

/**
 * Middleware to protect routes by checking if user is authenticated
 * @param request - The incoming Next.js request object
 * @returns NextResponse with either redirect or next()
 */
export default async function authMiddleware(request: NextRequest) {
  // Fetch the current session by making API call to auth endpoint
  const { data: session } = await betterFetch<Session>(
    '/api/auth/get-session',
    {
      baseURL: request.nextUrl.origin,
      headers: {
        // Get the cookie from the request headers
        cookie: request.headers.get('cookie') || '',
      },
    },
  );

  // If no session exists, redirect to sign-in page
  const isSignInRoute = request.nextUrl.pathname === '/sign-in';
  if (!session && !isSignInRoute) {
    return NextResponse.redirect(new URL('/sign-in', request.url));
  }

  if (session && isSignInRoute) {
    // Redirect signed-in users attempting to access sign-in page
    return NextResponse.redirect(new URL('/', request.url));
  }
  // Check if route requires admin access
  const isAdminRoute = request.nextUrl.pathname.startsWith('/admin');
  if (isAdminRoute && session?.user.role !== 'admin') {
    // Redirect non-admin users attempting to access admin routes
    return NextResponse.redirect(new URL('/', request.url));
  }

  // Otherwise allow request to continue
  return NextResponse.next();
}

// Configure which routes this middleware should run on
export const config = {
  matcher: ['/dashboard', '/admin/:path*', '/sign-in'],
};

P

paliczOP•1/21/25, 7:55 PM

This is my middleware.ts for now. It gets the job done, but I don't know if I did anything that's not supposed to be

D

daveycodez•1/21/25, 7:56 PM

If the matcher is just those 3 paths its probably fine

D

daveycodez•1/21/25, 7:57 PM

Just need to be careful if you end up using middleware for everything (internationalization or something)

P

paliczOP•1/21/25, 7:57 PM

Well I'll have the dashboard which is the user's settings page.
I'll have the admin routes for admin users, and the sign in page is no longer accessible if the user is logged in.

P

paliczOP•1/21/25, 7:57 PM

I think this is all for now

D

daveycodez•1/21/25, 7:58 PM

Yea as long as its not sending out a fetch request on all of your routes it can be ok

P

paliczOP•1/21/25, 7:58 PM

Later I will have buttons that will have an action, but won't work without sessions. I think I don't need the middleware for that.

P

paliczOP•1/21/25, 7:58 PM

I'm doing my Uni thesis, and that's what I need it for, but I need my app to be insanely fast (at least the teacher should think that it is)

P

paliczOP•1/21/25, 7:59 PM

So that's why I wanted to know if there's a better way of implementing this

P

paliczOP•1/21/25, 7:59 PM

Because performance is what I need mostly

D

daveycodez•1/21/25, 7:59 PM

If you want faster performance for those 3 pages specifically you can use the cookie

D

daveycodez•1/21/25, 7:59 PM

"optimistic" middleware which would just check if the cookie exists at all, then the routes themselves will handle getting the current user

D

daveycodez•1/21/25, 8:00 PM

request.cookies.has("better-auth.session_data")

P

paliczOP•1/21/25, 8:00 PM

I don't find performance issues just yet but I want to implement metrics somehow to actually see if the performance of the page.

P

paliczOP•1/21/25, 8:00 PM

If I find issues with performance for these routes, I will implement what you adviced

D

daveycodez•1/21/25, 8:00 PM

Well right now if you refresh an admin page or navigate an admin page you will have this...

fetch -> /admin -> fetch ->/api/get-session-> Query database

D

daveycodez•1/21/25, 8:01 PM

If you do the cookie method it will just be
fetch -> /admin -> check cookie

P

paliczOP•1/21/25, 8:01 PM

But does the cookie method have any disadvantages?

D

daveycodez•1/21/25, 8:02 PM

Well middleware is mainly meant to be used for "optimistic" routing and not protection itself

D

daveycodez•1/21/25, 8:02 PM

the protection should live on the route itself, where you'll get the session on the route and handle it over there

D

daveycodez•1/21/25, 8:02 PM

the middleware just optimistically decides whether the user is logged in or not

D

daveycodez•1/21/25, 8:02 PM

the cookie only gets set if they are logged in, but it could be "expired"

D

daveycodez•1/21/25, 8:03 PM

https://www.youtube.com/watch?v=N_sUsq_y10U

This video covers how they handle authentication best practices if you were to "roll your own" auth, but shows examples of how routes protect themselves and middleware is used for optimistic routing

D

daveycodez•1/21/25, 8:04 PM

This is from the Next.js head of developer relations

Similar Threads

Similar Threads

Similar Threads