Retrieving query string parameter in b2c login

Question

we have a smart link in our application which allows the user to directly land on a specific page with the data filtered once they login.

Basic login- https://www.testsite.com

Smart link-https://www.testsite.com?smartlink=guid

If users login using basic link they will be redirected to the dashboard and if they use the smart link they will be initially taken to the login page and once they login successfully they will be redirected to a specific page with the data filtered based on the guid.

this flow is working fine in the current system since we are authenticating against our company AD directly from the app. But now we are migrating the login flow to adb2c and we are unable to pass the SmartLink as a query string parameter in url. Once we use the smart link it redirects to the b2c login page but upon login we are unable to retrieve or view the query string parameter. it is getting lost during the initial redirection from application to b2c. how do we add or pass a parameter in query string in b2c ? we are using angular and msal.

Answer 1

Hello, you can pass the smartlink to an Azure AD B2C user journey as:

1. The state param so that you can read it back once then it returns as part of the authentication response. For more information take a look to Pass custom state in authentication requests using MSAL.js.
2. Custom policies only: any custom query param that can be read using OAuth2 key-value parameters and later output as a custom claim.

Let us know if you need additional assistance. If the answer was helpful, please accept it so that others can find a solution.

Answer 2

To pass a parameter in the query string in Azure AD B2C, you can include it as a state parameter in the authentication request. The state parameter is a URL-encoded string that is included in the authentication request, passed to the identity provider, and returned back to the application unchanged.

Here's an example of how you can add the smart link to the state parameter in the authentication request using MSAL for Angular:

javascriptCopy code
// Define the smart link
const smartLink = 'guid';

// Create the state parameter and encode it
const state = encodeURIComponent(`smartlink=${smartLink}`);

// Pass the state parameter to the authentication request
this.authService.loginRedirect({ state: state });

After the user has successfully signed in, you can retrieve the smart link from the state parameter in the response:

kotlinCopy code
const state = this.authService.getResponseState();
const smartLink = state && state.smartlink;

You can then use the smart link to filter the data on the specific page.