b2c forgotpassword userflow with SPA having '#' (hash) tag on return url

Question

I have an angular app which shows the "sign in" link along with "forgot password". When I click the "forgot password", the following screen shows up with custom page. The problem is when I click "cancel" button , it redirect back to "localhost:4200/" but the problem is it has hash tag after the domain name '#' along with error_description. Ideally it should be '?' to get the querystring. What setting am I doing incorrectly that there is always a hash '#' after domain name.
Example:

http://localhost:4200/#error=access_denied&error_description=AADB2C90091%3a+The+user+has+cancelled+entering+self-asserted+information.%0d%0aCorrelation+ID%3a+c2c881df-d7d1-4b9e-b645-9c6e030e064e%0d%0aTimestamp%3a+2020-02-20+16%3a21%3a33Z%0d%0a

Appreciate any help.

Answer 1

Hi Aguillmran-5332,

You need to set the "response_mode" querystring parameter value for your links to tell Azure B2C how you want it to return both successful authentications and also errors back to your application. The valid values are "query", "form_post" and "fragment" and dictate how Azure returns when the user cancels. It looks like you have it either set to "fragment" or not set at all and it is defaulting to fragment.

From some of the Microsoft documentation:

response_mode - optional - Specifies the method that should be used to send the resulting token back to your app. Defaults to query for just an access token, but fragment if the request includes an id_token.

OAuth2 Implicit Grant Flow