I'm having trouble getting a Magic Link to work in ADB2C.

I have a React web application using the MSAL library authenticating against Azure ADB2C with custom policies. The default sign in policy is B2C_1A_signup_signin.

I'm generating a magic link URL in nodejs using the jsonwebtoken library. I'm using a secret which has been also configured in ADB2C. The secret value follows the necessary security requirements and the token contains the required fields i.e. "iss", "aud", "nbf" and "email".

The magic link is made up of: https://{tenant}.b2clogin/{tenant}.onmicrosoft/B2C_1A_magic_link/oauth2/v2.0/authorize?redirectUri={redirectUri}&clientId={clientId}&response_mode=fragment&response_type=id_token&scope=openid profile&id_token_hint={token}

In the custom policy, this is validated via the symmetric key validation profile:

I've created a new user journey for Magic Link login called B2C_1A_magic_link using this technical profile. This gets me to my React app with the #id_token appended to the URL. I can put this into jwt.ms and I get the token I'm expecting. However the React app bounces me back to the sign in page.

The normal login is configured to use Authorization Code flow, but I'm pretty sure the magic link is using implicit flow. I tried using "code" instead of "id_token" but went down a rabbit hole trying to work out how to get the code_verifier / code_challenge to work.

Is there a way I can handle the id_token in my React app (MSAL) to authenticate the user without redirecting them back to the login page?

I've tried msalInstance.handleRedirectPromise but it gives me no response back.

Any help would be greatly appreciated.

Thanks

I'm having trouble getting a Magic Link to work in ADB2C.

I have a React web application using the MSAL library authenticating against Azure ADB2C with custom policies. The default sign in policy is B2C_1A_signup_signin.

I'm generating a magic link URL in nodejs using the jsonwebtoken library. I'm using a secret which has been also configured in ADB2C. The secret value follows the necessary security requirements and the token contains the required fields i.e. "iss", "aud", "nbf" and "email".

The magic link is made up of: https://{tenant}.b2clogin/{tenant}.onmicrosoft/B2C_1A_magic_link/oauth2/v2.0/authorize?redirectUri={redirectUri}&clientId={clientId}&response_mode=fragment&response_type=id_token&scope=openid profile&id_token_hint={token}

In the custom policy, this is validated via the symmetric key validation profile: https://learn.microsoft/en-us/azure/active-directory-b2c/id-token-hint#step-3-add-the-id-token-hint-technical-profile

I've created a new user journey for Magic Link login called B2C_1A_magic_link using this technical profile. This gets me to my React app with the #id_token appended to the URL. I can put this into jwt.ms and I get the token I'm expecting. However the React app bounces me back to the sign in page.

The normal login is configured to use Authorization Code flow, but I'm pretty sure the magic link is using implicit flow. I tried using "code" instead of "id_token" but went down a rabbit hole trying to work out how to get the code_verifier / code_challenge to work.

Is there a way I can handle the id_token in my React app (MSAL) to authenticate the user without redirecting them back to the login page?

I've tried msalInstance.handleRedirectPromise but it gives me no response back.

Any help would be greatly appreciated.

Thanks

• azure-active-directory
• azure-ad-b2c
• azure-ad-msal
• azure-ad-b2c-custom-policy
• msal.js

• To handle the magic link in your React app using MSAL, ensure your redirectUri matches the one configured in Azure AD B2C and use msalInstance.handleRedirectPromise() to parse the id_token from the URL fragment after the redirect. If the issue persists, double-check your custom policy and make sure the magic link flow is correctly set up to return the id_token. – Rukmini Commented Mar 18 at 8:53
• Thanks for your reply, I've tried using handleRedirectPromise but I get no response. The id_token is in the hash and I can view it using jwt.ms. I've also tried msalInstance.ssoSilent passing the token as the loginHint but I get an error saying user interaction is required. The redirectUri is all correct as well. Having no luck so far. – bkingsley Commented Mar 18 at 13:42

1 Answer 1

I got this working using Authentication Code Flow with PKCE by:

• Reading the code hash from the URL

• Calling msalInstance.acquireTokenByCode with

  • { code, authority, scopes, codeVerifier }