0

What I'm trying to do is to create an application with Angular frontend and Spring Boot backend with OAuth2 authentication.

The issue is that I don't know how to get on the frontend the ROLES user has so that I'll be able, for instance, to show something role-based on the page.
Yes, there are scopes that OAuth provides in the response but the problem is that these scopes are for the CLIENT but not for the specific USER itself. And that CLIENT is my frontend side (correct me if I'm wrong) which basically means that every user operating my application(client) going to have the same scopes(roles).
Moreover, I can specify roles on the backend with the help of Spring and UserDetailsService and then use those roles with @PreAuthorize, etc. But not on the frontend side.

Just as an example, if I simply used single JWT then with a token itself I'd return both the username and roles to frontend. And then I could store that data and use it on the frontend side according to my needs.

So what I'm asking is if it's actually possible and if this is correct to do so? And how can I possibly implement such behavior?

THE Waterfall
  • 645
  • 6
  • 17
  • @ThomasAndolf I didn't find any that would describe how to use roles on the frontend with OAuth. Please, share a link with me if you have one. – THE Waterfall Aug 02 '19 at 16:07
  • 1
    If you have an oauth token, you store the token. Then you can fetch the user object using that token. You pass the token to the backend and get the user object (containg the user roles) back that you store in some kind of state on the front end. – Toerktumlare Aug 02 '19 at 16:31
  • 1
    By checking the user object in the state and its roles you can display what the user can see based on the roles. If using a jwt, depending on what kind of oauth2 flow you are using you exchange the token for a jwt, and jwt itself contains the user roles. You store these in some kind of state on the front end. What state managment system is up to you. Some use Redux, some use Mobx. – Toerktumlare Aug 02 '19 at 16:33
  • https://medium.com/engineerbabu/angular-authentication-using-jwt-d846c5ce0ac6 https://medium.com/@amcdnl/authentication-in-angular-jwt-c1067495c5e0 https://blog.angular-university.io/angular-jwt-authentication/ https://jasonwatmore.com/post/2018/11/22/angular-7-role-based-authorization-tutorial-with-example https://stackblitz.com/edit/angular-7-role-based-authorization-example – Toerktumlare Aug 02 '19 at 16:34
  • @ThomasAndolf Thank you, that's actually the idea I was thinking of. – THE Waterfall Aug 03 '19 at 11:16

2 Answers2

4

OAuth doesn't solve this problem and it is best solved via claims in your API. OAuth should deal with authentication only. My below post may help you to think about the best separation: https://authguidance.com/2017/10/03/api-tokens-claims/

In a nutshell you will have to look up user rights such as roles after the OAuth processing completes.

halfer
  • 19,824
  • 17
  • 99
  • 186
Gary Archer
  • 22,534
  • 2
  • 12
  • 24
  • Thank you a lot. Will read through your article. And yes, I've got a question. After a small additional research, I found that there are authorities in addition to scopes in OAuth2. I was wondering about the difference and the only page that described the difference is [this one](https://stackoverflow.com/questions/32092749/spring-oauth2-scope-vs-authoritiesroles). But I didn't quite get the explanation. If you could restate the accepted answer there or give your own explanation about the difference - please, it would be absolutely great. – THE Waterfall Aug 03 '19 at 11:24
  • https://stackoverflow.com/questions/32092749/spring-oauth2-scope-vs-authoritiesroles – Toerktumlare Aug 03 '19 at 14:07
  • @ThomasAndolf I just gave the same link in my message. Wanted to hear another explanation or restate the accepted answer. – THE Waterfall Aug 03 '19 at 15:27
  • 1
    the client itself has certain rules. Say a webbrowser is allowed to to call some service and update certain things, while a mobile app has the right to call other services. This is usually regulated by using the scopes. You have the ability to read to some places and write to others depending on the client. The user on the other hand has the authority to do certain things, that other users are not allowed to. as the example states user might be able to update something, but twitter is not. – Toerktumlare Aug 03 '19 at 15:33
2

There is a great video from Spring developer on YouTube about OAuth2/OpenID Connect. It shows how to implement the resource server using the newest Spring Security 5 solution.

Probably the easiest and the best way to achieve this is to use an OpenID Connect server which will provide all user management stuff. On the market there are many solutions. Auth0 and Okta are Identity Clouds which provides their services for small amount of money. On the other hand you have Keycloak, which is a server which you can install in Docker or even on bare metal - it's free and open-source.

mregulski
  • 160
  • 2
  • 8