Angular 15 Authentication (Registration + Login + Role based access) using JSON server REST API

[@inesriahi2144]

I wanted to express my gratitude for this excellent video you've provided. Thank you for sharing such valuable content.

[@NihiraTechiees]

You're very welcome!

[@StorytimewithHumi]

Thanks a lot for uploading using Json-server API 😄

[@NihiraTechiees]

Welcome🎉

[@antoniocpjunior]

Thanks so much Bro! It's just what i need to start my project !!

[@NihiraTechiees]

Great👏

[@saminserge2674]

Many thanks for this tutorial, very helpfully !

[@NihiraTechiees]

Great👍

[@anmasa]

Me ha parecido un tutorial muy bueno y muy completo, darte las gracias por tu tiempo, saludos desde España.

[@NihiraTechiees]

Thanks❤🙏

[@cassianopacheco5407]

Thanks, Mate! Amazing tutorial!

[@NihiraTechiees]

Thanks👍

[@gayankavinda9757]

Thanks bro . I followed your tutorial It helps me well

[@NihiraTechiees]

Glad to hear👍

[@dharmendraputtu9286]

Thank you so much for your sharing knowledge it is helpful in my interview as well

[@NihiraTechiees]

Great👍

[@愛-i7y8j]

thank you, you have helped me a lot, greetings from Bolivia...

[@NihiraTechiees]

Glad to hear👍

[@akadeadahot7067]

informative tutorial thank you for shearing it

[@NihiraTechiees]

Glad to hear👍

[@mbuachege7639]

Great content, Thank you👊

[@NihiraTechiees]

Thanks🙏

[@FullStackDevGreg]

Great video to get start with Angular. I'm from React/Nextjs I'm thinking of learning angular as well. my overall impression is that the learning curve seems no too stip, Please can you advise me other tutorial on how to work with, dynamic routing, internationalisation routing, redux(observable) thank you in advance.

[@NihiraTechiees]

Follow below video you will get most of the topic in angular kzbin.info/www/bejne/qIumgpyDmbamrqc NGRX (same as REDUX) playlist kzbin.info/aero/PLfyWdpsiUiPC7bHmDDDM6gGgfo3mgMCAC

[@funcoding1797]

excellent, thanks😊👏👏👏

[@NihiraTechiees]

Thanks🙏

[@bangyuliang]

A very useful tutorial

[@NihiraTechiees]

Thanks

[@dattatreyakulkarni541]

Your video is so helpful and I have one que, join option is there right, why it is , is there any tutorial videos available?

[@NihiraTechiees]

Join option? Can you share the time stamp I used

[@weixiangng8279]

Thanks for this tutorial. Can you also implement Auth Guard for the login part?

[@NihiraTechiees]

Sure will add in the upcoming videos

[@saiyathuabdulvahafj2176]

Its a wonderful video thanks for the effort. Only one request from my side is do the authentication and authorization using jwt.

[@NihiraTechiees]

Jwt video already I have done. Can you check my angular authentication playlist

[@josbexerra8115]

Muchas gracias Mister Nihira por compartir conocimiento....

[@NihiraTechiees]

Thanks

[@arshathjm]

Great tutorial. thanks

[@NihiraTechiees]

Thanks🙏

[@vittorioeselik8022]

Ottimo tutorial. Grazie

[@NihiraTechiees]

Thanks

[@biplabsharma5344]

Amazing sir

[@NihiraTechiees]

Thanks

[@anabolovic643]

Great! Thank you!

[@NihiraTechiees]

Thanks

[@keshav2kumar]

If possible please make a detail video on 'how to write test cases' like this video please......

[@NihiraTechiees]

Sure will do soon

[@michaelacevedo172]

Hi tankyou it is really usefull, but i have a mistake, the inputs form are aligned one after the other, i dont know if you gave some class to this?

[@NihiraTechiees]

Actually I am not added class. I just did in the dynamic manner (based on Formcontrol data formated)

[@VijayKumar-fq4ie]

Good Tutorial 👍🏻

