Firebase Authentication | JavaScript JOB READY Free Course (2025)

What's up? I'm, I'm Phil. Thanks for being here. I appreciate that. I do need share.

Oh, thank you.

All right, stuck. Today we're going to work on Firebase authentication, so hopefully you guys will learn something. I use Firebase all the time for all my projects as long and it's really good because it's a time saver, right? And like it helps speed up your processes. And then if it gets big, like people say they don't use Firebase because it's going to be like expensive or whatever, but if it ever gets too big, you have to roll out your own authentication or fork up the money. Right? But I mean, when you have that many users, you're probably, if you did it right, you're making enough money anyways.

So anyways, it's my two cents.

Am I sharing the right thing? No, I'm not. Stop sharing. Allow for one month.

Let's stop to share.

All right, so today we're going to build just a simple Firebase integration into the, into a react app I have, I pushed and stuff here. I'll just NPM run dev. I'll just show you guys what we're going to build.

Let me see here, close that.

And you guys can always ask questions in my chat window here. Local host 5173 and basically we have our Firebase app initiated inside of our main TSX here. And then we have our app TSX and let's just look at it real quick. So we have two things. We have a sign up user and then a login. So right now I just have these static strings here. I'll just make test one and then test one. So right now if you look at my Firebase console, I don't have anyone in here yet. And I'm gonna move this down here. Yeah, and then if I press sign up here, I'll get some kind of token and a new user will pop up into here. Test one at test test, get a user id and then I'll be able to log that guy in. And yeah, that's what we're going to do today.

And yeah, it'll be fun. Hold on.

This is our user that's coming in and every time we log in or.

Something we'll be getting our authentication changing.

All right, so let's get to it. Turn this guy off. So the first thing you want to do is sign up for Firebase. I already did it. I'm going to delete these users real quick. Lead account, Lead account. And what you do is you just basically you go to Firebase Console. Go to Firebase Console. Then you press Create new project and you just create one. And then you'll get this kind of, what is it? Dashboard here. And then you, you press Add app and then you add a web app or whatever. But I already added one. So I have this guy here and I look here, it gives me some kind of API key and stuff. And that's. And then you add that into your Firebase and it'll initialize it and. And then you. These are like all the services that Firebase provides. It provides something like Firestore, which is the. No SQL database. We can learn how to connect that later. But today we're going to focus on authentication and you can do a bunch of stuff. There's like cloud functions. One second.

Oh, crap.

And we have a bunch of stuff we can do here. So we're going to do the authentication part. And then one thing you have to turn on is like you have to add a new provider and email password and that'll be a little switch. But you turn that on and then whatever other ones you want to add you can add here, like Google, Apple or GitHub or whatever you want. And then there's also like other ones, like creating a custom token. Like in Korea we have. So the big messaging service in Korea is Kakotalk and they have their own authentication laid out. So you create a custom token to log in later. But today we're going to focus on email password and so create user with email and password and login with email and password. We're going to do it with React Invite. So let's get started. Well, so steps, you create your Firebase project, you create a web app, you get your keys and then you turn on authentication.

So let's get that going.

So I have a little read me. If you guys pull. We're going to do Firebase authentication. First step, get Firebase key and then put in the environment file and then you NPM install Firebase NPM install M so you can use the environment variables. And then we'll go over create user with email and password and sign in with email password. All right, so the first thing we'll do is NPM byte. Great. Byte at latest inside of this folder. So where we read this command is npm create byte@ latest, that's the newest version. And then the. The location of where you want it. So I want it in this folder. Firebase authentication. So I put a path of dot and then the template. So I'll use A typescript, React Typescript. I'll just press enter and I'll just.

Oh, crap.

Let me just copy paste, you guys. So I remove existing files and continue. Then it created a whole different project for me. I'll read the Readme here.

One second. Oh, oh, still here.

All right, so can we make it a little bit bigger?

Yeah, yeah.

Okay. There you go. Awesome. Thank you. Second. Yeah, all right. I just. All right, all right.

And then so at this point we'll have a full. Like, wait, oh, I got an NPM install. So NPM install and that's going to install everything in the package JSON, which is like the byte stuff, the dev dependencies. Just give that a second. And our node modules gets created and NPM run and our com. Our. Our command that we have is dev and that's going to run our project with vite. So NPM run dev and then we have our local host says it's running on 5173. Last week we did a vibe project as well. All client.

So.

You have a nice little counter app and everything will be in the SRC folder. Just going to delete everything here real quick.

Export, default function, app return.

Now we have hello world on our application. So now we need to kind of initially put the Firebase stuff inside and we need packages. So the Firebase auth. I do not have any payment method or anything connected to here. So buy docs, some API keys.

Just don't be a jerk.

I'll share it with you guys. Anyways.

Let'S see here.

So if I go here and I go to the one app and I go to the settings basically tells me NPM install Firebase and these are my keys. This is what I need right here. NPM install Firebase. So I know that we need two packages. So NPM install Firebase, Firebase is added. If I look at the package JSON, you'll see that Firebase got added into our dependencies and that's it, version 10.13.2. So if you ever look at the documentation, it'll be up to date probably. All right, now I do need the environment variables, so I'll NPM install M +D. The minus D capital D is a flag for dev dependency. So that is like our development dependencies for like when we're building other way you do it is like double slash, I think dev. All right, so now you'll see env here.

Cool.

