5

I need some input in implementing MSAL library in Angular6+ applications for integrating with AZURE AD.

As i read through the microsoft docs, i came across two flows 'implicit grant flow' and 'auth code flow'. It is been recommended by microsoft team themselves that 'auth code flow' must be implemented as its secure as compared to 'implicit grant flow'.

Im working on a Angular6+ application, and I have to integrate it with AZURE AD. When i checked the MSAL libraries for angular i could only find 1 version "npm i @azure/msal-angular", which i assume implements 'implicit grant flow'. I have to implement 'auth code flow'.

Could anyone please help in this regard.

Sneha
  • 51
  • 1
  • 2

2 Answers2

5

There are 2 confusions here, one is about the security of flows, the other is about whether MSAL supports auth code (w/ PKCE).

  1. Auth Code Flow vs. Implicit Flow

You should not understand this as "auth code is secure and implicit flow is insecure". These are relative terms; that is, auth core is considered more secure than implicit flow. However, there are use cases where implicit flow is considered just as good (e.g. user session timeout is short). There is some debate on the internet about this.

  1. Using MSAL.js with Angular

The current MSAL.js 2.x (msal-browser) implements auth code (w/ PKCE) flow. There is no reason for you not to use it with your Angular project. There is also an MSAL-Angular wrapper library, which comes with some extra features and glue code, and that is the one that implements implicit flow (because it is based on MSAL.js 1.x aka msal-core). However, you don't have to use it just because you have an Angular project. Instead, you can create your own authentication service using MSAL.js 2.x directly.

derisen
  • 630
  • 3
  • 13
  • Do you know which part(.js file) contains PKCE infomation? I want to learn something. – Bigeyes Aug 22 '21 at 13:44
  • 1
    @Bigeyes PKCE generation is handled by the library under the hood. See this: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/src/crypto/PkceGenerator.ts – derisen Aug 23 '21 at 22:47
  • To get token by sending auth code through back channel, but Angular project is a pure client application(front channel). How it happens? Does Msal.js have a back end channel? – Bigeyes Jan 30 '22 at 23:30
  • I've built an angular app calling a web api (.Net core Framework 6.0) with Azure AD. Here are the github repos for both of the projects. https://github.com/fayeBabacar78/ng-client-app | https://github.com/fayeBabacar78/api-app-sample – faye.babacar78 Feb 15 '22 at 20:26
0

When I first posted this I believe the MSAL library did not support Authorization Code Flow (PKCE) - but that has now changed - see comments above and below

ALTERNATIVE OPTIONS?

Of course, OAuth is about standards - and Azure AD is standards based - so you can use any respected library for your tech stack.

As an example I've used the oidc-client library against both Azure AD and other providers

Gary Archer
  • 22,534
  • 2
  • 12
  • 24
  • PKCE is supported as per the accepted answer in @azure/msal-browser. Code is at https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser – PaulB Feb 03 '21 at 15:01
  • 1
    I updated my out of date answer - since I don't want to mislead people. – Gary Archer Feb 03 '21 at 19:12