[@NihiraTechiees]

Thanks❤

[@Abdul-AzeezAhmed]

I tried to use Angular material in a diffrent project to pop up a dialog component but it did not pop up at the center it was showing beneath the entire content of the component that trigers the pop up dialog and i followed the same steps like you did in this tutorial

[@NihiraTechiees]

Do you have any additional css Or bootstrap in your project?

[@Abdul-AzeezAhmed]

Yes i do@@NihiraTechiees

[@avani1511]

This tutorial was amazing! Helped me out a lot with my personal project. However there's just one thing I can't seen to get right .The username is being attached to the apiURL and i'm getting a 404 not found. How can I fix this? I would like for when the user logs in and submits the form for the url capture the ID as this is how my routes are set up. {path: 'cat/:id', component: CatUserProfilePageComponent},

[@NihiraTechiees]

Can you share what url you provided and your route values. Better share details to my email

[@sangamithrapc6141]

Sir "json-server --watch db.json" when i enter this command its shows not recognised. Should I install json first??

[@NihiraTechiees]

Yes

[@sunnygupta4201]

is there any video on duplicate email validation. like when yours is entering duplicate email then it will verify from db and give alter that this email is already exist

[@NihiraTechiees]

kzbin.info/www/bejne/oKPTYpegr5V7bKc

[@Jet-jet-xb8hy]

Good tutorial, but you forgot to add error catcher in the log in. What if the user didn't register and tried enter credentials that is not yet created or registered. thank you

[@NihiraTechiees]

I got your point, but when I was planning this video it's just basic crud video. then just changed into basic registration. Upcoming videos will consider all real time facts

[@brogidey860]

Good tutorial bro.. It would be very helpful if you can make a tutorial on how to preview and confirm form data before submitting it to the server in angular. Thank you for this tutorial

[@NihiraTechiees]

Noted your suggestions, will include future video

[@Gyannea]

Do you have any idea why the login screen does not respond correctly to reducing the size of the browser? When decreasing the horizontal width, the right side gets cut off. The left side does fine. I have tried all kinds of FlexBox directives (which seem to work) but I can't get the cards to shrink monotonically. The right side always gets cut off.

[@NihiraTechiees]

Will check, design point of view I am also not familier

[@Gyannea]

@@NihiraTechiees Regardless, this a great video! I have learned a boatload.👍👍👍

[@connectingdots0-0]

Hi, What would be the role name to add Customer detail? I am getting error "you are not authorized to access."

[@NihiraTechiees]

Follow the video hope you will get the information.

[@ranjithanaikp]

Hi, I have followed your tutorial. Till the updatepopupcompoentn its working fine, but while updating the isactive checkbox auto check is not working, and also unable to update also, its throwing 404 error on clicking update button could you please tell me where i may went wrong?

[@NihiraTechiees]

Ok let me check will update you by tonight

[@ranjithanaikp]

@@NihiraTechiees Hi , did you got the issue?

[@premkishore7902]

Thanks for the video. But not getting through authentication. while submitting the login form, getting "An error occurred during registration."

[@NihiraTechiees]

What error you received?

[@premkishore7902]

@@NihiraTechiees CanActivate is deprecate in latest version, so can you please update the solution, thanks in advance.

[@chennaack996]

Bro, Why we are using FormBuilder instead of FormGroup and FormControl. Is there any advantages?

[@NihiraTechiees]

Form builder is abstract of form group, control, array. Instead of creating new object of all items we can use form builder instance

[@leenuslee]

Nice!

[@NihiraTechiees]

Thanks

[@shreeyapatil2308]

In my code, when I use auth guard in that file, it shows 'canactivate' is deprecated.

[@NihiraTechiees]

kzbin.info/www/bejne/Z3fKhJ-sqN6qjsk

[@dheerajraja9811]

Would be better if you can create a video for interceptor as well with complete authentication and authorization

[@NihiraTechiees]

May be in future

[@mohiburrahman5639]

