Next.js Middleware Authentication: Preserving URL Hash

Answered

Bakharwal dog posted this in #help-forum

Bakharwal dogOP

2025-03-01T15:47:23.076Z

I'm building a documentation site with Next.js that uses middleware for authentication. My setup works like this:

1. User visits my docs site (e.g., docs.myapp.com/guide#section-3)
2. Middleware checks authentication
3. If not authenticated, user is redirected to the main app on a different origin (e.g., myapp.com/login)
4. After successful authentication, the main app redirects back to the docs site with a token

The problem: When redirecting back to the docs site, the URL hash fragment (#section-3) is lost because hash fragments aren't sent to the server (browser behavior). As a result, users aren't automatically scrolled to the section they were trying to access.

I need a solution that works at the middleware level since I don't have access to client-side code during the redirect process. How can I preserve the hash fragment across this cross-origin authentication flow?

Technical details:
- Using Next.js App Router with middleware for authentication
- Authentication happens on a completely different origin
- Need to maintain the original hash fragment for proper scrolling after auth

Has anyone solved this issue or can suggest an approach that works with Next.js middleware and cross-origin redirects?

Answered by Bakharwal dog

The solution was to send an html response with a client side routing

  return new NextResponse(
    `<html>
      <script>
        window.location.href = '${url}' + encodeURIComponent(window.location.hash);
      </script>
    </html>`,
    { headers: { 'Content-Type': 'text/html' } }
  );

View full answer

7 Replies

Losti!

2025-03-01T19:42:57.128Z

Hey friend, i think i have a neet solution, redirect to the URL you want (after login) and set as searchParams the name of the section you want to send it to, then from the client page we will check the search params and get the name of the section replacing the character "?" with a "#" or you can try this solution with hash property to new URL and finally redirect with NextResponse.

Example:

export async function middleware(request: NextRequest) {
  const targetUrl = new URL('https://docs.myapp.com/hashing');
  targetUrl.hash = 'my-hash';
  console.log(targetUrl);
  return NextResponse.redirect(targetUrl);
}

Personally, i think both are valid. but i would be more in favor of the second one. Please try it and tell me if it works for you.

Losti!

2025-03-01T19:57:22.526Z

@Bakharwal dog I just tested it with a test project and it works now with the 15.2.0, please give it a try to see if it suits your requirements.

@Losti! Hey friend, i think i have a neet solution, redirect to the URL you want (after login) and set as searchParams the name of the section you want to send it to, then from the client page we will check the search params and get the name of the section replacing the character "?" with a "#" or you can try this solution with hash property to new URL and finally redirect with NextResponse. Example: ts export async function middleware(request: NextRequest) { const targetUrl = new URL('https://docs.myapp.com/hashing'); targetUrl.hash = 'my-hash'; console.log(targetUrl); return NextResponse.redirect(targetUrl); }

Bakharwal dogOP

2025-03-02T06:46:23.168Z

the hash is not available in the middleware @Losti!

thats the whole issue, its not available in the server

if the user would have stayed on the same app the browser would not omit it, but since we are authenticating in a different app, the browser removes the hash

Bakharwal dogOP

2025-03-02T06:52:22.626Z

The solution was to send an html response with a client side routing

  return new NextResponse(
    `<html>
      <script>
        window.location.href = '${url}' + encodeURIComponent(window.location.hash);
      </script>
    </html>`,
    { headers: { 'Content-Type': 'text/html' } }
  );

Answer