All language subtitles for 018 Sign Up With Email and Password_en

So let's open our sign in and sign up component.

Let's import our new sign up component into this component components sign up, sign up component.

And then let's just place it underneath our Sinon.

Now, in order for our component to sit side by side, we need to apply some styles.

So let's go to our stylesheet.

And let's do sign in and sign up class with the style where the width is eight hundred and fifty pixels.

And then we want to display a flex.

And we want to justify content space between.

And then we want to also make it so that our margin on the left and the right is automatic, so we'll

do a margin top and bottom of, let's say, 30 pixels for now.

And then Otto, and now if we save and we go back to our component.

We see that we have our sign in and sign up now.

Now.

Let's actually see if we're actually saving this user profile the way that we expect it to.

Let's go to our abcess and let's just console log the state whenever it changes.

And now let's open up our terminal.

So we currently have a user, right, we have our current user, which is set to this oh, and then

we have a user being set, we might have accidentally did this.

Oh.

We've got to change this current user.

It's a little mistake we made earlier.

OK, so now our current user is set because we are signed in, so let's sign out.

That's refresh and now let's create our new account.

So I'm going to use, let's say, just a random account, it doesn't actually matter what's wrong,

value display name.

I'm going to call me Mike.

I'm going to use Michael at Gmail.

Dot com password will be one, two, three, four, one, two, three, four.

And then one, two, three, four.

Now, let's say if we try it right, if we have the wrong password, we'll get the alert that says passwords

don't match, which is what we want.

So one, two, three, four, four, correct password.

And now if we hit, sign up.

We've got a 400 off operation not allowed.

We did not enable email and password in our authentication.

So just as we did earlier with the Google Sinon, we got to do the same thing with our e-mail and password.

So here we just have to enable it.

And we just had save email link, password list will actually send an email to that email that they

provide and then if you click confirm, it will automatically authenticate them.

But we don't want that.

So let's.

And there we go.

If I fired a couple of times, right, but there is our current user object created app, they use a

different timestamp than are created date object.

Right.

But there we go, display name, email and then the ID.

And now if we look inside of our database, right.

If we look in our off, let's not look at our database here in our auth, we see that we have this Michael

user where the provider they signed in with was the email.

But if we check our database, we'll see that we now have a third user, which is the one that we just

made right here.

Let's just delete this user that we wrote manually, and we can do this by hitting right here.

DeLay document.

This is for the user that we manually created.

And now we have two users, one created by our email and password and one created by Google.

Now let's commit our code before we finally implement Sinon with email and password.

Now.

Let's check its status.

OK, let's get add all our stuff and we'll write a message that says.

Implemented Firebase, Utils included.

Ability to store authenticated users into our fire store database.

And that will push this up to master.

And continue with the next lesson.