Next.js Middleware Authentication: Preserving URL Hash
Answered
Bakharwal dog posted this in #help-forum
Bakharwal dogOP
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.,
2. Middleware checks authentication
3. If not authenticated, user is redirected to the main app on a different origin (e.g.,
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 (
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?
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' } }
);7 Replies
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:
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.
@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.
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
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