hello can you make a video for radio button and text area display in console without button .use only click radio button. like 1st radio button is yes and the same line text area. but only one click for both. thank you

[@NihiraTechiees]

Will cover this concept in one of the upcoming crud video

[@mohiburrahman5639]

@@NihiraTechiees Thank you!!

[@keshav2kumar]

Very nice ❤❤❤

[@NihiraTechiees]

Thanks

[@anchalpatel10]

At 30:17 when i am clicking on submit then neither it is submitting and nor it is navigating to login . I have all previous steps , they all the correct. How can i solve this?

[@NihiraTechiees]

Could you confirm whether register data stored in json file

[@anchalpatel10]

@@NihiraTechiees no it is not storing in json

[@siddhantthorat3269]

Authgaurd not. Working sir, class constructor authgaurd cannot be invoked without new

[@NihiraTechiees]

kzbin.info/www/bejne/Z3fKhJ-sqN6qjsk follow this video

[@Gyannea]

I do not understand regex at all, but I think you said at least 8 characters and at least one upper case, lower case, number, and special character. But if I start my password with a number the validator regex fails. If I don't start with a number, I can create a password that passes. What can I do to allow a password to start with a number?

[@NihiraTechiees]

Honestly I am also not good making regax. I just used pattern that i got from google search. In your case just browse you can generate regax through online based on the requirements. Else watch some regax basics video

[@mr_umairkhan07]

SIR I WRITE SAME CODE BUT MY USER DOESNOT UPDATE it give error For url ? Why can you explain plzzz

[@NihiraTechiees]

Put console.log and find where it's breaking

[@mr_umairkhan07]

console Is working When A establish Role Then giving this error

[@janoshollosi9570]

Users can overwrite key values at session storage. How can can you protect against it?

[@NihiraTechiees]

If security is the concern we can encrypt and store

[@ranjithanaikp]

HI, I have folowed your tutorial, after creating complete registration, when clicked on submit, its going to else part, showing please enter valid data, please help me with this code.

[@NihiraTechiees]

Can you share the data you passed and reactive form declaration

[@ranjithanaikp]

@@NihiraTechiees export class RegisterComponent implements OnInit { constructor(private _formBuilder: FormBuilder, private _toastr: ToastrService, private _authService: AuthService, private router: Router) { } ngOnInit(): void { } registrationForm = this._formBuilder.group({ id: this._formBuilder.control('', Validators.compose([Validators.required, Validators.minLength(5)])), name: this._formBuilder.control('', Validators.required), password: this._formBuilder.control('', Validators.compose([Validators.required, Validators.pattern('(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![. ])(?=.*[A-Z])(?=.*[a-z]).*$"')])), email: this._formBuilder.control('', Validators.compose([Validators.required, Validators.email])), gender: this._formBuilder.control('male'), role: this._formBuilder.control(''), isActive: this._formBuilder.control(false), }) proceedRegistraion(){ if(this.registrationForm.valid){ this._authService.proceedRegister(this.registrationForm.value).subscribe(data=>{ console.log("success") this._toastr.success('Please contact admin for enable access','registered successfully'); this.router.navigate(['login']) }) } else{ console.log("failure") this._toastr.warning("Please enter valid data") } } } form: username Name Password Email Male Female Submit Back to Login

[@ranjithanaikp]

@@NihiraTechiees I think problem is with the password field. after entering proper password the field still looks red color.

[@NihiraTechiees]

I hope we used pattern validation for password so time being remove pattern validation. I will verify pattern validation if any findings share with you. If possible try to join the membership

[@ranjithanaikp]

@@NihiraTechiees yes its working, i removed password validation, but why the problem with validation?

[@av_0211]

13:33 ---- Error: Can't resolve 'node_modules/ngz-toastr/toastr.css' in 'D:\angular\first'

[@NihiraTechiees]

Did you installed toaster package

[@av_0211]

@@NihiraTechiees yes resolved

[@av_0211]

@@NihiraTechiees 31:33 my form is not submitting. sumbit button is not working and getting data in db.json as well.. can't see registered successful message

