Made withAngularClip

Angular Login and Signup Page | Local-Storage | angular tutorial | angular tutorial for beginners

L

LEARNING PARTNER

Creator on the Angular channel

Watch on YouTube ↗

143K viewsOct 27, 202214:55 runtime

Learn to build a complete Angular login and signup page from scratch. This comprehensive tutorial guides you through creating the UI with an HTML template, managing state with template-driven forms, and binding data using ngModel. You'll implement signup functionality by saving…

Chapters

#angular#clip#frontend

Project Overview

This video tutorial demonstrates how to build a functional Login and Signup page in Angular. It uses a pre-built HTML/CSS template and leverages browser local storage for data persistence, simulating a backend for a client-side only application.

Data Models & State Management

Two primary objects are created to manage the state of the forms:

signUpObject: Bound to the signup form, containing username, email, and password.
loginObject: Bound to the login form, containing username and password.
signUpUsers[]: An array to store all registered user objects.

Tip
While the tutorial uses any for simplicity, it's best practice to create strongly-typed class or interface definitions for your data models.

Form Binding

Template-driven forms are used to connect the HTML inputs to the component's data models.
The ngModel directive is used for two-way data binding.

Important
To use ngModel, you must import FormsModule into your app.module.ts and add it to the imports array.

Sign Up Logic

The onSignUp() method is triggered on form submission.
The current signUpObject is pushed into the signUpUsers array.
The entire signUpUsers array is stored in local storage.
localStorage.setItem('key', value) is used to store the data.
The array is converted to a string using JSON.stringify() before being stored, as local storage only accepts string values.

Login Logic

The onLogin() method is triggered on login submission.
It uses the JavaScript array.find() method on the signUpUsers array.
It searches for an object where both the username and password match the values from the loginObject.
If a user is found, a success message is shown. Otherwise, a "wrong credentials" error is displayed.

Important Concepts & Fixes

Data Persistence with `ngOnInit`

On component initialization (ngOnInit), the application checks local storage for existing user data.
If data is found with localStorage.getItem('key'), it's parsed back into a JavaScript object using JSON.parse() and used to populate the signUpUsers array. This ensures user data persists across page reloads.

Fixing a Data Reference Bug

Problem: When signing up multiple users, all entries in the signUpUsers array were identical to the last user added.
Cause: The signUpObject was being pushed by reference. Without being re-initialized, subsequent changes to the form fields also modified the object already in the array.

Solution: After pushing the object to the array, re-initialize the signUpObject to a new, empty object. This breaks the reference and ensures each signup is a unique entry.

// Inside onSignUp()
this.signUpUsers.push(this.signUpObject);
// ... store in localStorage ...
this.signUpObject = { username: '', email: '', password: '' }; // Crucial fix!

Project Introduction & Setup

Welcome back to Learning Partner. So in this video we are going to see login and sign up page again with Angular only. So this is the normal template I have downloaded from Google only. So let's see how I have come to this page. Simply I have searched login page HTML CSS then we have a site that freefrontend.com. So if we go to that we have found this example. Okay the code is already ready. I just have, we just have to copy paste it. Okay, it's just a CSS and HTML and if you copy paste it in your component you will get the same output. Okay, so let's get started. Uh so far we are not integrating it with this any API so simply we are going to store the data into the local storage, means whenever user is logged in, user is signing up we will store the user's array like how many users do the sign up into the local storage and while login we will just simply check for the user credential into that local storage array. Okay?

So let's get started. First we need to create an array to store the signup user, so signUpUsers will be my variable name. That will be again any of errors.

Instead of any you can create class or construct class or interface also based on the choice. Just to save the time I'm using, just make it in as any. Let's create an object which will which we will bind to the form that is signUpObject. Equal to curly bracket. So let's see how many fields we need. Let's go back to the browser. Okay, so in sign up we need username, email and the password. So let's create an object of for these three properties.

Username, email, and password. Okay, so these three things we need. Then let's create an object for the login also. So loginObject: any = {}. Then we have username and password. So on login we just need the two fields so we are creating a second object for that. Let's get rid of the email. Okay, so we have our array ready, then signUpObject is also ready and loginObject is also ready.

Binding Form Inputs with ngModel

Next thing is we have to bind this to our form using ngModel. So sign up object. So here you can see we have got two forms, one is the sign up form and second is the login form. So here we can use the ngModel, that is banana bracket, and we have to bind our model dot particular field name. Username. Let me just copy paste the basic things. Email, username and password. It's better to copy paste so that we can, we won't make any spelling mistake. Okay, so our first task is completed. Next let's bind the login form also with the login object. It has only two fields: username and the password.

Okay, so I'm not covering the basic things like uh to use the ngModel you need FormsModule present in your app.module. Let's see how is that. Let's go to the FormsModule, app.module. In the app.module this should be FormsModule should be present okay? If this is not present in your app module then ngModel won't be recognized then you will have a compilation error. Okay so first thing you need to add the FormsModule in the app.module in the import section. Okay let's go back to our component.

So our ngModel we have binded. Next thing is like on sign up and on login button we need to write the events. So let's write those event.

onSignUp() and then onLogin(). Let's create these events. Same as second one, login also.

