Secure Your Fullstack Angular - Spring Boot Application With the JWT Authentication

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 พ.ย. 2024

ความคิดเห็น • 234

  • @JaimeReyCasadoMonokepos
    @JaimeReyCasadoMonokepos ปีที่แล้ว +4

    amazing video, i'm used to 4 hours tutorials without UI, just tested with postman, and this is mindblowing
    thank you for everything

  • @szamajama_okutasi
    @szamajama_okutasi ปีที่แล้ว +4

    Man, exactly what i needed to start my graduation project. Thank you so much!

  • @giridharreddy9579
    @giridharreddy9579 7 หลายเดือนก่อน

    Excellent...! crisp clear.. no unwanted things kudos!!! bro

  • @faded1909
    @faded1909 ปีที่แล้ว +4

    Can't believe it, just what I need it. Thank you so much

  • @ruwanc
    @ruwanc ปีที่แล้ว +2

    Great tutorial! 👍
    Thanks a lot for the video. 👏
    Please do a follow up video for this with the role based authorisation with JWT. 🙏

  • @hello-ITworld
    @hello-ITworld ปีที่แล้ว

    CORS issue brought me here.... you are awsome! Keep doing

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      Thank you! If you want more information the reason and the solution of the CORS error, I've also made this dedicated video: bit.ly/44G1Ie7

    • @hello-ITworld
      @hello-ITworld ปีที่แล้ว +1

      @@TheDevWorldbySergioLema thanks Sergio! I did

  • @codewithnatan
    @codewithnatan ปีที่แล้ว

    Thanks for the video, I was able to create a front-end with jwt login and authentication in a different application, helped me a lot. Thanks again.

  • @abdelazizmahmoud4051
    @abdelazizmahmoud4051 ปีที่แล้ว +1

    I was waiting for the refreshing of the token 😅
    thanks alot 😊

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +2

      Sorry, I didn't include that in this video. Maybe the next time

    • @abdelazizmahmoud4051
      @abdelazizmahmoud4051 ปีที่แล้ว

      okay. BTW, the content in your channel is very helpful. specially the security related topics🔥 please continue

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Very appreciated!

  • @MrBlue1919
    @MrBlue1919 5 หลายเดือนก่อน

    Absolutely amazing, simple and very helpful , Keep Going !

  • @dimoyanev963
    @dimoyanev963 4 หลายเดือนก่อน

    Excellent simple and very useful, thank you Sergio

  • @andriikorniienko
    @andriikorniienko 4 หลายเดือนก่อน

    that's brilliant, please keep it up sir! I'm just wondering how one's supposed to learn all of that without guys like you?? It appears to me that there are not that many resources that go in-depth on spring security

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  4 หลายเดือนก่อน

      Thank you so much for those kind words!
      In my case, I've learned from guys "like me" but while working. I had the chance to work with great people, great managers and great teachers. Now It's my turn to teach

  • @KieranMueller
    @KieranMueller ปีที่แล้ว

    Awesome video, was stuck in tutorial hell for a bit on this. This is exactly what I was looking for

  • @avishekdas4947
    @avishekdas4947 ปีที่แล้ว

    Absolute quantity content❤ lots of love from India❤❤❤

  • @cpacheco
    @cpacheco 8 หลายเดือนก่อน

    You save my day! tks Sergio Lema.

  • @rkjessop
    @rkjessop 4 หลายเดือนก่อน

    This video is comprehensive and well presented. However, there are some serious problems with this instruction if you're following the video and making sure you completely understand each step. If you're simply downloading the repo and going with that, it may work fine. The repo needs to have snapshots of the code as tested; e.g., at 35:13. I find all of the praises a bit biased.

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  4 หลายเดือนก่อน

      Thank you. What I'm trying is to explain the concepts and give a repository with the same code. I can't give you a repository prepared for everything with all the data (everyone will need a different use case)

  • @b1010code
    @b1010code ปีที่แล้ว

    So good ! , Brazilian country peoples send to you, Thank's So Much !!!

  • @tahabouhlal6900
    @tahabouhlal6900 9 หลายเดือนก่อน

    very efficient and to the point,thanks for this tutorial, i just wanted to ask how can make the front end into one login component, since i want to add it to my project

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  9 หลายเดือนก่อน

      Thank you!
      I'm not sure to understand you what do you mean with one component. If you want the code I've used, check the Github repository, you can find the link in the description of the video.

  • @thendoronnyramashia749
    @thendoronnyramashia749 ปีที่แล้ว +2

    Love this video, very straight forward and informative. Just a question: Can you use the angular http package to connect to the backend instead of importing Axios?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +3

      Yes, of course. But that was the first time I used Angular, I didn't know about this alternative

    • @thendoronnyramashia749
      @thendoronnyramashia749 ปีที่แล้ว

      @@TheDevWorldbySergioLema Sorry, just saw the other comments where you stated this, but you really did well using it for the 1st time. Also wanted to ask, how would I go about securing other endpoints after login in as a user? Say I wanna perform CRUD operations after login, how would I secure those endpoints using the token?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +2

      Thank you! In fact, if you take a look at the current SecurityConfig, you can see that the only open endpoints are the one about the login and register. The rest must be authenticated. So, adding more endpoints for CRUD operation will be by default protected with the JWT authentication.

  • @damjuve13
    @damjuve13 ปีที่แล้ว

    great to learn jwt authentication with angular !
    good job !

  • @Mohamed-uf5jh
    @Mohamed-uf5jh 2 หลายเดือนก่อน

    Thanks , a good tuto for spring seciruty abd angular great Job

  • @ex_molly715
    @ex_molly715 7 หลายเดือนก่อน

    Hello, first of all, thx for this great tutorial. I was just wondering if this can be used in production and if so, jwt is enought or do we need anything else ? i mean if we use jwt token and not cookies auth we don't need to enable the csrf no ?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  7 หลายเดือนก่อน +1

      Thanks!
      Yes, you can use the same configuration in production. A JWT is strong enough.
      The only thing you have to change is the way the database is initialized. Don't use create-drop on production

  • @toxiq7532
    @toxiq7532 ปีที่แล้ว

    This video is very useful for me.
    Thank you!

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      Glad it helped you. Continue watching my channel, you may find some more interesting videos

  • @nelsoncastiblanco7438
    @nelsoncastiblanco7438 ปีที่แล้ว

    Excelente video!! Tengo una pregunta. Es válido esta arquitectura para un ambiente en producción ? ... He visto otros video tutoriales, y en el Front Angular, se debe configurar un clientId y clientSecret... No es necesario ? o cuál es la diferencia ?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Gracias! Claro, esta configuracion es válida para producción. El uso de un clientId y clientSecret implica una autenticación OAuth2, que es diferente al JWT utilizado en este video. Si quieres más detalles sobre ese tipo de autenticacion, tengo varios vídeos, bit.ly/3KUd6fM

  • @paatricksAufLager
    @paatricksAufLager 24 วันที่ผ่านมา

    thank you for this nice tut :) it was easy to understand

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  24 วันที่ผ่านมา +1

      Thanks
      Jackson (the default library to parse JSON content) already parse the content to avoid SQL injection. Then, Spring Data also prevents SQL injection when inserting data into the database.

    • @paatricksAufLager
      @paatricksAufLager 24 วันที่ผ่านมา +1

      @@TheDevWorldbySergioLema tyvm

  • @drinou3556
    @drinou3556 10 หลายเดือนก่อน

    Nice work! But one thing that looks odd to me : you do not delegate the user/password check against the data using User Details Service.
    Is this a choice?
    Again, on the Jwt filter, is there a way to delegate this to spring security, to avoid handling all by ourself?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  10 หลายเดือนก่อน

      I was not able to do it with UserDetailsService because I use custom JWT generation.
      I may investigate some more if there is a way to do it all by configuring Spring Security correctly.

  • @RN-jo8zt
    @RN-jo8zt ปีที่แล้ว +1

    Really loved your video
    just curious how we can implement jwt refresh token in angular. means how will automatically call from angular to spring boot refereshtoken api call after it's expired?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      Thanks, that's a very good question, i'll try to make a video about that soonly

  • @MrMarciii98
    @MrMarciii98 8 หลายเดือนก่อน

    Good tutorial but I have one thing to improve. It is: password is sent from frontend to the backend without any encryption. In my opinion it is easy to stole such password by this. It would be better to encrypt it on the frontend side and send to the backend side already not readable (at least for human).

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  8 หลายเดือนก่อน +1

      That's a good point. But if you're application uses HTTPS communication, all the data sent in a POST payload will be automatically encrypted. So, you won't need to add this additional complexity.

    • @MrMarciii98
      @MrMarciii98 8 หลายเดือนก่อน

      @@TheDevWorldbySergioLema Thank you, you're right!

  • @may1532
    @may1532 7 หลายเดือนก่อน

    I can tell you are a backend developer at heat. Love the video, the only question is, what if i want to send to the frontend the first name and the last name of the logged in user, so that the message will welcome them after logging in ? it should show "welcome Sergio Lema !" for example. What do i need to change ? Looking forward for your guidance :)

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  7 หลายเดือนก่อน

      Thanks!!
      You can already do it with the code I've shown in the video.
      The response of the login endpoint is the user's information, where you can find the first name and the last name.

  • @MRcobrat53
    @MRcobrat53 ปีที่แล้ว

    Hello superb video ! I have a problem with the UserService, my ide (eclipse) tell me to initialise the 3 final variable. Do you have an idea to fix this ? thanks for you video it's really hepfull

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      Thank you! You need to enable the annotations preprocessing, to allow Lombok generate the constructor to initialize those variables

  • @kratom82
    @kratom82 ปีที่แล้ว +1

    Nice Tutorial! But beware at Minute 11:29 in Code Line 18, the request param for data should be "{}" and not "()" :) had quite an issue with that typo until i checked the git repo

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +2

      Yes, i saw that in the post-production. I corrected it in the git project but had no way to correct it in the video, sorry

  • @chosta94
    @chosta94 2 หลายเดือนก่อน

    At the start of the tutorial, after the CORS configuration, spring security force me to login, even if my html request is only for /messages, my program is obliged to get to /login...I have exactly the same code

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  2 หลายเดือนก่อน

      If you have no Spring Security configuration, but you added the Spring Security dependency, it makes that all the endpoints are protected, and it redirects to a default login page. Continue adding the Spring Security configuration and it should work

  • @cheymabahroun3824
    @cheymabahroun3824 8 หลายเดือนก่อน

    thank you for this video. But i have a question if you don't mind: I want to reuse the same code for another front (client side and admin side, they share the same database), and I was wondering if its possible to include something else alongside the User here ?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  8 หลายเดือนก่อน

      Do you mean using roles?
      Or do you mean sharing the same JWT for different applications?

    • @cheymabahroun3824
      @cheymabahroun3824 7 หลายเดือนก่อน

      @@TheDevWorldbySergioLema I meant the same JWT for 2 different angular fronts. I wanted to re-use the same code since I need the same backend code, but It's all good now I found a solution. Thank you !

  • @Sebastian-zs8cp
    @Sebastian-zs8cp 4 หลายเดือนก่อน

    How did you learn it, it's a black box, everyone uses it but no one knows about it. I'm a self learner and I don't have a company behind me, I'm unemployed, and I want to bring a product to the market, but I have to get my users securely registered or the procedure, and I'm scared because that can fall on my feet.
    My stack:
    -Angular,
    -Spring boot,
    wants the Angula app to authenticate
    then the user registers or logs in

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  4 หลายเดือนก่อน

      It takes a lot of years to learn.
      Keep working on it! I'm also a self learner

  • @gentlehandwithgreatsmile
    @gentlehandwithgreatsmile 7 หลายเดือนก่อน

    I learned a lot !! thanks !!!

  • @messironaldo1708
    @messironaldo1708 ปีที่แล้ว

    Love your videos! I'm kind of new to Angular but why are you using Promise instead of Subject(preferably BehaviourSubject)?

  • @marcolucibelli5249
    @marcolucibelli5249 2 หลายเดือนก่อน

    You're so awesome

  • @damjuve13
    @damjuve13 ปีที่แล้ว

    could you do a video about cors. What is it, how to use it and how to solve main issues with it ?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      I don't have a dedicated video about fullstack CORS, but a backend and how to solve it with CSRF

  • @anjakovacevic2996
    @anjakovacevic2996 7 หลายเดือนก่อน

    Hello, could you add a role based authentication to this? Great job! I am just missing a piece

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  7 หลายเดือนก่อน

      Thank you. I recently made a video with the roles, th-cam.com/video/g4mx3Q1loL0/w-d-xo.html

    • @anjakovacevic2996
      @anjakovacevic2996 7 หลายเดือนก่อน

      @@TheDevWorldbySergioLema That's great, thank you!

  • @haninezayani
    @haninezayani ปีที่แล้ว

    thnak u for this amazing video , can u make us an other video explaning how to get from the form(login page ) to other pages(home) in our application

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      Once you get the user authenticated, you can add a flag in the root component (like userAuthenticated), and use this flag to display different content with the syntax *ngIf="userAuthenticated == true".
      You can also have this similar logic in the router.
      But creating a video about the router may be interesting, let me add this idea to my TODO list 😉

    • @haninezayani
      @haninezayani ปีที่แล้ว +1

      @@TheDevWorldbySergioLema thank you ♥♥

  • @cananard
    @cananard 9 หลายเดือนก่อน

    Excellent! I just happen to get a problem with the injection of the UserMapper in the UserService. Spring tells me it could not find the bean... Btw, I don't use lombok. Thanks !

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  9 หลายเดือนก่อน

      Thanks. For the mapper, you must tell MapStruct to use the mapper as a componentModel = "spring".
      Then, you can inject the Mapper inside a service as always.

    • @cananard
      @cananard 9 หลายเดือนก่อน

      @@TheDevWorldbySergioLema Thanks for your quick answer but I already annotated the UserMapper class with these params and it still refuses to wire it...

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  8 หลายเดือนก่อน

      Are you sure Spring scans the package where the Mapper is?
      Is it when you run the application or when you run the tests?

    • @cananard
      @cananard 8 หลายเดือนก่อน

      @@TheDevWorldbySergioLema When I run the app. I really don't get what's happening, I properly annotated the mapper interface and it seems - indeed - that it's not in the app context (I logged the result of the search of the bean at startup -> applicationContext.getBeansOfType(UserMapper.class) and it returns nothing). I even added the @Autowired annotation to the constructor of the UserService... Also, for the sake of being complete, I must precise that I use the last version of spring boot (3.2) and Java 21.

    • @aboudiomande4829
      @aboudiomande4829 8 หลายเดือนก่อน

      I'm also experiencing this issue when I run the code, thank you!@@TheDevWorldbySergioLema

  • @nebsar
    @nebsar 9 หลายเดือนก่อน

    Would you prepare a video about Two Factor Authentication?

  • @densyo1502
    @densyo1502 ปีที่แล้ว

    Thank you so much!

  • @ashrafjefrizin4630
    @ashrafjefrizin4630 ปีที่แล้ว +1

    Why you use axios over http client from angular?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Didn't know about it, it was my first time with angular. I will try it for the next time

  • @qwertyuiop-hw5mt
    @qwertyuiop-hw5mt 7 หลายเดือนก่อน

    Why is login a string, but password has char[] type in CredentialsDTO?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  7 หลายเดือนก่อน

      Both are represented as String, but the password is the most critical field in the application, so i convert it in char array to avoid having the characters in the same variable. I could have done the same for the login.

  • @samwelwafula7365
    @samwelwafula7365 ปีที่แล้ว

    Hello, I get CORS error from my frontend when sending a request attached with a token as a header, how can I handle this.

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      The CORS problem can only be solved in the backend, configuring the accepted frontend. Check the CORS chapter of the video available in the description

  • @Truysジャ
    @Truysジャ ปีที่แล้ว

    Instead of downloading bootstrap packages u could have added bootstrap cdn right?

  • @mensahtribeadventures2630
    @mensahtribeadventures2630 ปีที่แล้ว

    Thank you

  • @rkjessop
    @rkjessop 4 หลายเดือนก่อน

    Thanks!

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  4 หลายเดือนก่อน

      Thanks to you!

    • @rkjessop
      @rkjessop 4 หลายเดือนก่อน

      @@TheDevWorldbySergioLema De rien, mon ami.

  • @myvalorantclips8703
    @myvalorantclips8703 8 หลายเดือนก่อน +1

    16:05 anybody else got stuck there as the front end didn't display the messages ? commenting spring-boot-starter-security dependency seems to fix the issue apparently but I'm not sure it's supposed to be like that.

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  8 หลายเดือนก่อน

      Yes, you need to comment the security dependency if you want to test it at first.

    • @DavidC-fl1do
      @DavidC-fl1do 4 หลายเดือนก่อน

      @@TheDevWorldbySergioLema i have the same problem, exactly where can i find that dependency?

    • @DavidC-fl1do
      @DavidC-fl1do 4 หลายเดือนก่อน

      I found it, but the front still hasn't deployed any message

    • @DavidC-fl1do
      @DavidC-fl1do 4 หลายเดือนก่อน

      btw, you only use intellij in this proyect, no vs code or anything?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  4 หลายเดือนก่อน

      You need to comment the spring-security dependency in the pom.xml and re-load the Maven dependencies in Intellij

  • @anthony8776
    @anthony8776 11 หลายเดือนก่อน

    when I do the line
    request(method: string, url: string, data: any): Promise {
    return axios({
    method: method,
    url: url,
    data: data
    });
    there is the following error:
    No overload matches this call.
    Overload 1 of 2, '(config: AxiosRequestConfig): AxiosPromise', gave the following error.
    Type 'string' is not assignable to type 'Method | undefined'.
    Overload 2 of 2, '(url: string, config?: AxiosRequestConfig | undefined): AxiosPromise', gave the following error.
    Argument of type '{ method: string; url: string; data: any; }' is not assignable to parameter of type 'string'.ts(2769)
    index.d.ts(52, 3): The expected type comes from property 'method' which is declared here on type 'AxiosRequestConfig'
    How to fix this problem?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  11 หลายเดือนก่อน

      The method request() is a method i've created on my own. it's not imported from a library.
      For more details, check the source code at: github.com/serlesen/fullstack-jwt/tree/chapter_2/frontend

  • @The_Fly0
    @The_Fly0 ปีที่แล้ว

    I get Exception: The Token has expired on 2023-10-06T22:08:57Z while registering. Do I understand it correctly, if I do not have refresh token after 1 hour (validity of access token) I will not be able to access restricted endpoints?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      This comes from the value you put in the field withExpiresAt. And yes, if you don't refresh the token before that date, you can't access the application anymore.

  • @extremac-pz9rq
    @extremac-pz9rq 9 หลายเดือนก่อน

    Hey, has anybody implemented response message when validation of JWT fails? If JWT is expired, or format is not good, we get Internal Error 500 in postman, but it would be good to have response message with more details

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  9 หลายเดือนก่อน

      In the video I've just handled the main case: the JWT is always correct.
      If you want a more specific error message, you have to throw a custom exception in the catch clause.

  • @ImadBELATTAR-df2it
    @ImadBELATTAR-df2it 6 หลายเดือนก่อน

    Damn! You're insane

  • @SajjadAhmed-lc2dr
    @SajjadAhmed-lc2dr ปีที่แล้ว

    good one

  • @NayemUddin-w6i
    @NayemUddin-w6i ปีที่แล้ว

    Hello Lema!🎉
    Can you please build a oAuth2 video with spring boot?

  • @flower77769
    @flower77769 8 หลายเดือนก่อน

    What would you need to do to make 'authenticated content' that shows after the login not disappear after refreshing the site or loading some other components in it's place?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  8 หลายเดือนก่อน

      The JWT should be stored in some place where a refresh won't delete it. This can be done if you store the JWT in the localstorage.

    • @flower77769
      @flower77769 8 หลายเดือนก่อน

      @@TheDevWorldbySergioLema If you refresh the page after the login in your GitHub project, the authenticated content disappears even when the auth_token is stored in local storage. Should it function in that way?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  8 หลายเดือนก่อน

      The localstorage should not be erased after a page refresh. That wasn't my case. Which browser do you use?

    • @flower77769
      @flower77769 8 หลายเดือนก่อน

      @@TheDevWorldbySergioLema well the local storage is not modified after refresh and the auth_token is still present. I use chrome 122.0.6261.94.

    • @flower77769
      @flower77769 8 หลายเดือนก่อน

      @WorldbySergioLema I'm using google chrome 122.0.6261.94. The auth_token persists between refreshes but the component (auth-content-component) that displays backend response 'first, second' disappears between refreshes and the welcome-component is displayed instead of the auth-content-component one . This also happens on edge. In my understanding when you login and refresh the page unless you logout you should have the access to the auth-conent-component but you don't.

  • @davidkpidiba8591
    @davidkpidiba8591 ปีที่แล้ว

    Merci pour le contenu

  • @ukaszkiepas57
    @ukaszkiepas57 ปีที่แล้ว

    thanks a lot men : )

  • @chiaselaptrinh9413
    @chiaselaptrinh9413 ปีที่แล้ว

    The constructor CorsFilter(UrlBasedCorsConfigurationSource) is undefined.... I see this error when i config WebConfig

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Which version of Spring Boot are you using?

    • @uawinwin
      @uawinwin 8 หลายเดือนก่อน

      guys if you see error try rename method to publicFilterRegistrationBean corsFilter2()

  • @ClaudioRowe
    @ClaudioRowe ปีที่แล้ว

    could you help me with a doubt i have on material design for bootstrap?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Ask, I will try

    • @ClaudioRowe
      @ClaudioRowe ปีที่แล้ว

      @@TheDevWorldbySergioLema i'm using material design for bootstrap, and it has a basic example modal in it's documentation, where you need to just press a button to open a modal. Here it won't open it just copying it and pasting, as the tutorial says. I downloaded the starter package that comes with Angular 16, and installed just the dependencied that come with it. What can i be doing wrong?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Check the button click is correctly handled (add logs or breakpoints).
      Then, try to display the modal by default (without any action). This way, you ensure the modal has no error when rendering.
      If you see any error in the console, it can guide you to the solution.

    • @ClaudioRowe
      @ClaudioRowe ปีที่แล้ว

      @@TheDevWorldbySergioLema it shows no errors in the console, and i pasted the code as it is :/ it doesn't use js for back, it's appearance is handled by the library

  • @ClaudioRowe
    @ClaudioRowe ปีที่แล้ว

    the dto is the same thing as the entity?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      No, the DTO is the Data Transfer Object, the object which will be converted in JSON and sent to the frontend. The entity is the object mapped to a database table.

    • @ClaudioRowe
      @ClaudioRowe ปีที่แล้ว +1

      @@TheDevWorldbySergioLema i saw that! thanks man

  • @Nakhaan
    @Nakhaan ปีที่แล้ว

    Hi, I was looking for this, this is great for learning, thank you.
    I saw in the comments that you were knew to Angular (so am I ~ 3 months in), I would suggest you look into Observables and the RxJS library. Those are great to handle http requests over Promises. (And much more all in all)
    Moreover, I'm looking to use OAuth2 authentification with JWT. If by any chance you could do a video on it, that would be great.
    Thank you (+1 sub)

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      Thank you!
      Yes, I'm still learning new libraries in Angular, thanks for the sharing.
      About the OAuth2 authentication, I've made a playlist with some ways to do it with Spring Security: th-cam.com/play/PLab_if3UBk9-AArufc8CryyhSDVqkNT-U.html

    • @Nakhaan
      @Nakhaan ปีที่แล้ว

      @@TheDevWorldbySergioLema Aaah awesome, I'll look into it, thanks

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      If you don't find what you're looking for, ask me, I have some more videos about OAuth2 in my todo list (I may prioritize them 😉).

  • @deadweight4887
    @deadweight4887 ปีที่แล้ว

    On 44:19 I'm getting error 403 and 200. The Java console says "ERROR: relation "app_user" does not exist". I've been trying for hours to fix the issue but so far I'm out of luck.

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      How do you create the database? In the example I show, I use the property spring.jpa.hibernate.ddl-auto: create, which creates the schema on the database from the entities description.
      If you use another value (validates or none), you must create the tables and columns by your own.

    • @deadweight4887
      @deadweight4887 ปีที่แล้ว

      @@TheDevWorldbySergioLema My ddl-auto is set to 'create'.

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Do you have the Table annotation with the name of the table? Because, by default it will create a table with the name of the class.

  • @ElianHolguín-w7v
    @ElianHolguín-w7v ปีที่แล้ว

    why is the url of the backend and frontend different?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +1

      The backend is a Spring Boot server running in a Tomcat web server on the port 8080. And the frontend is a separated application, a Single Page Application (SPA) running in a node server on port 4200.

  • @ClaudioRowe
    @ClaudioRowe ปีที่แล้ว +1

    a little comment: you should let us see the title of the file you are editing!

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      In newer videos, I open the file while recording. It should be easier to figure it out.
      Tell me if it's easier to know it.

  • @anupamadhikari6043
    @anupamadhikari6043 ปีที่แล้ว

    When refreshed the user is logged out. How to solve that?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      This shouldn't happen as the JWT is stored in the localstorage. Are you using a private window? Which browser are you using?

  • @thendoronnyramashia749
    @thendoronnyramashia749 ปีที่แล้ว

    Is there gonna be a follow up video for this regarding unit test cases?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      I've made a complete playlist about how to write unit tests with JUnit 5 and Mockito. Still, this is only the backend part. Never worked on unit tests for the frontend.
      th-cam.com/play/PLab_if3UBk99yq2g9ewtJaKsHn9IwZ90p.html

  • @srinivastadimalla1232
    @srinivastadimalla1232 3 หลายเดือนก่อน

    Hi Sir.. I am getting the below error while running the Spring Boot Applicaiton /Users/Srikar/Desktop/Angular/AngularSecurity/backend/src/main/java/com/srikar/jwt/backend/mappers/UserMapper.java:14: error: Unknown property "password" in result type User. Did you mean "null"?
    @Mapping(target = "password", ignore = true)
    ^

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  3 หลายเดือนก่อน

      It's because your entity User is missing a field named "password".

    • @srinivastadimalla1232
      @srinivastadimalla1232 3 หลายเดือนก่อน

      @@TheDevWorldbySergioLema @AllArgsConstructor
      @NoArgsConstructor
      @Data
      @Builder
      @Entity
      @Table(name = "app_user")
      public class User {
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      private Long id;
      @Column(name = "first_name", nullable = false)
      @Size(max = 100)
      private String firstName;
      @Column(name = "last_name", nullable = false)
      @Size(max = 100)
      private String lastName;
      @Column(nullable = false)
      @Size(max = 100)
      private String login;
      @Column(nullable = false)
      @Size(max = 100)
      private String password;
      }

    • @srinivastadimalla1232
      @srinivastadimalla1232 3 หลายเดือนก่อน

      @@TheDevWorldbySergioLema It is there Sir

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  3 หลายเดือนก่อน

      What's the order of the dependencies in your pom.xml?
      You must have Lombok first, then Mapstruct.
      Otherwise, Lombok won't create the getters and setters and Mapstruct won't see the fields

  • @ionguzun3952
    @ionguzun3952 ปีที่แล้ว

    Can u please do a full stack video with spring boot and angular?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      About which feature being developed? Because this is actually a fullstack video about Spring Boot and Angular creating a login form.

    • @ionguzun3952
      @ionguzun3952 ปีที่แล้ว

      @@TheDevWorldbySergioLema also if u can make the crud operations and routing

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      The CRUD operations are mainly backend.
      And the routing is mainly a frontend topic.
      Time ago, i've created two playlists, where I build a complete backend with Spring Boot and a complete frontend with React separatly.
      Check the backend playlist (th-cam.com/play/PLab_if3UBk9-TuyqwMy3JvNHeCh7Ll9Wz.html) and the frontend playlist (th-cam.com/play/PLab_if3UBk9-O8mjF8JyuK6_4j8G2UxUq.html).
      You can find how to create CRUD operations and create a routing strategy in React (sorry, I did nothing yet with Angular).

  • @phuccom3296
    @phuccom3296 ปีที่แล้ว

    when i login continuously, the tokens are generated continuously. So how to handle old tokens?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      You should:
      * first, create a logout to remove the token.
      * second, avoid the login if a token is already present in the local storage.

    • @phuccom3296
      @phuccom3296 ปีที่แล้ว

      @@TheDevWorldbySergioLema thank u so much and have a nice day

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Have a nice day too

  • @suraj9695
    @suraj9695 9 หลายเดือนก่อน

    Hi All getting thsi error node_modules/axios/index.d.ts(9,35): error TS1005: '(' expected.
    node_modules/axios/index.d.ts(9,36): error TS1135: Argument expression expected.
    node_modules/axios/index.d.ts(9,50): error TS1005: ')' expected.
    node_modules/axios/index.d.ts(10,1): error TS1128: Declaration or statement expected.
    node_modules/axios/index.d.ts(10,3): error TS1109: Expression expected.
    node_modules/axios/index.d.ts(10,28): error TS1109: Expression expected.
    node_modules/axios/index.d.ts(357,63): error TS1005: ',' expected.
    「wdm」: Failed to compile.any help will be appreciated

  • @gladymathew8002
    @gladymathew8002 ปีที่แล้ว

    Httpclient or axios is better

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว +2

      With Angular it's better to use HttpClient. This was the first time I've used Angular, so I've used the first library I know. Now that I've worked more with Angular, I prefer HttpClient

    • @梓翔-i8i
      @梓翔-i8i ปีที่แล้ว

      So appreciate to your work!!! But I have no idea how to code in HttpClient form😢,can you help me with some infomation or source code? Big thanks!

  • @phuccom3296
    @phuccom3296 ปีที่แล้ว

    thanks. But i can't access to your github project

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Oh, so sorry. I've created the tag in my laptop but never pushed it. It should work now.

  • @may1532
    @may1532 7 หลายเดือนก่อน

    Why are you not using dark mode ? my eyes are hurting

  • @tuguldurtuugii4135
    @tuguldurtuugii4135 ปีที่แล้ว

    mapstruct is not working in pom.xml. How can I fix that?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      You have to add both the Mapstruct and the processor dependencies, and active the pre-processing in your IDE

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      If you want more details, check this video, th-cam.com/video/7UC3ZjQnric/w-d-xo.html,

    • @tuguldurtuugii4135
      @tuguldurtuugii4135 ปีที่แล้ว

      Thank you. Now it works. But my UserService in backend giving me error that "Could not autowire. No beans of 'UserMapper' type found." How can I fix this problem?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      Great. Now ensure you have the following annotation in your mapper: @Mapper(componentModel = "spring")

    • @tuguldurtuugii4135
      @tuguldurtuugii4135 ปีที่แล้ว

      I have @Mapper(componentModel = "spring"). But its still doesn't work though.

  • @EternoEstudiante
    @EternoEstudiante ปีที่แล้ว

    Hola una consulta y los roles y permisos como se asocia a la tabla user?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  ปีที่แล้ว

      He hecho un video hace algun tiemo sobre los roles, deberías encontrar todo lo necesario, th-cam.com/video/ZBeyy4Q3nIw/w-d-xo.html

  • @TTT-gooo
    @TTT-gooo 8 หลายเดือนก่อน

    Helpful video thank u

  • @dmitryrakov4510
    @dmitryrakov4510 10 หลายเดือนก่อน

    Thanks a lot for this tutorial, It was very useful for me.
    Could you explain please if it is possible to refresh the expired token in this project or not? I found out that after the token expires I can't obviously login with the same username and password but also I'm not able to register a new user. There is always the same exception: 'com.auth0.jwt.exceptions.TokenExpiredException: The Token has expired on'. is it should be like this or I did something wrong?

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  10 หลายเดือนก่อน

      The project was not developed enough to handle all the cases. Let me update the source code in Github to almost handle the basic situations. And I'm preparing another video about the token refresh 😉

  • @srinivastadimalla1232
    @srinivastadimalla1232 3 หลายเดือนก่อน

    Hi Sir, the applicaiton back and front end are running now but.. not really sure why i am getting backend point not found.. where as I am able to hit the endpoint via Postman..nt_app_login_form_3_Template_app_login_form_onSubmitLoginEvent_0_listener @ content.component.html:8
    onSubmitLogin @ login-form.component.ts:29
    LoginFormComponent_Template_form_ngSubmit_11_listener @ login-form.component.html:17
    Zone - HTMLFormElement.addEventListener:submit (async)
    LoginFormComponent_Template @ login-form.component.html:15
    ContentComponent_Template

  • @christophercyriac1744
    @christophercyriac1744 7 หลายเดือนก่อน

    I am getting this error message back when i try to run in Intellij at 33 minute mark: Service\UserService.class]: Unsatisfied dependency expressed through constructor parameter 0: No qualifying bean of type 'com.scaweb.customerPortal.Repositories.UserRepository' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {}

    • @TheDevWorldbySergioLema
      @TheDevWorldbySergioLema  7 หลายเดือนก่อน

      Does your repository extends JpaRepository? Is it an interface? Do you have a correct injection method in the service (by constructor or using the Autowired annotation)?