So now let's figure out how to use that. I'm going to close some tabs and w Command W. Command W. I already set this up here, so I'm just going to use this one. And instead of here, I'll make a new file called M. I'll add these guys. And now we need to kind of connect our app to Firebase. I'm going to do it inside of the main tsx. Oh, that's in the complete. So I'm going to do it inside of the. Wait, why do I keep opening complete Firebase authenticity and let me open this.

Guy and.

I'll have to add a env file. Oh, it's already in here. All right, now that's where my ENV is and I'm going to just initiate in the Firebase.

Wait, why do I keep opening this one?

All right, main tsx. There we go. Now this console log init Firebase here and I'll rerun my project.

Whoops.

Press enter. I'll see my function going called init Firebase here. So now we need to figure out how to use those environment variables.

Right?

And I think like in other projects you could do like. I think it's just like const m equals require m config. Or you just run this on the.

Top of the file.

Or I think import m from M and then you run m.m.com config think and then we should have like access to process M file variables. Let's just check that. Oh, process is not defined.

Okay, well.

Yes, you cannot do it the old fashioned way. Refresh.

All right.

But this is not the way to do it in byte. So usually you do it like this inside of node JS or any other project. But we'll do it the byte way and we'll look it up. Invite use environment variables. Environment variables. So you use it with the import meta m. So let's check out this and see if that works. Console log Import meta m.

Import meta.

M let's see if we get a list of all the environment variables that we have. So.

We have.

We have some stuff here. Base URL dev, main mode prod, ssr.

See the prototype. All right, cool, thanks.

You're new here. Just click. Can you fill me in with a quick summary of what we, what we're building so I can follow along? Yes. So we're building just a simple React app with a Firebase authentication. So we're going to go over.

Let me see here.

Create user with email and password and sign in with email and password and we're going to stick it into the Firebase authentication SDK. Is that cool?

All right. Amazing.

All right, so I think we're at the environment variable that I wanted to use. And where's the env file anyways? Do you see the.m file in here? Oh, no, I never put it in.

I think you put it in a complete by accident.

All right.

There we are. Put it in here. And then if we refresh.

I'm going to put this. I'm put this over here. All right, so we see our environment variables here. So what we're going to need to do is kind of initiate it. So let's look at the Firebase docs. So you make the config and then you run initialize app. So let's do import initialize app from Firebase app. Let's call the const Firebase config equals. And then first thing we're going to need is API key. It's going to keep these empty. Just going to copy these keys here. Auth domain. They're all strings, project id, storage.

Storage.

Bucket and messaging.

Messaging.

Sender ID and app id. Now let's go back in the environment. Let's get these variables.

Do.

So import meta m byte. Holy bite API key.

Wait, those are long names.

Let's just copy. Let's use our copy paste. There we go.

And then just match him here. All right, cool.

And then we can just do const app equals or Firebase app equals initialize app. And then we'll just pass in our Firebase config. We'll use console log Firebase app equals.

Equals Firebase app.

And then we just export Firebase app from here. If we ever need, we need it. So we don't need to initialize it again. So just make sure everything's connected now. So now we see a log Firebase app, Firebase app implementation. And we have all our options like our API key Firebase auth. So everything's connected. So that's how you initialize the Firebase in our project. I like to do it in like the root of the project. Well, I gotta call. All right, so now everything is initialized here. So now we have to. Let's make it like a small little login screen or something. That'll be. I think that's what we need to do. So app I'll just do everything in app tsx. We'll set up react router if we have time at the end and context. So let's do something like see what CSS we have inside of here already. Index css. Do we have anything? Let's do setup Tailwind. I like Daisy ui Set up Daisy Daisy UI bytes. So install Daze UI as a Tailwind CSS plugin.

Hold on. React.

Just follow. Let's follow some cool stuff. So add Daisy UI to config tail and plugin.

Let's see. React, byte. All right, all right.

So maybe we just do like this. Not the greatest at css. So I did do a bunch of CSS last night though. I finished, I think I finished the Chatbot UI yesterday. I was up late.

Nice.

Yeah. All right.

And then it says add install. So I think we first need to install Tailwind. So let's do that first. Byte Tailwind react setup. Let's go here. Install Tailwind CSS with vite blah blah blah blah. Create template app. So we jump the gun a little bit or we did not? Oh, we did jump the gun a.

Little bit, but it's okay.

TD my project NPM install. Let's just copy paste these guys. And that init function will create the tailwind config that we need to set the plugin for Daisy UI and install that guy. Let's make sure these guys went into the package. Jason, this is totally on the fly. I did not expect that I would do the tailwind stuff, but.

Let'S go.

Then let's run the MPX.

Tailwind initiative.

So now the tailwind config stuff came into our project right here. So it said created tailwind CSS config. Tailwind config JS created post CSS Post CSS config js. So we let's look at that and that is true. And then configure the template paths, add the points to all your template files and tailwind config.

So let's just copy these values.

Yeah, Tailwind config inside of the content. Just add these guys.

Let me just delete content here just to add ours.

So it's going to be applied to index HTML and everything inside SRC with a JSTS JSX or tsx.

What do they call these? Extension. Yeah, File extension.

Then add the tailwind directives to your css.

Let's just add these guys right there.

Inside the index css.

There we go. All right. Well, that's what it says to do@.

The src index js. Yes.

And then let's try them out. Npm run dev.

And then let's see.

