Auth Code Flow implementation

[a-r-d]

My understanding is that this project is using Implicit Grant (link), but microsoft has just released support of Auth Code For SPAs.

I was looking at the official roadmap for MSAL.js and they mentioned a TBD item of building some kind of react integration or components for this but there is no date on the horizon.

For the time being this library is by far the best option for integrating Azure AD Auth system with a React application.

Can a maintainer/contributer comment on if there is some plan to implement Auth Code Flow that mentioned above in this project?

It seems that many organizations are starting to phase out use of Implicit Grant oauth flows due to security concerns.

[AndrewCraswell]

Yes, absolutely. The goal was to do this in July, and the architecture discussions have already begun. The primary challenge is that MSAL has a new package which contains the new auth flow for browser environments. In addition to utilizing the new package, the library can have better support for hooks using context API, which should resolve a number of bugs that currently exist.

[ztrobinson777]

Is the timeline for this integration still looking like July?

I'm trying to provide my team with a timeline/direction for implementing Azure AD authentication within our applications and would very much like to use this library.

[GraemeF]

"July 6th, 2020 (Tentative)" for @azure/msal-browser v2.0.0, according to https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser#releases 🤞

[jrow2286]

Yes, absolutely. The goal was to do this in July, and the architecture discussions have already begun. The primary challenge is that MSAL has a new package which contains the new auth flow for browser environments. In addition to utilizing the new package, the library can have better support for hooks using context API, which should resolve a number of bugs that currently exist.

Any updates on this timeline @AndrewCraswell ?

[GraemeF]

^^ I've mentioned this issue in some of the other issues that seem to be caused by the use of implicit flow. I bet there are more!

[intnick]

Any updates? Since Chrome disabled 3rd party cookies by default a few weeks back this is quite a tough situation for most of the users, we are in a lot of trouble now :(

Please let us know if it makes sense to wait for the update a few more days (and show them ugly popups to turn on 3rd party cookies), or try to re-write everything using the msal-browser library directly, even though it might take a lot of time to rewrite our whole app to use it.

Please help @AndrewCraswell :)

[adomrockie]

Looks like Safari and other browsers are now blocking 3rd party cookies, making our product now unusable as majority cannot login. Any updates on this?

[GraemeF]

I tried replacing this library with code from a couple of examples from the MSAL repo but didn't get very far. Then I found this Graph API tutorial which was a much better fit for our existing app, got it working with popups and finally with redirection. Not a 5 minute job by any means, but maybe that's useful to others.

I would have loved to make a PR for react-aad-msal but had a look and didn't know where to start, plus there was talk of bigger architectural changes anyway.

[karol-majewski]

To anyone interested:

• This library exposes a React component using the PKCE flow
• Early next year, there should be an official react-msal library

[adomrockie]

I tried replacing this library with code from a couple of examples from the MSAL repo but didn't get very far. Then I found this Graph API tutorial which was a much better fit for our existing app, got it working with popups and finally with redirection. Not a 5 minute job by any means, but maybe that's useful to others.

I would have loved to make a PR for react-aad-msal but had a look and didn't know where to start, plus there was talk of bigger architectural changes anyway.

Can you share your solution, whiles we wait for an update for this?

[GraemeF]

It is not a drop in replacement and is quite specific to our application, that’s why I didn’t share it. If you can’t wait then I would look at the sample and try to apply it to your own application.

On Fri, 25 Sep 2020 at 10:37, adomrockie ***@***.***> wrote: I tried replacing this library with code from a couple of examples from the MSAL repo <https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples> but didn't get very far. Then I found this Graph API tutorial <https://docs.microsoft.com/en-us/graph/tutorials/react> which was a much better fit for our existing app, got it working with popups and finally with redirection. Not a 5 minute job by any means, but maybe that's useful to others. I would have loved to make a PR for react-aad-msal but had a look and didn't know where to start, plus there was talk of bigger architectural changes anyway. Can you share your solution, whiles we wait for an update for this? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#238 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATWSQALFPW7YRUQ4SWBI3SHRQGNANCNFSM4NLSTO7A> . --

-- Graeme Foster

[adomrockie]

For anybody struggling with this, it took me 2 days but finally got it to work.

To anyone interested:

• This library exposes a React component using the PKCE flow
• Early next year, there should be an official react-msal library

This library
This works for me.

[AndrewCraswell]

Hey folks,

Thanks for everyone's patience, and I apologize for the late replies. Since July a small group has been working to redesign the react-aad-msal library from ground-up to work with MSAL 2.0 using the @azure/msal-browser package. We had hoped to have an initial release in August, then roll out in a few production apps through the end of the month. However, with life, covid, and some developments in MSAL, these timelines had to undergo a lot of change to make sure things were tackled correctly.

In July members of the MSAL team reached out to let us know they were planning to build out an official React library soon, and wanted to take the opportunity of the hackathon to work together and develop an architecture. During this time we were able to test out @azure/msal-browser, and identified a number of API changes that everyone felt would unblock an official React wrapper. The more substantial of these architectural changes related to an event API whereby external libraries can subscribe to internal MSAL data and events in order for React to become aware of changes in internal state. I'm happy to hear that this work is underway at the moment, and the contract of what that API looks like is nearing the review stage.

In lieu of the changes to the underlying @azure/msal-browser, it didn't make much sense to release an update to react-aad-msal since the contracts weren't yet in place. The API changes will dramatically simplify how we build out a wrapper library, and at which point it should be pretty simple to develop the official msal-react library, and there isn't much of a need for react-aad-msal. From this standpoint, react-aad-msal is gearing up to be deprecated in the near future, and I will be working on some migration guides to get people moved over easily.

In the interim before the official react-msal is released, and now that the designs and contracts are nearly finished, I am hoping to get some time in the next few weekends to build a basic update to react-aad-msal that gets people shifted from msal to @azure/msal-browser. These changes would be substantial, although we would be targeting a very similar architecture to msal-react when it finally releases. After this point, the plan is to deprecate react-aad-msal and work to help folks move to the officially supported library.

[bsides]

Hi @AndrewCraswell , thanks for the update. For now, what I've been doing is using the Typescript edition of msal-browser 2.0 implementation in my app and going from there - it's not an easy task if I my add so any help I could give you guys, let me know.

EDIT: Also this example with React and Redux is pretty nice.

[ghost]

@AndrewCraswell any update on your efforts to "build a basic update to react-aad-msal that gets people shifted from msal to @azure/msal-browser"?