How to preserve URL fragments (hash) during auth (solution not working)

Question

How to preserve URL fragments (hash) during auth (solution not working)

Thomas Dommett 0 Microsoft Employee

There is documentation supporting that this is a known limitation and a solution is provided, however when I applied it, it doesn't have any effect, and I don't know how to access any kind of logging to determine why, or if there's any gotcha's with overriding config elsewhere?

Authentication on the web app setup to use Microsoft and redirect (require auth).

Adding the app setting WEBSITE_AUTH_PRESERVE_URL_FRAGMENT set to true (Environment variables > App Settings)

I followed the instructions on the learning page - https://learn.microsoft.com/en-us/azure/app-service/configure-authentication-customize-sign-in-out#preserve-url-fragments

Siva Nair 1,320 Reputation points Microsoft External Staff

2025-04-10T06:15:04.73+00:00

Hi Thomas Dommett,

Preserving URL fragments (the portion after # in a URL) during authentication redirects is a known challenge, particularly with OAuth-based flows like the one used by Azure App Service Authentication.

Browsers do not send URL fragments to the server during HTTP requests, including redirects. So, when your app initiates a sign-in redirect, any fragment like #some-fragment is lost unless you specifically handle it on the client side before the redirect occurs. Even though Azure App Service provides a setting WEBSITE_AUTH_PRESERVE_URL_FRAGMENT = true to help with this, it relies on client-side logic (JavaScript) to store and restore the fragment and doesn't always work as expected out of the box.

Azure App Service can only preserve the fragment if a small JavaScript snippet runs on the client side before redirection. If your app immediately redirects without giving the script a chance to run, the fragment is lost.

If you just added WEBSITE_AUTH_PRESERVE_URL_FRAGMENT, make sure the app has restarted so the setting takes effect.

If you're using custom JavaScript routing (e.g., React Router, Angular), make sure fragment management is handled correctly there too.

If you have any further assistant, do let me know.
Thomas Dommett 0 Reputation points Microsoft Employee

2025-04-10T18:42:58.2+00:00

As I understand it, the point of that setting is to execute some javascript code to perform this action automatically as part of easy auth. When the app service is set to require authentication, there is no opportunity to run custom javascript snippet before the redirect?

(We have the code implementation which is tested and working outside of azure, or with allow unauthenticated requests, but because the app service is set to require authentication it redirects before the code is executed)

If we handle it manually in code, there would be no need for that app setting.
Siva Nair 1,320 Reputation points Microsoft External Staff

2025-04-14T01:28:02.8366667+00:00

Hi Thomas Dommett,

Reaching you out in private chat , please do check. Thanks

Your answer

Siva Nair 1,320 Reputation points Microsoft External Staff

2025-04-10T06:15:04.73+00:00

Hi Thomas Dommett,

Preserving URL fragments (the portion after # in a URL) during authentication redirects is a known challenge, particularly with OAuth-based flows like the one used by Azure App Service Authentication.

Browsers do not send URL fragments to the server during HTTP requests, including redirects. So, when your app initiates a sign-in redirect, any fragment like #some-fragment is lost unless you specifically handle it on the client side before the redirect occurs. Even though Azure App Service provides a setting WEBSITE_AUTH_PRESERVE_URL_FRAGMENT = true to help with this, it relies on client-side logic (JavaScript) to store and restore the fragment and doesn't always work as expected out of the box.

Azure App Service can only preserve the fragment if a small JavaScript snippet runs on the client side before redirection. If your app immediately redirects without giving the script a chance to run, the fragment is lost.

If you just added WEBSITE_AUTH_PRESERVE_URL_FRAGMENT, make sure the app has restarted so the setting takes effect.

If you're using custom JavaScript routing (e.g., React Router, Angular), make sure fragment management is handled correctly there too.

If you have any further assistant, do let me know.
Thomas Dommett 0 Reputation points Microsoft Employee

2025-04-10T18:42:58.2+00:00

As I understand it, the point of that setting is to execute some javascript code to perform this action automatically as part of easy auth. When the app service is set to require authentication, there is no opportunity to run custom javascript snippet before the redirect?

(We have the code implementation which is tested and working outside of azure, or with allow unauthenticated requests, but because the app service is set to require authentication it redirects before the code is executed)

If we handle it manually in code, there would be no need for that app setting.
Siva Nair 1,320 Reputation points Microsoft External Staff

2025-04-14T01:28:02.8366667+00:00

Hi Thomas Dommett,

Reaching you out in private chat , please do check. Thanks

Share via

How to preserve URL fragments (hash) during auth (solution not working)

Your answer