Firebase Authentication

[00:00:00]
>> So the last thing we're gonna do in this simples, I'm gonna go kind of went backwards, but that's okay. At home, I'm going to set up Firebase authentication. So every time you set up a Firebase service, it's important to make sure that you have things enabled in the console.

[00:00:15]
So I've enabled my Firestore, I'm going to go and enable authentication. Authentication is especially important to be very explicit about enabling because you only wanna support specific providers. You don't want all of a sudden people are trying to sign in with, Google, but you only wanted people to sign in with GitHub.

[00:00:36]
So you want to be able to manually say these are the providers I support. So we're gonna support just my, this is my most favorite of all auth providers. It's called anonymous authentication. And there's two benefits to it. One, the user, you can authenticate them without them entering any credentials at all.

[00:00:56]
It sort of authenticates them as a guest. And it's a short lived time period, so eventually I think after a certain session length they become unauthenticated. So it allows you to just sort of take a user in as sort of a guest process and then if they do decide to sign up, you can actually link their account with all the data that they've stored.

[00:01:18]
And another benefit of anonymous authentication is that when you write with Firebase SDK you learn how to spell anonymous. It's a very difficult word to spell but you write it all the time. So, if you're ever in a spelling bee you're gonna get this one. So every provider needs to be enabled, that's a very important thing.

[00:01:39]
If not we'll give you an error in the console that's in the browser console that's, hey, you probably didn't enable this and you're trying to log in with it. But it's good to know that we need to enable all providers before use. So just like before, I'm gonna go and I'm just gonna copy code just to make this go a little faster.

[00:02:01]
I want to copy just the Firebase app config And now I have this. So I have my Firebase app. So I wanna talk to Firebase authentication. And just like I said previously, all services or all Firebase services are in their own sub packages. So this is in Firebase off.

[00:02:25]
All have getter functions so I can call get auth, and then now if I want to pass in the Firebase app. And from here I can start signing in users, so I'm gonna import a method called signInAnonymously. And so when a user signs in I want to call signIn Anonymously with the auth object.

[00:02:47]
And then if I wanna get the results of this user I can say, const result = await signInAnonymously and then this will give me a user credential. Which I could say, results.user and it gives me all this important information about a user. Now, one thing that you might be noticing is that just a minute ago I said, we will never, ever await the results of things.

[00:03:16]
We will always do things in loops. We will be doing that, but I'm breaking this rule to show why this is not a good idea to do it. This is possible, but there's a better practice, which we'll find. So await that the user will get logged in, and then we'll push him over to dashboard.

[00:03:35]
And then within dashboard, if I wanna get that user, let me copy some code over and I copy the Firebase auth code, And let's get auth, And from here what I actually can do is I can see what the user is by calling auth.current user. And so this will kind of spit that out and I'll even just for visual effects not sure if I'm displaying it.

[00:04:15]
I'm going to log off that current user. All right, so let's start home, Let's click Sign In. All right, we signed in. And we can see we have this user implementation and we can say, look at that is anonymous, this is true. Let me bump that up, is anonymous is true, we have metadata created at these times.

[00:04:43]
We have provider ID, Firebase, but we have what is most important is the UID. So this UID is how you start associating user information with data in FireStore. So as I create documents, I can say, hey, this document belongs to this user. And I could do that when I go here to create a document.

[00:05:07]
So there's this new markdown. So right now I'm just kinda creating this new string. So instead of doing that, I'm going to create a new document. So I'll say const newDoc = doc, use the markdowns Collection. And then what do I use as an ID? Well, if I leave this ID blank it will actually generate an ID for me just out of the box.

[00:05:33]
And so now I can say newDoc.id and all that generation happens on the client. We don't have to wait to go to the server to see what our ID is, all of that is client based. You'll find that a lot in using the SDKs happens on the client.

[00:05:49]
While a lot is async a lot is also not async. It's interesting how it works. And so now what I need to do though, I have this document I have it's ID I want to create it. So I'm gonna call setDoc, And what I'll do is I'll pass a new doc and then I wanna give it data and I'm just gonna fill it with blank markdown and blank converted.

[00:06:20]
All right, so now when I click New. Look at that, up top here, it's kinda hard to see, but that's a generated one. So this is a new doc with cool markdown, okay, if I click back, there it is right here. So this is really cool