If this works here. So go close these guys.

App TSX inside of Firebase Authentication and hello world. And we see that it tailwind is inside as it created some kind of underlying font Bold text 3 Excel. And then it's just. Let's add this inside of our readme.

So you guys don't get lost.

Oh, not this one. Installed hill in this one.

So get this guy and let's do we need these guys.

For here?

I just set up.

For here.

I just set up fill in, just add a little link to here.

Then next we'll do Daisy ui. We already installed this, we just need.

To set it up. All right, there we go.

And then we'll just bring this guide into setup.

Daisy.

We're just installing some like styling for our app because maybe I was just going to have it be bare bones, just like two inputs but maybe this would be a little bit more visual. But tailwind is really good. Tailwind is awesome. I started on bootstrap but I transitioned over to tailwind. All right, let's actually make these guys.

A little bit smaller.

Now just put a checkpoint here.

Ian, he has to go, I think.

Okay, watch.

Okay, I'll see you next time. Cross legged here. All right. And we'll just require this Daisy wine set of the tailwind config wherever it is here. So inside the plugins we just require Daisy ui.

I think that's all we need to do.

So now.

We did Status Add Git.

Commit 1 init byte React Proj 2.

Install Firebase 3 Add Tailwind Push Lessons Lesson 4.

All right, so all right, this is how our readme look.

Okay.

Header for slide.

All right, cool.

So finish what we started. So we set up our react our Daisy ui. So now we need to add some kind of login. So I'm just going to go to data input text input. There should be some kind of form here that I can use.

Here. Type here.

Text input. Okay, this sounds okay.

Just copy that one and we'll just make a.

Just going to do it all in here. Const login page login screen login form.

Let's call it login.

Let's put on the bottom.

Login return which is wrapped in the div because.

We'Re only allowed to like return one parent element the outside.

And then we'll see what the login looks like here.

Hopefully it doesn't look bad.

Oh, gotta turn on the circle.

Looks great. Dude. I like the underline on the hello world.

Amazing, right?

Okay, so we have a login.

We have a nice little login thing here.

Look at that things.

Amazing.

Yeah, yeah, yeah.

All right, let's get rid of the search though. We don't need the search. We need email. And then we'll just put the password twice, but I feel like we could put some kind of container over it. Where is the layout? Layout?

Let me see here. Forms here.

You know what, Daisy UI login form example. There we are. Log our info. Amazing. That looks great.

Great. Let's copy paste this here. Forms here.

You know what, Daisy UI login form example. There we are. Laura. Info. Amazing. That looks great. Great.

Let's copy paste this here.

You guys understand everything so far?

All right, cool.

Looks a lot better, right?

Yeah, it does look good.

I like it. All right, I like it too.

I like it.

My favorite color anyways.

What's your favorite color?

Purple.

All right, that's. That's cool for you. It's good. All right, so we need to make a sign up button on the bottom left here. But.

You guys understand everything so far.

All right, cool.

Looks a lot better. Right? The age old question. How do you center a div?

So many ways, dude.

Yeah, well, let's just see.

See if this is flexing on the.

Whole thing real quick. Order color black.

All right, so that's not. That's not taking up the whole thing. So we need someone that's taking up the whole thing.

Right?

So we need one container. And I think in Daisy UI you have. Or Tailwind, you have something called a class. That's container that does this for you.

So let's check if that works and.

Then we'll add this, our best UI debugger tool. The border.

Oh.

Oh, and then I forgot to.

Add the class name.

Contain.

I didn't do anything.

Flex.

Trial and error, dude. CSS.

All right.

Height 100 VH is view. Wait, it's 100 VH, right? Width 100 VH. It's getting there. Wait.

100.

All right, that's not working. All right, VH. And then we can do something.

I think you have to do VW.

For width of view. View width. Okay. Oh, void. Right. You're right. All right, well, this is good. This is as good as we're going to get. All right. All right, well, it looks good enough, dude.

No, it looks good. Yeah.

You know, this is good. This is like the new user experience. You know, people like things on the left side because everyone's using their phone with their thumbs on the left side.

Maybe it's responsive.

Right, of course.

I mean.

Oh yeah. See, it's 100 view with. When you do that.

Just wait.

Isn't it View port? Isn't there something called viewport?

I don't know, bro.

Whatever. Like, I think it's it's fine.

It's good, it's good, it's good.

If you take away the border with.

If you guys. If you guys like do want to do some styling, you know what, actually this is a great opportunity for you to style and share in the discord, you know, Amazing. I'll do bare bones. It's on purpose. It's on purpose. Mini, you know, the bare bones styling so other people can contribute. You know what I mean?

Open source project, dude. Let's go.

All right.

Anyways, it looks fine.

Yes.

But I'm going to change this to view height and view width. I knew that there was something called viewport, but never mind. I'm not gonna bore you guys with this anymore. So let's make a button called sign up as well there. Sign up and then the. This could be a button sec.

Oh, a bunch of people just joined. Really?

Yeah.

Three more. Welcome, welcome. Let's go.

All right.

Anyways, it looks fine.

Yes.

But I said how do I had like, where do you see that people join?

Dude, I don't even know.

In the participants.

On the participants. Yeah. Okay, well, welcome guys.

Thank you for being here.

Yes. If you have any questions because we're in the middle of this, you know.

Oh, dude, sorrow's here. My homie a boss.

There you go.

Yeah, we used to work together.

