Getting started with Spring security using OAuth2 with Angular 8

[@bhumitthakkar5752]

Thanks. I wish your views go super high on this. Good Job. I wish we knew how to get and store client_id and client_secret from GitHub, but thats ok I figured it out. THANKS. REGARDS.

[@andrsbrbs]

Great video. A minor remark though, I'd rename the title's AngularJS 8 to Angular 8 simply, since AngularJS is a different framework, it might confuse others.

[@daniel61206]

very concise and to the point. Thank you so much

[@temkarus0070]

thanks, veri good guide!

[@angier7108]

Thanks so much for making this video. I'm trying to do this with azure instead of GitHub but getting errors. Just one question..the url used in step 5 ..the backend api url is registered with GitHub? How did you get that url

[@JSBlogs]

Thanks Angie. Spring security OAuth usage a template for redirect-uri `{baseUrl}/login/oauth2/code/{registrationId}`. Check the link for more detail docs.spring.io/spring-security/site/docs/5.2.x/reference/html/oauth2.html#oauth2login-sample-redirect-uri

[@abdulfarooqmulla7784]

Thank you so much it is very nice and help to acquire more knowledge in this practical example but i am facing one small issue seems it is jar file issue because i have added latest jar let see . I need your help if require

[@anilreddy9654]

Angular and spring boot azure ad sample code is there any implementation

[@ajaysinghpundir4877]

🤗 Good Work

[@AjayGupta-ob8oe]

Can you make one video for JWT

[@JSBlogs]

I'll try to create one but my blog is coming around that. I'll share the link once it's out

[@JSBlogs]

Hi Ajay, Sorry I was occupied in something else. I've created new blow regarding the JWT based token store. jsblogs.github.io/spring/2020/08/23/Spring-security-using-OAuth2-with-angular-js-JWT Do let me know your comments

[@ramnivasmurugesan6453]

hi its good to understand.. and great tutorial. i have one doubt.. that if blocked the user in AD before expiration of the provided token means how could we validate that token with providers ?

[@JSBlogs]

Thanks Ramnivas, You cannot validate the token with the providers as the token was generated by our application and the provider is not aware of that token. You can use automated deprovisioning solution. Read docs.microsoft.com/en-us/azure/active-directory/enterprise-users/users-revoke-access#best-practices for more details

[@ramnivasmurugesan6453]

@@JSBlogs thanks for the reply. my idea is creating Authorization server with azure ad and resource server. my doubt is how authorization server will validate AD token, which requested from resource server api

[@tahhaa906]

The AuthGuard logic is weak, you can put any value in the 'key' item of Local Storage and it will let you in. Generally speaking, Local Storage is not made to store sensitive data such as bearer tokens because it is vulnerbale to XSS attacks. Other than that, I appreciate this video.

[@bhumitthakkar5752]

Why is http.post request giving 401 error? [get is working - I saw my header interception was also happening correctly ]

[@JSBlogs]

I believe the token is not being sent with the post request.

[@Artur-js6ip]

Hi, I added your implementation without JWT and is work great, but when I can try add JWT a get error: java.text.ParseException: Invalid serialized unsecured/JWS/JWE object: Missing part delimiters, when application try parse in this place: SignedJWT signedJWT = SignedJWT.parse( jwt ); Maybe you know why?

[@JSBlogs]

Looks like the JWT is not generated correctly. Can you share the JWT token

[@Artur-js6ip]

