Angular 15 Authentication (Registration + Login + Role based access) using JSON server REST API
Vložit
- čas přidán 9. 09. 2024
- #angular #angular15 #nihiratechiees
This video provides the steps for implementing Angular 15 Authentication.
It includes below topics
1, Registration & Login using JSON-SERVER API
2, Authentication with role based access
3, Enable user access/ role assignment by admin user
System requirement
=================
1, Install/Upgrade Node.js Latest version
* Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x
* In v15, Angular no longer supports node.js versions 14.[15-19].x or 16.[10-12].x.
2, Upgrade Angular CLI
npm uninstall -g @angular/cli
npm install -g @angular/cli
Application Setup
===============
1, Create application ng new Application name
2, Install Material UI ng add @angular/material
3, Install Toast Alert npm install ngx-toastr -save
4, Run Json-server API json-server --watch db.json
Reference Link
=============
1, Angular Upgrade guide
update.angular...
2, Node.js
nodejs.org/en/
GitHub Link for sourcecode
=======================
github.com/nih...
Join this channel to get access to perks:
/ @nihiratechiees
I wanted to express my gratitude for this excellent video you've provided. Thank you for sharing such valuable content.
You're very welcome!
Thanks a lot for uploading using Json-server API 😄
Welcome🎉
Thanks, Mate! Amazing tutorial!
Thanks👍
Thanks so much Bro! It's just what i need to start my project !!
Great👏
Me ha parecido un tutorial muy bueno y muy completo, darte las gracias por tu tiempo, saludos desde España.
Thanks❤🙏
Many thanks for this tutorial, very helpfully !
Great👍
Thanks bro . I followed your tutorial It helps me well
Glad to hear👍
thank you, you have helped me a lot, greetings from Bolivia...
Glad to hear👍
informative tutorial thank you for shearing it
Glad to hear👍
Thank you so much for your sharing knowledge it is helpful in my interview as well
Great👍
excellent, thanks😊👏👏👏
Thanks🙏
Great content, Thank you👊
Thanks🙏
A very useful tutorial
Thanks
Amazing sir
Thanks
Ottimo tutorial. Grazie
Thanks
Great tutorial. thanks
Thanks🙏
Great! Thank you!
Thanks
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.
Follow below video you will get most of the topic in angular
czcams.com/video/rZCQiMdQsxE/video.html
NGRX (same as REDUX) playlist
czcams.com/play/PLfyWdpsiUiPC7bHmDDDM6gGgfo3mgMCAC.html
Its a wonderful video thanks for the effort. Only one request from my side is do the authentication and authorization using jwt.
Jwt video already I have done. Can you check my angular authentication playlist
Nice!
Thanks
Muchas gracias Mister Nihira por compartir conocimiento....
Thanks
If possible please make a detail video on 'how to write test cases' like this video please......
Sure will do soon
Very nice ❤❤❤
Thanks
Good Tutorial 👍🏻
Thanks❤
Thanks.
Welcome
Thanks for this tutorial. Can you also implement Auth Guard for the login part?
Sure will add in the upcoming videos
Your video is so helpful and I have one que, join option is there right, why it is , is there any tutorial videos available?
Join option? Can you share the time stamp I used
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
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
Would be better if you can create a video for interceptor as well with complete authentication and authorization
May be in future
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
Noted your suggestions, will include future video
In my code, when I use auth guard in that file, it shows 'canactivate' is deprecated.
czcams.com/video/1FgSlvsywXg/video.html
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
Do you have any additional css Or bootstrap in your project?
Yes i do@@NihiraTechiees
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},
Can you share what url you provided and your route values.
Better share details to my email
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
Don't have enough time bro, will consider your request soon
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?
Actually I am not added class. I just did in the dynamic manner (based on Formcontrol data formated)
Sir "json-server --watch db.json" when i enter this command its shows not recognised. Should I install json first??
Yes
Authgaurd not. Working sir, class constructor authgaurd cannot be invoked without new
czcams.com/video/1FgSlvsywXg/video.html follow this video
Hi, What would be the role name to add Customer detail? I am getting error "you are not authorized to access."
Follow the video hope you will get the information.
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
czcams.com/video/jrp1djz0H6E/video.html
Thanks for the video. But not getting through authentication. while submitting the login form, getting "An error occurred during registration."
What error you received?
@@NihiraTechiees CanActivate is deprecate in latest version, so can you please update the solution, thanks in advance.
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.
Will check, design point of view I am also not familier
@@NihiraTechiees Regardless, this a great video! I have learned a boatload.👍👍👍
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?
Ok let me check will update you by tonight
@@NihiraTechiees Hi , did you got the issue?
First comment
💪🤝👍
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?
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
canActivate is deprecated .. how to solve this?
What is your angular version?
@@NihiraTechiees Angular CLI: 15.2.7
Node: 18.16.0
Package Manager: npm 9.5.1
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;
};
Users can overwrite key values at session storage. How can can you protect against it?
If security is the concern we can encrypt and store
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?
Could you confirm whether register data stored in json file
@@NihiraTechiees no it is not storing in json
Hi bro , can you make video on authorization in lambada in aws gateway with angular integration
Sure will do in future
My error is not recognized for internal external command how to add
Could you share more details to my email
I am getting the error for the ' localhost:3000'. Err_connection_refused
May the the port number already in use so try with other port number ex. 8000
Hi bro , can you make video on authorization in CASL with angular integration?
I am not familier in CASL, will try
Bro, Why we are using FormBuilder instead of FormGroup and FormControl. Is there any advantages?
Form builder is abstract of form group, control, array. Instead of creating new object of all items we can use form builder instance
am submitting the registration details its not storing them in the db
why?
Can you debug, where it's lost the data. Also check if any issues
Hi bro, I tried your guidelines, but stuck in datasource in mattable is not working
Chek material ui version in package.json and confirm have you imported mattablemodule
13:33 ---- Error: Can't resolve 'node_modules/ngz-toastr/toastr.css' in 'D:\angular\first'
Did you installed toaster package
@@NihiraTechiees yes resolved
@@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
Same submit button isn't working
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
Will cover this concept in one of the upcoming crud video
@@NihiraTechiees Thank you!!
SIR I WRITE SAME CODE BUT MY USER DOESNOT UPDATE it give error For url ?
Why can you explain plzzz
Put console.log and find where it's breaking
console Is working When A establish Role Then giving this error
how to change the login form, so i can login with the name, not the id?
Create model class before sending to api comvert form value into this model format
@@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?
Will it work using Angular16 actually data is not adding after clicking submit btn
It will work. Can check step by step you missing data?
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 .
problem solved
Great👍. Ng g c register. Even I too typed wrongly
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.
Can you share the data you passed and reactive form declaration
@@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
@@NihiraTechiees I think problem is with the password field. after entering proper password the field still looks red color.
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
@@NihiraTechiees yes its working, i removed password validation, but why the problem with validation?
how to i add menu in json array in this project
You can keep in array. Based on the data we can generate menu dynamically
Very good work.
Can I have your Backend code of angular application.
Backend use json server api (it's kind of fake api)
@@NihiraTechiees okay thanks you
toast notifications are not working for me :(
Have you followed all steps?
@@NihiraTechiees I had to add some lines in app.config and now is working
How to add the jaon server in vs code
Install the json server via npm command
if you add user password in json server , any one can view the data in jason server , so is this safe ?
Json server is kind of fake api (only used for study or development). Real-time you have to use separate api
@@NihiraTechiees oh okay, so I have to use something like MySQL and all
You need to hash the password
@@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
@@new_contents_all_day Welcome to full-stack programming where that's standard practice.. You can use the bcrypt library for hashing your passwords
can i contact with you by phone for some problem about Angular!! please
Share your number
sessionStorage geting null vale? pls help sir
Did you set the value in session
@@NihiraTechiees
Thanks for your reply sir,
I am new to angular, I just follow your steps. How to set the value in session?
Ok can you share the files to my mail. I will check and let you know by tmrw
@@NihiraTechiees
Sorry sir, I re-watched full video, i missed the portion where the setItem.
Thanks for your valuable time..
where i can get BE api source code
This video I used json- server api(fake api) it's just json file
first which password use
What password you used while register
PUT /user/[object℅20Object] 404
Why it's object%20 it should some value
please give me source code sir
Check GitHub link in description
Show
Is it helpful for you?
@@NihiraTechiees yes, very
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
While install use the specific version.... Look like version conflict
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);
Can you confirm your API returning data? If yes what value you getting console.log(this.userdata).
Json server not starting. Please help!!
What error you got?
I follow your code but user registration form (submit) is not taking any value. Why it is so Answer please
Is your screen refreshed after you submit?
@@NihiraTechiees yes brother. Now it works
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.
It's dummy api also need to be running mode. Just running -- watch command is fine not required to open url in browser
@@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?