[@shraddhachaudhari7842]

Same submit button isn't working

[@shraddhachaudhari7842]

Will it work using Angular16 actually data is not adding after clicking submit btn

[@NihiraTechiees]

It will work. Can check step by step you missing data?

[@karthick.b5071]

Hi bro, I tried your guidelines, but stuck in datasource in mattable is not working

[@NihiraTechiees]

Chek material ui version in package.json and confirm have you imported mattablemodule

[@archanabarsagade2699]

canActivate is deprecated .. how to solve this?

[@NihiraTechiees]

What is your angular version?

[@archanabarsagade2699]

@@NihiraTechiees Angular CLI: 15.2.7 Node: 18.16.0 Package Manager: npm 9.5.1

[@NihiraTechiees]

Sorry for the late reply from angular 15.2 canActivate deprecated so we have to use CanActivateFn follow the below code export const auto1Guard: CanActivateFn = (route, state) => { return true; };

[@ichraknajar91]

hello sir i dont know why but i have a problem while executing this command ng c register (Error: This command is not available when running the Angular CLI outside a workspace.) just in this project but in other anglar project its working .please some help .

[@ichraknajar91]

problem solved

[@NihiraTechiees]

Great👍. Ng g c register. Even I too typed wrongly

[@DINESHKUMARC-sp4lq]

sir pls upload all type of videos in tamil tamil la English's videos irrugu but tamil la videos illa pls consider this one and pls upload tamil

[@NihiraTechiees]

Don't have enough time bro, will consider your request soon

[@earvinemunene1744]

am submitting the registration details its not storing them in the db why?

[@NihiraTechiees]

Can you debug, where it's lost the data. Also check if any issues

[@rashmitakamble5843]

I am getting the error for the ' localhost:3000'. Err_connection_refused

[@NihiraTechiees]

May the the port number already in use so try with other port number ex. 8000

[@jhonnidarshan3094]

Hi bro , can you make video on authorization in lambada in aws gateway with angular integration

[@NihiraTechiees]

Sure will do in future

[@MalikKamranKhalil]

Hi bro , can you make video on authorization in CASL with angular integration?

[@NihiraTechiees]

I am not familier in CASL, will try

[@HtooA-h2i]

Thanks.

[@NihiraTechiees]

Welcome

[@durga.k.b.durga.kb.8941]

My error is not recognized for internal external command how to add

[@NihiraTechiees]

Could you share more details to my email

[@new_contents_all_day]

if you add user password in json server , any one can view the data in jason server , so is this safe ?

[@NihiraTechiees]

Json server is kind of fake api (only used for study or development). Real-time you have to use separate api

[@new_contents_all_day]

@@NihiraTechiees oh okay, so I have to use something like MySQL and all

[@superuser8636]

You need to hash the password

[@new_contents_all_day]

@@superuser8636 bro, yeah I thought about it, we need a whole server running in another port and angular running in separate port , the whole db logic must run in server .. but this is very cumbersome

[@superuser8636]

@@new_contents_all_day Welcome to full-stack programming where that's standard practice.. You can use the bcrypt library for hashing your passwords

[@davebudah]

First comment

[@NihiraTechiees]

💪🤝👍

[@serignecheikhahmettidianes7085]

Very good work. Can I have your Backend code of angular application.

[@NihiraTechiees]

