How to define the response_type to code to implement the OAuth Code Flow?

[rfontoura]

AFAIK, this component uses MSAL 1.x, which does not provide a way to implement the Authorization Code Flow.

I configured my Microsoft App registry not choosing either of the implicit grants: My intention is to use the Microsoft button only to let the user login and grant authorization to my app, but returning only the code necessary to do the rest of the OAuth token retrieval in the backend.

Is there a way to do this using this component? Or I would need to choose another component for that? Which one do you recommend? Thanks.

[devtoro]

Any updates on this? I am also having the same issue

[fjuriolli]

I also need this. Any news?

[alexandrtovmach]

Hey, thanks for asking! As you mentioned, this component using msal under the hood, which implements the OAuth 2.0 Implicit Grant Flow. So you can't get code to use it anywhere except current session.

This component created for SPA, and I think that's for mixed approaches better to use your custom implementation.

"If you are planning an SPA architecture, have no backend components or intend to invoke a web API via JavaScript, use of the implicit flow for token acquisition is recommended."

read docs

Probably I can take a look on it in a future, and try to handle both (SPA and custom), but I'm pretty sure that's not Best Practice and will be some kind of Frankenstein. Add :+1: for this comment if you see this feature valuable, or just propose your solution in PR.

[rfontoura]

Hey, @alexandrtovmach , thanks for answering.

Just for you or anyone who is interesting in getting the authorization code in the frontend and send it to the backend to require the access and refresh tokens, I recommend using the simple Microsoft REST API for that, which can be reached using any HTTP client library (like Axios). Do not use the Microsoft Authentication Library for JavaScript v2.x. Microsoft says that it implements Authorization Code Grant, but it didn't work for me -- there wasn't a way to require only the code and follow the rest of the process in the backend. More things in this direction:

• As I mentioned in my first post, you must create an Azure account in https://portal.azure.com/ without checking any of the Implicit Grant checkboxes.
• To generate the code verifier and code challenge values to use in the process to provide code and retrieve authorization token (PKCE), simply use the code provided here.

For my needs (React + NodeJS), Microsoft has a NodeJS library for this, but it is still on Beta (not recommended for production).

All official Javascript component libraries to handle OAuth2 are detailed here.

[max-carey]

@rfontoura

Wait so did you use a third party library in your solution? How did you get the microsoft sign-in pop up? I'm also researching how to implement this using the authorization code flow.....

[rfontoura]

Hello, @axme100. There's a while since I've worked on this and I'm not totally sure. But you'll end up redirecting your application to a Microsoft authentication page, so you can login and authorize your app, returning a code through a URL parameter. The entire flow is described here: https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow