Understanding the id_token flow from magic link

Question

I am having an SPA application with .NET core backend that uses AD B2C. The SPA angular frontend uses angular-oauth2-oidc to create the loginflow. Sample :

   this.authConfig = {
      redirectUri: this.envService.redirectUri,
      responseType: this.envService.responseType,
      issuer: this.envService.issuer,
:
      clientId: this.envService.clientId,
      scope: this.envService.scope,
      skipIssuerCheck: true,
      clearHashAfterLogin: true,
      oidc: true,
      logoutUrl: this.envService.logoutUrl,
      showDebugInformation: true,
    };
:     this.oauthService.configure(this.authConfig);
      this.oauthService.tokenValidationHandler = new NullValidationHandler();
      const helper = new JwtHelperService();
      let url = this.DiscoveryDocumentConfig.signInURL;
      :
      :
      this.oauthService.loadDiscoveryDocument(url).then(() => {
            this.oauthService.tryLoginImplicitFlow().then(() => {
                if (!this.oauthService.hasValidAccessToken()) {
                       this.oauthService.initImplicitFlow();

Now I am signing in using a magic link to signin to the application, the policy for the magic link extracts the the claims and issues an id_token (Sample - https://github.com/azure-ad-b2c/samples/tree/master/policies/sign-in-with-magic-link). In this case do I need to create a session myself or does AD B2C handle the same?

From an id_token accessing the application is it supported via msal or angular-oauth2-oidc ?Any pointers would be helpful.

Thanks

score 1 · Accepted Answer · answered Jan 17 '23 at 08:27

I think it is worth to clarify a bit. First of all, even when you use magic links, Azure AD B2C will handle the user's session exactly in the same way as you would authenticate using username and password. In this scenario you are passing id_token_hint to the Azure AD B2C (together with the state parameter), Azure AD B2C validates the token, extract claims and returns ID Token dedicated for you application. User session is created on the AD B2C side.

I used MSAL.js with Angular (which I strongly recommend), and it handles session automatically but also you have the possibility to configure it. This is the fragment from the official documentation for passing id_token_hint:

https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-spa-app-options#pass-an-id-token-hint

There is also important fact:

Azure Active Directory (Azure AD) enables SSO by setting a session cookie when a user authenticates for the first time. MSAL.js also caches the ID tokens and access tokens of the user in the browser storage per application domain. These two mechanisms (i.e. Azure AD session cookie and MSAL cache) are independent of each other, but works together to provide SSO behavior:

https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-js-sso

In this case msal.js use browser storage (session storage or local storage) to store tokens. Additionally, there is a cookie dropped by Azure AD B2C to keep the information about the user's session. This is why even if you have no tokens in the browser storage and you open login page, Azure AD B2C will sign you in automatically without asking for the credentials (of course under condition that the session is still alive). I hope this helps a bit.

Thank you appreciate your response. As a coincidence I just happened to be reviewing the git - https://github.com/Daniel-Krzyczkowski/Modern-Identity-Developer/tree/main/solutions/azure-ad-b2c-magic-links (Fan Girl moment!!) . So if I understood it correct what I am missing is I need to register a new path for the magic link (as of now I am testing using an external application directly calling the AD B2C policy and generating the id_token and that might be the reason my Web application is failing to create a session and going back to the login //missing state) . — user14013917, Jan 18 '23 at 08:36
After that I need to register my new route to my web application (since I am using a signup/signin flow for normal login) and then my application would have a session from AD B2C. — user14013917, Jan 18 '23 at 08:38
Great, thank you for the update, exactly, you need to have a separate path registered to handle id_token_hint. Then your app should call the Azure AD B2C (with generated state parameter) and AD B2C should issue ID Token to your application. — Daniel Krzyczkowski, Jan 18 '23 at 09:15
I was able to access the application after adding a magic_link_policy route and adding customQueryParams (id_token_hint) in angular-oauth2-oidc AuthConfig. — user14013917, Jan 19 '23 at 09:15

Understanding the id_token flow from magic link

1 Answers1