Phil's creating this amazing sign up UI right now. Dude, it's beautiful. Look at it. It's pink, purple.

We'll call it. What should we call it? Anyone have a. A name suggestion?

It's fine.

All right, how do we do this? Like I think Mr. Mr. Is Mr. 2. They're not like next to each other margin. Right. And so now we have a login button, a sign up button. So we have a Firebase authentication. So.

Let'S think real quick.

So when I press sign up, right? Oh, it's in a form.

Hate forms.

Oh, sorry about the language. I'm gonna put it. I'm gonna put it in div.

Okay.

So these don't. When buttons are informed, they automatically have like a submit form kind of event. But I don't like, I don't like that for now. So when it presses sign up, I should pop up a confirm password type of thing, right?

Yeah.

And then this, this forgot password thing should go away on the signup form, right? Yeah. So let's handle that logic here. Let's do import viewstate from React and then we'll have some kind of thing.

Here called like const.

Is sign up set is sign up equals usestate.

That's going to be a boolean. It's going to be a false at first. Then let's see this, this div.

That's the password. This one's going to be called confirm password. And then actually, let's not call this login screen because we're going to repurpose it for both. I'm going to call it off screen now.

Config password now confirm. All right, there we go. Confirm password.

Enter.

Whoops. Why am I having typos?

All right, Confirm password in there. So we basically don't want to show this guy if is. We only want to show him if.

Sign up is true. Right.

The double ampersand will only show it if it's a truthy value. So, and then when you press sign.

Up on click, we should set a sign up to.

Press this. The confirm password will pop up. And then if I press it again, it should shoot off the credit user. And then if I go back, if I press login and it's on the sign, if sign up is true, it.

Should take away the convert. All right, let's put that logic into place on click. And then we'll just do if.

Is sign up is true, then we'll just do set is sign up to false.

And then return on the function for now. So I press sign up and on.

The second press, it should create the user. Right? Does that make sense?

All right. Yeah. All right.

And then if I press login and then if it's at the login form and I press login, it should log the user.

So let's do that real quick.

So we do need to make two functions. We need to make the create user with email and password and sign in user with email and password. I'm just going to do it in one file. I know it's not correct, but then we can kind of refactor it later. So let's look up the documentation. Firebase sign. Sign in Firebase.

Great.

User with email and password. There's some nice Firebase documentation. I'll put that in the readme.

There you go.

And then create password based account. So it is. So it used to be namespace like this where you import the whole Firebase module and then you grab the auth from there. But recently, since like, I don't know. Recently, I don't know, it's like version 10 or something, they made it modular so you can only. You can basically just take the authentication part instead of importing your whole Firebase library into your code. Hey, Minnie, how's the size, by the way?

Looking good? I think it's pretty good.

Okay.

Yeah, because usually I have to close.

This File Explorer, but.

Oh yeah, it's okay.

All right.

All right, so let's import our package that we need. We need. We'll just import. Recently, I don't know, it's like version 10 or something. They made it modular, so you can only. You can basically just take the authentication part instead of importing your whole Firebase library into your code. Hey, Minnie, how's the size, by the way? How many left?

Looking good. I think it's pretty good.

Get off. And what is this? Not sign in.

We don't want to create.

So create user with email and password.

Okay.

Yeah, because usually I have to. I have to close this File Explorer, but.

Oh yeah, it's okay.

All right.

All right, so let's import our package that we need. We need. We'll just import get off. And what is this? Not sign in. We want create. So create user with email and password.

From Firebase Auth.

We'll see that that's alive in our node modules. So if we go into our node modules.

Not in the complete.

In the node modules. If we find the fire.

From Firebase.

Auth base module that we installed here, you'll see that it has a bunch of stuff like app auth compat database, firestore functions. And we're. Right now we're using auth. So that's what we're using right there. Anyways, so now it says to do this.

So I think we can just.

In the.

In the function real quick.

Const. Let's make a great user equals async and that should be taking some kind of. No, but we have the same variables. Just wait one second. All right, so try catch this console.

Dot error and the errors top up.

And then we'll do.

Const Create user.

Attempt equals await on create user with email and password and that we need to pass the auth module. So const auth equals get off.

So and then that's the first thing.

That we pass here. And then we need to pass two strings. So let's pass the email.

Those are the strings.

And we'll just ask the email.

Inside of there.

All right now and then we'll just Console log Create user attempt here.

And.

Then here we'll just dumb.

So.

Here I think it's. If is sign up. If that was false, then I would like to set it to true and then return. Maybe we can put that in one line.

Let's Just make it one line a little bit cleaner.

And then.

And then we can do.

Const user equals create user. And then we need to pass the make it an await function for now.

Make it async.

And we need two pieces of state. Put it inside of here.

We'll do const Email set. Email equals. Equals new state. It's going to be use state string, string font, Password equals set.

Let's call these set, let's call them user email and user password. We can separate these parameters and the save variables.

User confirmed password set, user confirmed password state like so.

So now we have three pieces of state that we're going to kind of connect to our inputs. So that's user email, user password and user confirmed password. And actually I think we went a little bit fast, so if there's any questions, please let me know. But we're not. Before we jump the gun on the create user or let's actually make sure it works first.

So.

And create user. Let's pass like test at test test. Looks like many people understand up to this point. Don't be afraid to ask. Okay, and then password here, I'm going to console log.

User equals user and that'll be the.

New user that we have.

So let's go.

So what's going on here? So right now is sign up is false. So if I press this, it turns it to true. We have our confirm password pop up. And then now if I press it again, it'll. It'll invoke this create user function with test test and password. And let's sign up. Well then create user attempt. What is this?

Bad attempt here, but seemed like something happened, right?

So user access token, everything went in.

Cool.

And then if we go into the Firebase place, we go into authentication. We got our new user September 30th at this time.

But I wonder what that about what that error message was. Who knows.

Maybe because we're all doing it in one file. But anyways, try it again. Sign up test one, est test. Whoops.

Let's try doing test one. So sign up, sign up.

All right, no error this time. I guess it's something with React. But now we have, we should have the.

In our Firebase console we should have two users.

So now we have test one at test test and we have test test test.

Cool.

So our sign up is working and now we need to hook it up with these values here.

So let's do that real quick.

I'm gonna delete those users and comment these guys out.

Do I need to clean that, yeah, let's comment it out.

And I don't want to run that function yet. So now we need to hook these guys up.

Delete those users.

Count.

I don't know a lot of people when they use like test accounts, they use like guest gmail.com I like to do test.test so I can easily see my fake users so I can delete them really fast. Anyways, let's finish this.

I'm going to close this guy because.

We'Re working in one file. All right, now we got an input. So the first input is the email. So value equals user email. That's good. And then on change and then I'm sure I think that takes the event and then that I think it's set user email to the E target value. So that should work. And it knows it's an event. So it says react. So the type is react change event. HTML element is the only one that's possible. So. And let's just console log or just copy paste these two parameters for all of them.

Two props.

So here and then here. And this one's going to be user confirmed password. Set user confirmed password.

And this one's going to be user password and set. There we go.

So now if I press sign up here, I want it to log all three of my values in this screen. So I'll make const. Create user payload. Let's just call it create user values for now. That's going to be email.

No, it's called just payload. We'll do something payload.

And that's going to be the user email password.

User password. Confirm. Confirm password user.

So now we have a create user password payload. And then if I go here, I press sign up. If I press sign up one more time, it should give me the three values, but we should throw an error if they're all empty, right? Or if any of them are empty. So the first check we need to do is how do we.

How do we do this?

If some I think sum is good object dot values at Rate User payload.sum@ the value add value equals empty string. If this is true, if any of the values are an empty string, we want to return out of the function alert, check input values. And then also I would like to make a reset reset state kind of thing. And maybe instead of three pieces we should have used reducer.

But.

Reset values.

That'Ll just be a.

Small function that just set user email back to empty.

Set user password back to empty. Set confirm. Right?

Set user confirm password. And then if anything goes wrong, I'd.

Like to reset those values, right?

So if I press this check input values, I do this sign up check input values, they should go empty. I have two. So this is a cool little function, object values and then you can dot sum is an array method. You guys can look that up. The the two that are very similar in these cases, every would check every single value, but some would just check, hey, if all these values, I expect them to kind of be the same or something. But if one is off, it'll like return true or false. Every is like checking every single one the same value. If I put every here, it would be true, right?

That's right.

They're kind of like the same but opposite. And now, now if everything is correct, then the second check that I would like to do is I'd like to make sure that password and confirm password are all good. But in a real case scenario, you probably want to match these. You probably want to make the sign up not clickable at all if these are not matching. Right? So on the where is this button, the sign up button, I think there's disabled prop. Can you explain object values? Oh yeah. So object values. So I'll just explain here in my Whoops console here. So let's just say that I have an object here and a 1, b, 2, c, 3. So the keys are A, B and C, right?

And.

And then the values are 1, 2 and 3. So it's an object. But because objects are kind of hard to iterate over, meaning hard to run A for loop on or something like that, you can turn it into an array very easily by with three methods. From object you have object entries, object values and object keys. So they're all very similar. So if I put object values on the observation, it'll give me an array of just the values to kind of easily kind of. Because JavaScript has so many array methods that kind of help code. But it's also a reason why people do not like JavaScript because if it's an object, you kind of treat it like an object. But JavaScript makes it so that it could be an array. So object and then object keys is very similar but to opt it gives you the an array of the keys so A, B and C. So and then 1, 2 and 3. So hopefully that explains the values to you. Is that.

Okay, okay.

And then one that I really like to use is object entries on OB, which gives you a 2D array, so an array of two pieces and that's going to give you the key and the, the value in one array which is kind of like. I don't know if you guys ever use map, but if you guys use cat contach equals new map. And then hash would be like. It's like an iteratable object. It's like it came out in like ES6 or something. But you can do like hash dot set on test key on test val and then you'd have this kind of iteratable object with the key and then you can actually say hash and then on the key of test key. It works just.

Oh crap.

Maybe. Oh no, no, you have to do it hash dot get.

On test key I believe.

And then it gives you test val and then yeah, you can. There's like a bunch of things but it's. It's iteratable. So you can go hash map.

I think, I think. I'm not sure.

Whoops. No, I lied.

Wait, how to iterate over matter.

I think it's the four in. Okay, okay. It's very similar to object but set. And I guess the for each works on a map.

Let's try that out.

So you can iterate over it with for each.

I guess. Yeah.

So earlier on our hash for each.

Maybe we can do console log.

Give us test val and it gives us two. Right. So that's pretty powerful. I think a lot of it's.

I do like A and B.

