Use Jwt and the Roles to Secure Your Fullstack ReactJS and Spring Boot / Spring Security

In this video, I show how to configure a Spring Boot / Spring Security backend with JWT and the roles. I also show how to store the roles information in the JWT to allow the ReactJS frontend to render a different page depending on the roles. I explain how to use the PreAuthorize annotation in the controllers with the available SPeL expressions.
This video belongs to a playlist where I develop fullstack applications using a frontend and a backend in Spring Boot: • How to Easily Secure Y...
Github repository: github.com/serlesen/fullstack...
My NEW eBook: sergiolema.dev/git-book/
Blog: bit.ly/47ornJL
LinkedIn: bit.ly/41Nn61q
Facebook: bit.ly/47rc9nh
My Desktop:
• Laptop: Macbook Pro 16" 2019
• Gaming Chair: amzn.to/47Vu6ed
• Mouse: amzn.to/3HoBwM1
• Desk: amzn.to/48Tc5Oi
• Screen: amzn.to/48VZkCL

[@arnaudpoutieu1331]

Great content as always Sergio! Merci encore

[@TheDevWorldbySergioLema]

Merci à toi de me suivre Arnaud !

[@venera01010]

Straight to the point, good job 👍

[@TheDevWorldbySergioLema]

Thank you!!

[@juansebastiancadavidperalt7275]

Bro you are the best, I was search a solution with spring security and I can't find somethinh, but in your git, i can find somithing ez. Thank you and sorry for I have some error in gramatical

[@TheDevWorldbySergioLema]

Thanks Juan!

[@davidl6797]

Great tutorial Sergio, regards!

[@TheDevWorldbySergioLema]

Thanks David!

[@AnkitTiwari-qt5ds]

Awesome Explanation and one of the Best.💯💯 please Create a video with using Angular as Fronted.💯

[@TheDevWorldbySergioLema]

Thank you!
I will, that's on my roadmap 😉

[@AnkitTiwari-qt5ds]

@@TheDevWorldbySergioLema Eagerly Waiting for the Video.🤭💯

[@TheDevWorldbySergioLema]

😩 I have other videos on the roadmap. I may need to reschedule them again 😅

[@Alexander-zt9kz]

Really good video. Thanks

[@TheDevWorldbySergioLema]

Thank you Alexander! Really appreciate

[@Alexander-zt9kz]

​@@TheDevWorldbySergioLemaOne question.
Could I have two DELETE endpoints both mapped to users/{userID}/farts with separate PreAuthorize annotations? I would want celebrities OR admins to be able to delete a fart identified by a specific ID and each method to have seperate logic. Would Spring determine which method to call based off hasAuthority ( ie, in the case where the user does not have a celebrity role, it'll check the other endpoint to see if they have an admin role? )
Thank you so much, sorry if that question was confusing.

[@TheDevWorldbySergioLema]

No, you can't have the mapping to different endpoints. You should have one endpoint with an OR condition in the PreAuthorize (to check admins OR celebrities). And inside the method, inject the AuthenticationPrincipal to handle both logics with an if-condition.
I hope my explanation is clear enough.

[@Alexander-zt9kz]

@@TheDevWorldbySergioLema It is clear, thank you!

[@AndrulisTravel]

One question. Let's say you have separate frontend and backend. In React endpoints are exposed if you inspect Network in the browser. I wanna protect endpoints from being accessed directly, only from the app. If the endpoint is on api,domain,com and frontend on domain,com These endpoints will return some data that doesn't require auth, but I don't want someone scraping the data directly from the endpoint. Any ideas or suggestions?

[@TheDevWorldbySergioLema]

There are many options you can do that:
* Use a VPN to access the api.domain.com endpoints. This way you ensure that those endpoints are only accessible from people who are inside the VPN
* Use basic auth, which is easier to implement that JWT
* Use the CORS configuration to only accept requests from domain.com. But this solution can easily be bypassed as the headers in the request can be set to simulate the frontend.

[@AnhVu-Tryingtobebetter]

I am new to Spring Boot, can you show how to do oauth and credentials together? Great video btw

[@TheDevWorldbySergioLema]

Thanks.
If you want to work with the OAuth2 worklow, the credentials will be managed by a third-party system.
You can check some videos I've made about the OAuth2 workflow here: ua-cam.com/play/PLab_if3UBk9-AArufc8CryyhSDVqkNT-U.html

[@AnhVu-Tryingtobebetter]

Thanks for the reply. Sorry for asking a lot of questions since I'm quite new, but is it possible to implement both username/password authentication and OAuth2 using JWT in the same Spring application, with React as the frontend? A tutorial on that would be greatly appreciated. Again thanks a lot

[@TheDevWorldbySergioLema]

Something like this? ua-cam.com/video/hfeOqvHxHO8/v-deo.html

[@udhayasankar113]

Can u do one for angular? Like using azure oauth

[@TheDevWorldbySergioLema]

Yes, I'm planning on doing one with Angular.
But I've never worked with Azur 😅

[@udhayasankar113]

@@TheDevWorldbySergioLema haha if possible give a try

[@TheDevWorldbySergioLema]

I'm already working a lot with AWS and a little bit with GCP. Azure is absolutely new for me