Okay, now on first things we will do is like on sign up. On sign up what we need to do? We need to store the information what what user will be provided into the local storage as in the array form. Okay? So for that first we need to store the data into the array. So for that this.signUpUsers.push(). So we are going to push the current object into our array, this.signUpObject.

Okay, next thing once we push the current object to the array, we have to store this array into the local storage. So localStorage.setItem(). That is the method we use to store the item. It has two parameters: first is the key and second is the value. signUpUsers, this will be our key. Then while storing the data into the local storage we have to convert the data into the string format, so we have to go for the JSON.stringify(), and we have to pass our array that is this.signUpUsers. Okay, so let's just see till this now. Let's save all and check it.

Okay. Let's open the console. In console we have one error, let's check it. Okay, it's nothing else. So let me clear the local storage first. Okay, providing username, email. We are not going to see the validation because now we are more mainly focusing on the login and the signup process. Okay, let's do a click on the sign up. Okay, so you can see once we clicked on the sign up, you can see in the local storage we have got the array.

Let's add one more record. Okay, let's do the sign up. Okay, so here you can see in the local storage area we have got two records, but let me check like why it is getting uh the old record got repeated. Okay, so for that, while storing the data we need to detach the array with our local object. So for that, let's create, let's okay.

So the issue what we face, like same data was getting replicated. So for that we just need to initialize our object. Okay, so let's just copy this signUpObject and let's initialize this once we push it. this.signUpObject. Let's remove this any. Let's save it and try to check now. The issue was like we didn't clear it or initialize this, so it was keeping the reference. Okay so this is the first user. Let's add the second one. Okay, so you can see in the local storage we have got separate elements. First user record is there and second record is there.

Reading Data from Local Storage on Init

Okay, now next thing is for the sign up, login. So on the login what we are going to do, we are going to read the data from that local storage and see if that whatever the user ID, email and the password is present or not. If it is there, instead of email we can make it as make it use of the username also. So we will check like if the provided username and password is there or not. If it is there then we will allow the user to log in so we will just simply show the alert message like user is successfully logged in and if the wrong password is there we will show the error in the alert box.

Okay, so let's on the login button we have what we are going to do on the page? Let's say, while sign up we have stored the data into the local storage right? And so and same data we are storing in the array also that is signUpUsers. So we have to check with this signUp array only. But if we refresh the page again we need to read it back. So on the ngOnInit we have to read the local storage data and push it, assign it to the signUpUsers array. So constant, so first we have to read the local storage data and put it in the constant, localData is equal to localStorage.getItem(). So while storing the data we had the method setItem, while reading the data we have the getItem okay. Then what this is, this was our key. Okay, then we have to add the if null check. If localData is not equal to null means if this particular key is present in the local storage then only we are going to execute the remaining statements. Then this.signUpUsers is equal to JSON.parse because while storing the data into the local storage we have converted that to the string so we have to again convert that into the array object, so we have to pass it localData.

Okay okay, so on the login what we need to do, we just need to run a query on signUpUsers. Okay. So in login page we have to write const isUserExist. const isUserExist is equal to this.signUpUsers.find(). Okay so find is a method where we can assume like only one record can be found with the matching conditions. So here we have to write the lambda expression. We have to compare with m dot that will be username equal to equal to this dot loginObject dot username which we will bind to the form, and and the second thing, password also we need to compare, m dot password is equal to loginObject.password.

Okay so this is how our whole condition will look like. From this array we are trying to find a particular user where username is this and password is also this. If we got the any particular records, we will get the record. If not, the isUserExist will be undefined. So let's add a condition for that. So if isUser not equal to undefined means we have got the user then we can show the alert box like user found, user logged in successfully. User logged in successfully. In else we can show the error like wrong credentials. Wrong credentials. Means if we don't find any matching user in this array so we can say like it is a wrong credential.

Okay, so let's let's just add a debugger and check it. We will check both the scenarios when once we pass the correct username and password and one where we provide the wrong details. Okay so let's check the local storage. So let's try the first one that is username is piyush as you can see in the bottom. Okay why we are getting the same data? Let's check the form. I think same name might be binded. Username is this and password is this. Okay because ngModel is same. Username, username field is there so we just need to change it. It was a password that's why once we change, once we are changing the first, same was replicating to the other text box. Let's click on the login. Username is piyush and password is one two three five. Okay you can see in the bottom. So let's click on the login. Okay, let's do the F10. One more time. Okay now if you hover on the isUserExist you can see the data what the current particular object we have got. If you see the login object, okay we have got the positioning password, we have got the password we have entered. Okay so in the signUpUsers, signUpUsers we have that record where username is this and password is this. Okay so we have said the isUserExist is not undefined means we have got the particular record. So we will show the alert. Okay let's try with the wrong password now. Let's try with the wrong password. Okay now let's see. Okay now if you check isUser is undefined because the password we have provided is wrong. See this is not the password we have in the array for that particular record, so we have got undefined. Okay so it will go to the else block.

Conclusion and Final Thoughts

So this is the way you have to perform the sign up and the login. Instead of local storage you have to use the API but the basic logic will be the same. Now instead of the local storage code and the reading part you just have to hit your API with provided input. Okay? So that's it with this current video. Next time again we will see the more exploring topic related to angular. Thank you. Please do subscribe and like my videos.