Test val and test key. So I guess for each works but maybe I. But map is not a function on it. Okay, for each works and I think for loop would work here too then. Anyways, map is pretty interesting to use. Map is very powerful. Anyways, so now what was I doing? Oh, disabled. So if disabled. So we'll say how would we. How would we define it being disabled? If so if password.

So if set. If confirm.

If user password doesn't equal confirm user password or no, no user confirmed password or user password.

Equals this nothing.

Or if user confirmed password.

So.

So we are not even allowed to touch the sign up if the password and confirmed password. Not if. Okay, so the first check is if they're ever not the same. That's true. It's. It's like don't allow them to. It's disabled. Or if user password is empty, it's disabled. Or if user confirmed password is empty, it's the same. So If I put 1, 2, 3, 4, 1, 2, 3 it's still disabled, but four.

Okay, cool.

Are we going to add captcha in the future in case Minnie decides to try? We might have to. We might have to. Those are from the days that everyone thought Minnie was a bot. Yeah, you are a bot.

No, I could be. I might be like the best bot. Like so responsive. Like I. I'm here, you know, talking. Yeah, I know, boys. Bill could have programmed me, dude. You guys have no idea.

So, so if we get past this, right? Actually we don't need confirm password because here I was going to do the check here and then like, and then I was going to run the Delete Create user payload.confirm password. Like this must be optional.

I don't know what this means.

Great. The operand of a delete operator must be optional. So you have to say like.

If true, what does that mean? I don't.

All right, never mind. We won't do this. We're going to handle it before they.

Can even press anyways. But what if I put Delete create user payload.Password here? Random Delete operator must be optional.

What does that mean?

I have no idea. But let's look it up.

The logic as I understand is the interface thing is a contract asking to have a non. Oh, then you'd have to put the type right. Like email.

String, password string.

I see. Because it inferred that these keys will always be there.

I get it.

Okay, so are we going to add.

Oh, okay.

All right. Now because this in. Because TypeScript is very smart and infers the values or the objects that it's going to. It's going to be. So if we define a key here, it's going to expect that it's always going to be there. But so we'd have to make the type for it. So but it's unnecessary right now because. So this is kind of like the type that JavaScript is inferring. This is going to be. And then confirm password is here, User.

Confirmed password and then confirm password.

And then I would make that optional and then at this point it would be delete create user payload at the confirm password and that would work. But I don't, I don't think we need to use the delete anymore because I was going to handle an alert message here, but because we blocked the sign up anyways, if the passwords don't match, I don't even think we need this here. So cool.

Foreign.

That and then. And JavaScript and TypeScript automatically infers this type on this object. So we, this is not even necessary even on the state variables as well. But anyways, so now if we get past all these checks and we get the, and we get to the create password payload, then we can actually just get the great user.

Wait, what is this?

Create user payload email. I thought we had to pass object here, but it's so the payload doesn't even make sense.

But it's okay, it's clean dot password.

And then we'll just console log the new user. So this is our Logic on lines 122 through 143. If the sign up is false, we turn it into a sign up form and then we make our payload that we need to make sure the data is valid or whatever. And I thought this, this was taking an object, but it's not. It's taking to. But anyways. Oh, it's good for this one. So if object values. So it's only two anyways. But dot sum and if any of those values are empty. Oh, we need the confirmed password.

Anyways, this part, sorry, user confirmed password. Let me just add that to confirm password.

String. And then, and then we wouldn't need to delete because it's too different anyways. So and then if any of these are empty, then we reset the values and we say check input values. And then we have our create user payload. And then we, we, we invoke our create user and then we have like.

And then we get our new user.

So let's check if that's working. We have no users in here yet. I think right then. Oof.

I messed up.

Whoops.

Sign up form.

Sign up form is always going to.

Be kind of necessary then right? Thinking.

I'm thinking now us.

How should we do this? Then.

We run a function inside of.

Here that returns true. Is it possible?

No, never mind.

Let's just handle it all over here.

We have a sign up form and then If Break User Payload.Password doesn't =Create User Payload.Confirm Password we would like to.

Reset values and return alert check password. So password and confirm password do not match. All right, so go here. Let's go.

Test test 1, 2, 3, 4.

1, 2, 3.

Now if I press sign up password income from password do not match. That's kind of what we wanted. And then now. So nothing went into here.

Oops.

And then if we did one more.

Time Test at Test Test 1, 23456 S Star 1, 23456 S Star Sign up Create user.

Okay, something happened here, but create user. I think that's a bug in React or whatever because it's making two, two attempts. Maybe on the post, I don't know. But I know that this guy will.

Be in here now.

So now we have tested, test, test and we have a new user. So our create user logic is finished. Now we can actually do like this. Const is signed in.

Set is signed in equal view state. And then on boolean.

False.

We can just.

If everything's successful here. So here we can say if user. So if it came back true, then we can set signed into true.

Set user that is sent into true.

And then.

In our auth screen. All right.

Let me just do here.

If is signed in, we need to return. Welcome. And I've test one at first. Test password. Password. Cool.

So welcome user.

Nice.

So and we don't have any like global state management or context in here. So let's just keep it like this. And then let's just make sure the login works now as well. So let's go back to our documentation. And then we got through create user. Now we gotta sign in with email and password. So sign in with email and password.

Then.

Then we'll just put it on the function here. If is sign up is false, set sign up to false and then it'll. Let's make this one line too. Let me start our logic here.

So we just do const.

Sign in.

Attempt equals a weight. We think.

Actually.

I'm thinking you can pass these guys from app.

And then we can pass as is signed in. Set is signed in. That's going to be. Set is signed in.

That's going to be arg.

Coin.

No, no, I did it in the wrong. No, it's not the right place. Sorry. That is signed in due to any now bucket.

And then set is signed in.

Set is signed in.

And then we'll put the controller here.

If is signed in, we'll return this.

And actually maybe it'll just be user.

Set user and we'll pass set user here and set user.

And then we'll do.

Just wait here. Let's wait.

Set user.

That user to the user. All right, and then it should have like a user type from type void. Why is it type void?

Oh, because create user is not ever.

Sorry, that's what the error was. Then do user and we'd actually have to return create user attempt There we are. And add promise or it's undefined again. Just copy paste this.

Typescript being annoying, but it's fine. All right now.

Now user is actually.

User credential.

Or undefined.

And then from here we can do.

If user set user to user.

And our naming is kind of really bad. So I just call this firebase user now that should work a little bit better. And now we'll have access to things inside of our actual main screen.

And that's not going to be a Boolean anymore.

That's going to be user credential or.

No.

Cool. I know that was a lot of debugging just now and just changing some stuff, but it's. Yeah, I think there's a react do set state action from any. And then that set state action will be on user credential or null.

I'm pretty sure. Yeah.

So on the set state, I think there's a type coming from react just like the correct way to do it.

Not that big of a deal, to.

Be honest, but anyways, so now we.

Refresh.

And let's try to log the user in. Oh, set user, set state, type set state, user credential. Wait, so.

Oh crap, you gotta do this whole type here. What? React.react. all right.

And the reason why I did this, you could actually just import them straight away from.

Crap. What I just do.

All right, you can import them straight away from react, like dispatch set state.

Action and then you get rid of.

This dot notation here.

But we're all good. We're not using that one anymore.

So sign in with email password.

Let's check here.

So on the sign in attempt we a Wait on the sign in. Let's just put it on here. Here we'll do const auth and if it gets passed, we'll do const auth equals get auth. And then what we do is pass auth and then the user email and.

User password, I believe.

And that will give sign in attempt we can say set user on the sign in.

Let's just log it so we can.

Fingers are getting a workout. All right. All right, now let's do. I think I put test one at test test and then the password is password. If I log in, I should log in and close that and I should. This user credential has a user object and that's my token. And it says welcome user. And then actually now inside of here, inside of our main guy. Our main guy.

Where is it? Here.

Welcome user. We could actually do like JSON.stringify on the user object and we'll see like a bunch of user information. So that is how you do sign up user and login user. I hope you guys had a good time. Mini or. That was like. That's. That's about us. Thank you.

Yeah.

Yes.

All right, so now that we finished, you know, we're going to hang out a little bit here. If you guys have any questions or if you guys Want to just kick in and talk a little bit about life, whatever it is, you know, just stick, Stick around and you can unmute even if you want, or you can use the chat. It's all good.

Or if there's any. If there's any questions from here, we. I can answer too.

Oh, sure.

Yeah.

I think we went through a lot, to be honest.

We did, actually.

Yeah. But we can split this up. I know this is all in one file. I'll push this code right now.

Right.

All right. Good night, Jocelyn.

Good night, Jocelyn. Thank you.

Anyways, what did you guys think? Or anyone?

I mean, I thought it was a very useful thing, you know, it's like a standard for almost every company.

Definitely. We sign up and log in, right?

Yeah.

Hello.

Hey, how's it going?

Yo, how's it going?

Oh, what's up? How are you, dude? How. How's Vietnam?

Yeah, sorry, I joined. Joined late and missed a lot of things.

Yeah, all good, man.

It's all good.

Mustafa.

Mustafa. New challenge this week. I'm up for it. Yeah, just ask me any questions in the chat, like if you guys, you know, have any issues with it or whatever. Firebase is very interesting. Like, you know, it's like it carries over into like Supabase or Keycloak or anything like that really. Like, usually all the authentication layers are kind of similar, so. And the easiest one, I think, you know, Google is like a lot, a lot of employees, right? So they kind of create like the standard. And I like, Firebase is a very popular SDK for you guys to work with. Hope you guys learned something. I had some fun.

Yeah, it was a, you know, it's a very good way of doing authentication.

Yeah.

You think a standard way, do you think, these days?

Not. Well, I mean, just not just Firebase, but I mean, yeah, like, I mean, you get back, I mean, a user in the database or whatever, then you get back some token. They start. So you get back an ID token, which is actually the JWT token. Right?

Long ass thing here. Hold on.

This long ass thing here. Let me just copy, paste in and.

I copy, paste or copy and then.

I go to like jwt IO should.

Be able to decode it.

Tells me information about myself here. And this is how you can protect your server later, where you can send this JWT token in your headers and then decode it and make sure they're a user in your database or you can put some secret in there. And now I know this guy's user id, this guy's email and all this kind of stuff. Good morning. Yes. Oh, it's morning. All right, later Alex.

Thank you brother. Thank you for joining. Mustafa, thank you too. Appreciate that.

But yeah, I mean actually like Firebases, I mean the.

Can I ask question?

No. Yes, of course.

This JW T the token you copied and pasted.

Yes.