Backend use json server api (it's kind of fake api)

[@serignecheikhahmettidianes7085]

@@NihiraTechiees okay thanks you

[@mohiburrahman5639]

can i contact with you by phone for some problem about Angular!! please

[@NihiraTechiees]

Share your number

[@christopher.r0104]

how to i add menu in json array in this project

[@NihiraTechiees]

You can keep in array. Based on the data we can generate menu dynamically

[@noraitafti74]

toast notifications are not working for me :(

[@NihiraTechiees]

Have you followed all steps?

[@noraitafti74]

@@NihiraTechiees I had to add some lines in app.config and now is working

[@ananthualpd]

sessionStorage geting null vale? pls help sir

[@NihiraTechiees]

Did you set the value in session

[@ananthualpd]

@@NihiraTechiees Thanks for your reply sir, I am new to angular, I just follow your steps. How to set the value in session?

[@NihiraTechiees]

Ok can you share the files to my mail. I will check and let you know by tmrw

[@ananthualpd]

@@NihiraTechiees Sorry sir, I re-watched full video, i missed the portion where the setItem. Thanks for your valuable time..

[@durga.k.b.durga.kb.8941]

How to add the jaon server in vs code

[@NihiraTechiees]

Install the json server via npm command

[@vaibhavlande7829]

where i can get BE api source code

[@NihiraTechiees]

This video I used json- server api(fake api) it's just json file

[@shudhakarkumargupta7236]

first which password use

[@NihiraTechiees]

What password you used while register

[@mr_umairkhan07]

PUT /user/[object℅20Object] 404

[@NihiraTechiees]

Why it's object%20 it should some value

[@hugosilva-kg6vr]

Show

[@NihiraTechiees]

Is it helpful for you?

[@hugosilva-kg6vr]

@@NihiraTechiees yes, very

[@Shubhamindory]

please give me source code sir

[@NihiraTechiees]

Check GitHub link in description

[@atozupdates-telugu3120]

sir, can't install ngx-toastr it does not install it shows an error, icant understand . what can i do please clarify my doubt here is my issue : D:\sai-angular-practice\veeru_workspace>npm install ngx-toastr -save npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: veeru-workspace@0.0.0 npm ERR! Found: @angular/common@15.2.10 npm ERR! node_modules/@angular/common npm ERR! @angular/common@"^15.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/common@">=16.0.0-0" from ngx-toastr@17.0.2 npm ERR! node_modules/ngx-toastr npm ERR! ngx-toastr@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\91961\AppData\Local pm-cache\_logs\2023-10-18T16_54_38_869Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\91961\AppData\Local pm-cache\_logs\2023-10-18T16_54_38_869Z-debug-0.log idont understand my problem , please solve this

[@NihiraTechiees]

While install use the specific version.... Look like version conflict

[@thotcher9706]

how to change the login form, so i can login with the name, not the id?

[@NihiraTechiees]

Create model class before sending to api comvert form value into this model format

[@thotcher9706]

@@NihiraTechiees ok ty, what should i do when i want to insert the users data into a postgresql/any sql database when a registration is made?

[@mathipamakgato]

Firstly thank you very much for the great tutorial, I seem to have an issue on the below code while trying to login, "this.userdata" is undefined but I do have the data from the db.json file futhermore when debugging I can see the username value going to the service. Please help!! if (this.loginform.valid) { this.service.Getbycode(this.loginform.value.username).subscribe(res => { this.userdata = res; console.log(this.userdata);

[@NihiraTechiees]

Can you confirm your API returning data? If yes what value you getting console.log(this.userdata).

[@Mst.EshitaKhatun-y7u]

I follow your code but user registration form (submit) is not taking any value. Why it is so Answer please

[@NihiraTechiees]

Is your screen refreshed after you submit?

[@eshitashimu3906]

@@NihiraTechiees yes brother. Now it works

[@Mst.EshitaKhatun-y7u]

If I do not run in json server in the browser at that time input value (registration/ login) is not submitting. why it is so?? If I run json server in the browser at that time it works fine. please let me know the actual issue for this.

[@NihiraTechiees]

It's dummy api also need to be running mode. Just running -- watch command is fine not required to open url in browser

[@Mst.EshitaKhatun-y7u]

@@NihiraTechiees One more queries: Toastr is not working properly. it just only shows the messages in left bottom position but not any block box with color. Currently I am using angular cli 15.2.3 and ngx-toastr 16.1.0 Additionally I followed all the set up for displaying toastr but its not working properly. Please let me know why it is so?

[@harshavardhanpatekar5697]

Json server not starting. Please help!!

[@NihiraTechiees]

What error you got?