Doni Doni - 7 days ago 5
React JSX Question

What type of grant is adequate for a React application?

I'm little confused because I don't know what type of grant I should use for my specific scenario.

I've a front-end React application with a back-end using Spring Boot. Additionally, there is a standalone Spring OAuth2 authorization server.

The React application will be a normal public web application where authentication requires username and password credentials.

What type of grant should I use? Is the resource owner password credentials grant a good choice?

Answer

There's a lot of things that can influence the best way to approach this; based on the provided information it's possible to showcase applicable options and do some recommendations, but the definitive choice is hard to make without having all the context.

TL;DR On a browser-based application where end-users are issued username/password credentials and the applications needs to make calls to an API on behalf of the users you can either use the implicit grant or the resource owner password credentials grant (ROPC). The use of ROPC should be further restricted to client applications where there is an high degree of trust between the application and the entity that controls the user's credentials.

The use of client credentials is completely out of scope and the authorization code grant may not present any benefit over the implicit grant for what a browser-based application is concerned so by a process of elimination we have two eligible grants.

Resource owner password credentials grant

ROPC

(check Auth0 ROPC Overview for full details on the steps)

This grant was primarily introduced in OAuth 2.0 as a way to provide a seamless migration path for application that were storing username/password credentials in order to have access to user resources without constantly asking the user to provide the credentials. As you can imagine, storing passwords in plain text is a big no no, so having a way to stop doing that with a very simple migration path (exchange the stored credentials with tokens using this grant) would be a big improvement.

However, access tokens expire so the way to keep obtaining new tokens for access was through the use of refresh tokens. Keeping refresh tokens in storage is better than passwords, but they are still usually long-lived credentials so the act of storing those type of tokens has additional security considerations. Because of this, it's not usually recommended to keep/use refresh tokens in browser-based applications.

If you choose this grant you need to decide what will happen when the access tokens expire.

Implicit grant

Implicit

(check Auth0 Implicit Grant Overview for full details on the steps)

This grant is a simplified version of the authorization code grant specifically aimed at applications implemented within a browser environment so it does seem be a better fit to your scenario.

An additional benefit is that obtaining new access tokens could happen transparently after the first user authentication, more specifically, by having the authorization server manage some concept of session any implicit grant request for a user that is already authenticated and that already consented to provide that authorization could be done automatically without requiring user interaction.

Conclusion (aka opinion based on what I know which may not be sufficient)

As a general recommendation I would choose the implicit grant over the ROPC grant.