Do you have some like access key to be able to see this or anybody can see this?

No, anybody can see it. Like there's no secret key here yet, but you have to set it in your settings later also. Now, right now anybody without a secret key. So as you can see, I don't have verify signature.

What's the purpose of this jwt? Okay.

To kind of just give you the user information about the. What what Google has about you. But later on in a real implementation you'd put a secret in here, right? And then you, you'd run the Firebase verify token on your server. So the implementation.

Oh, so. So if you have like admin page and like public page, you.

Yeah, definitely. And then honestly it just like there's.

That how the API API keys work. You have some API key and then you can access some parts of the page that you have no access to.

Exactly, that's how API keys work. But yeah, like right now, the Firebase ID token, it doesn't have any secret in it right now. But in a real life scenario you'd probably put a secret in and make sure because there is a, there is a function that you put in Node JS or like a middleware called Firebase Verify token and then this one would veer and then on the server in the middleware or whatever. When that's when the, to protect your server you would probably put like where is it? You'd probably want to veri. Like get the ID token and then you'd want to inside of your, your server, you'd want to verify the ID token is valid. And then only if it's valid, then you let them hit your API. Right. And if not, you put. You throw a 401 error. Right. Hello.

It all verify. I did something. So what, what is this verify ID token is doing? You know?

Oh, it's, it's basically just doing this JWT thing right here.

Yeah.

Okay.

But then later on when you create this user or whatever inside of your settings, inside of your app, inside the Firebase console, you can put a secret inside of the token. So there it's not so easily decoded. Right.

Because actually right now it doesn't make sense.

So right now if you go to your firebase and then give some permissions. We cannot access this JW thing.

Right, right, right, right, right, exactly.

But for today's purposes, I did not do that. How do you set up? Once you get users authenticate, how do you set up or give what users have access to? After the login screen you can put like, what is this? When you make the token, you can actually put custom claims inside of your token. So then inside of that token you can actually put any kind of data you want. Right. You can put like is admin or is user and then when it gets decoded, you kind of put these guys together and then you say verify ID token. And then once you decode the token, you can kind of give them. And then from that decoded information you can kind of like, oh, if this user is not admin, take them back to like give them an error message and kind of stuff like that. So this is all like server related stuff that you kind of protect your things with, protect the APIs and you have the decoded token values there. Does that answer your question? But like you'd make up your own scheme or whatever, your own strategies, so you'd have like, I don't know, like, I don't know what I usually do is I put like a roll and then I have like 0, 1, 2, 3, 4 and then the higher it goes, the more access they have. And then you can just put a conditional. If role user role is less than 4, don't let them be in here. And things like. Does that answer your question?

Kevin saying yeah, it's great. Thank you. Okay, awesome.

And if you have any more questions, just let me know. All right, later.

Thank you for joining us. Appreciate you.

All right, cool.

I feel like today it was, I hope it didn't go over people's heads because I think random users and stuff like that was like last week's.

Right.

It was more visual, but this one was like a little bit more like behind the scenes, I feel.

Yes, for sure.

I don't know.

I, like, this is the most important thing, I think because if people like, basically I always think onboarding is the most important thing because later on when they get into the meat of the app and the user has to start saving things about themselves or their profile.

Yeah.

Then later on if those user IDs get messed up and if that's not solid, then the rest of the app all breaks. Right, Right. So yeah, this is. Sounds pretty important, I think most important actually. But it's, it's fun. Anyone have any Other questions?

No.

Okay.

It was good, dude. I think, you know, when I was coming up, like, I was so bad at authentication, dude, until, you know, I learned about this stuff, I didn't know the standard way to do it.

So Firebase is. It's a really good way to kind.

Of learn it, you know, it's good for testing too. Right. Like when you're making your own app, of course.

And there's so much authenticate, so much documentation on it that it really helps.

Right, right.

What's the other one? The popular one.

OAuth 2 or 3 auth 2.0 and I think the one that's very Firebase related is Supabase. Right?

Firebase. Use Supabase under. Under the hood.

No, no, Supabase is the Firebase alternative that uses an SQL database. Firebase database.

Yeah.

I don't know, I've never used it, but. But I. I like this one I use at my old company called Keycloak. So it's like running your own Firebase server kind of thing. Like this auth 2.0 thing with like the JWT token and you can store them so it's not like using someone else's, but you just run a. Run your own authentication server.

It's pretty good.

It's good that we have like all libraries now.

Yeah, yeah.

And all the security and then we can just focus on building that. Don't have to worry about the security.

Exactly. It's just like about like putting the pieces together, you know, because.

Yeah.

You know, like if you just start rolling out your own authentication and stuff. Yes, it might be really cool.

But reinventing the wheel, man.

Yeah, you don't have to reinvent the wheel, you know what I mean?

Like, but you have to understand how it works.

Exactly.

To be able to take full advantage of all the use case.

Definitely. But next week, what should we do next week, you think, Minnie?

I think maybe we can combine the two. Maybe.

Maybe we can combine the two. Maybe we can make a simple chat room.

We can make that. Yeah, that'd be pretty cool. Like an actual project.

Like a small little chat room with sockets and stuff.

Yeah.

And then from there.

Yeah.

It'll be our fifth week doing this.

I think that'll be. That'd be. That's a milestone, dude. We didn't know it was gonna be like this.

Actually.

Today's a milestone because it's the fourth time. It's one month.

Yeah.