@@JSBlogs I solved my problem with login(I didn't restart frontent and get old token), Thanks

[@itsmevijach2375]

Nice Video. Can you do one video on Custom oauth provider (I mean like writing our own login page along with 3 rd party Oauth providers login) If possible. Thanks.

[@JSBlogs]

Do you mean custom Auth server? Like spring Authorization server ?

[@itsmevijach2375]

@@JSBlogs yes, I mean as we are using facebook or google client authorization server to login along with that how can we implement our own authorization server to login in spring security 5.

[@JSBlogs]

Ok I'll create either a video or blog post around that meanwhile you can read few of the blogs here jsblogs.github.io/ Thanks for reaching out

[@itsmevijach2375]

@@JSBlogs thank you for your time . Actually I am building a NGO web app with angualr 9 and spring boot so I am finding difficulties with spring security 5 for custom login.

[@JSBlogs]

@@itsmevijach2375 is there a requirement to use oauth with custom Auth server or can you go with simply form based login or just jwt based login ?

[@talhaansari5763]

Great Video Sir very helpful. Please make a video on Facebook OAuth2. +Spring Rest API +Angular+JWT authentication . We want to use both authenticaion Oauth2 and JWT. Response Sir If see my comment.

[@JSBlogs]

Thanks Ansari, I've already covered azure with third party oauth flow and written few blogs around that jsblogs.github.io/ But I'll create one video specific to this usecase

[@adityagarg8214]

great video dude! facing a error. my controllers are not working. whenever I call a controller I get Set SecurityContextHolder to empty SecurityContext. how to overcome this?

[@JSBlogs]

Why do you set empty SecurityContext? Can you explain me your use-case?

[@adityagarg8214]

@@JSBlogs no this was happening post controller request... i got confused. If we want to implement logout how to do it? simply removing the token from session storage? what about token removal from token store?

[@bhumitthakkar5752]

What about logout?

[@OdiaMadBiker]

Is it renaming your bean name to corsconfigurationsource solved your CORS issue.because i m too facing same issue bt renaming doesnt work.can you please give some quick soln.

[@JSBlogs]

Try putting @Primary on your bean

[@OdiaMadBiker]

Hw will @primary solve these issue??

[@OdiaMadBiker]

As we configured redirect_uri ..so for pre flight options request also its getting redirected..which should not be the case..so getting preflight request doesnt pass access control check..redirect is not allowed for a preflight request

[@OdiaMadBiker]

Is there any way..we can connect once??

[@JSBlogs]

I'm available tomorrow we can connect over the Google meet

[@darrenmoriarty6984]

Hi this video is great! But my server uses Webflux instead of the servlet api. Ive been able to replicate most of your code. Have you experience implementing Oath with Webflux?

[@JSBlogs]

I've not explore with Webflux yet but will give it a try.

[@mahaveersingh2984]

Hi JS Blogs, I have tried implementing it but every time no matter if its even /login or /auth its going to authenticationEntryPoint() and returning unauthenticated , Plz rpl ASAP

[@JSBlogs]

did you configure /login or /auth url as permitAll?

[@mahaveersingh2984]

@@JSBlogs yeah same files I copied from your github repo

[@mahaveersingh2984]

is there any chance that we can do zoom and you can help me out. I am literally working on it from last 20 hrs

[@JSBlogs]

Let's connect tomorrow

[@JSBlogs]

Sunday 11am

[@deepakpal3209]

Hey I liked this video. Actually I need to do the same for bitbucket oauth2 login could you please make a video on it. And download use any MAP Try to explain the way which a developer need to write a code for production environments. Thanks

[@JSBlogs]

Thanks Deepak, Thanks for your feedback. Will record a video for the same. Would you mind explaining a bit more about "download use any MAP"?

[@deepakpal3209]

@@JSBlogs I am really sorry it was typo error. I meant don't use HashMap(Map) . try to make a video with production ready code. because I have seen in multiple videos where people are using inmemory so just avoid to use this kind of thing and explain the concept and coding which can be used in production environment.

[@rakshita3946]

Hi, this video was very helpful. Thank you. I had a query regarding how the /token endpoint works here.On auth success, you have generated a random token which gets set in the response, whereas the access token has to be generated by exchanging code and then set in response and this don't seem to be happening here. Please help.

[@JSBlogs]

I am intentionally generating the new token (specific to the application) and the token I got from GitHub is stored in-memory (in HashMap) 15:49. The reason I am doing this because the token I got from GitHub contains details specific to the user currently logged-in. And in case I need to add additional details (like user id in our system, other user related info or tenant info in case of multitenant app) I need to create a new token

[@rakshita3946]

Ok, so how shall I have to pass the token received from GitHub to the Angular storage?

[@JITTUBISHT]

@@rakshita3946 Autowire a bean of `OAuth2AuthorizedClientService` and then use below method public String getAccessToken() { Authentication authentication = SecurityContextHolder.getContext().getAuthentication(); if(authentication instanceof OAuth2AuthenticationToken) { OAuth2AuthenticationToken token = (OAuth2AuthenticationToken) authentication; String registrationId = token.getAuthorizedClientRegistrationId(); String principalName = token.getPrincipal().getName(); OAuth2AuthorizedClient client = authorizedClientService.loadAuthorizedClient(registrationId, principalName); return client.getAccessToken().getTokenValue(); } return null; }

[@JITTUBISHT]

Or if you want it to store at the time of login success then add a event listener and handle `AuthenticationSuccessEvent`. This event will have Authentication object and then call below method on authentication ((OAuth2LoginAuthenticationToken) authentication).getAccessToken()

[@rakshita3946]

@@JITTUBISHT yes, will try both the approach

[@adityagarg8214]

can you please help me develop logout after this?

[@JITTUBISHT]

If you follow this approach then make an API call to the backend with the token and remove it from the token store

[@JITTUBISHT]

Let me know if you need a code sample

[@mukundmundhra6899]

@@JITTUBISHT Can you please share the sample?

[@JSBlogs]

Sure will do

[@ascar66]

So is it an angularJS or angular 8?

[@JSBlogs]

It's angular 8. (Sorry I'm no expert in front-end tech)

[@daily_greetings]

I can not make it to work 😭😭😭

[@JSBlogs]

Can you share the stack trace?

[@hassanwala4628]

You have saved me. Tbh your tutorial was very helpful. I was not able to fetch token and callback, But your video cleared me thanks. This code works fine but sometimes I get 401 or 404 /login?error . can you please also tell me why is it behaving like this?

[@JSBlogs]

Could you please share the logs or browser screenshot which shows the error message. If possible please share the security config as well

[@hassanwala4628]

Hello JS blogs thanks for your reply. I would like to send you but I cannot om youtube. Can you tell me another way where I can provide you Screenshots?

[@JSBlogs]

Hi Hassan, You can email me at [e-mail]

[@ToastedPilot]

same error here

[@ToastedPilot]

any answer on how you fixed it?