Add Auth to your React Project EASILY Tutorial

also do this before the return here, so if there is load and we don't. know if the user is still there just return an H1 saying hate, you can change this with a spinner icon with whatever you want and also if there is no user this is important, if there is no user I want to redirect to the Login. The screen is basically correct because look right now, we have to log out. I'll show you something interesting. I have a button here to sign out and I'll click. How can I log out the user? Really simple, run an arrow function and say shutdown DOT, logout, that's it from those Firebase utilities, we can just call that, hit save, click on it and boom user logs in, look at the calorie properties of null , blah blah blah, it's not showing why because there is no user, but I don't want to have In this problem, what I want to do is say if there is no user in the first place, just redirect them to the login page How do you redirect someone?

We can import use the router from the following forward slash router and with this I can only say if there is no user route dot push actually I also need to define this router here. I need to say constant route equal to use router so you need to call it first and then you can say dot push route and we'll send them to where you know login bar of course and press save okay that's how it should be so it should work okay, so let's come back here, okay, so I want to go to the control panel and sneak into it.

Boom bug not working. Great, I still get this error. It really shouldn't, so we'll fix this as well, it should just redirect us to log out because I think since I'm constantly logging out the user here, it might be one of these little things, let's try that again. control panel still no errors uh oh yeah, because this is trying, this will be processed anyway, so I need to say here that if there is a user, then return this okay, otherwise, don't return anything, okay, so now if you go to the dashboard, oh boom, redirected to login, there we go, we can't access the dashboard anymore unless the user is logged in now.

What will also be cool is that when we hit sign in with Google, it would be cool to automatically redirect them to the dashboard, so let's go. go tologin and we'll do the same thing import at the top here use next router route router and here we'll just say at the top actually constant path equal to user router we'll say route point push them to the dash and that should be it should be log in loading nice boom redirected to dashboard really cool lovely log out that's perfect okay uh what else do we need to do? um foreigner, we will close a Facebook, let's see, do we have everything? working fine, let me log in here, okay, yeah, I think we should be perfectly fine, oh, there's another thing.

I can still access the login if I change that. I think I can't log in with forward slash, but I'm already logged in, so I don't want to actually see this, so we can import the use effect here from

react

and down here somewhere. I can say something like use effects and run a function here and I'll just say if there's a user and then route them up, push them to the dashboard, there's no point in showing the login screen, otherwise log in to the console because we're going to be at login anyway and here we're just going to pass in the user, so we're going to look for it, okay, so we're.

I logged in now and if I go to log in, sorry, don't log in, okay, it says user is not defined, uh, oh, I don't have the user imported, so let's import like this and use off State as well, cool and then at the top here we are. I'll just do a constant user slash load equal to use off State off Okay, so it should be fine now, what's the problem now? That should be fine, no, it's not this import statement, that is, he doesn't like forward slash, forward slash, forward slash, five, no, that's it. right, what are you talking about?

Let's see, so now, if we're going to cut off the login, it still doesn't. Oh, I already imported it here, so let's get rid of it and press save and there we go, all good, so now. if we are going to cut the login, we should be redirected perfect, so it works. I imported it twice, that's why it failed. Okay, now let's do the Facebook one, so let's log out of this one. Let's close tight and we'll just make a new one, so up here at the top what we can do is say uh boom boom, where's my login?

Here, where we do the registration, we can do Facebook outside of the provider and we will update the profile and I will show it to you. why okay, cool, pretty much the same thing we did here, we'll do it again, log in with Facebook, let me minimize this, go here and all we have to do is say the constant FB provider is the same as the new provider outside of Facebook. so and cons asynchronous facebook provider the same looks almost the same that's why it's good to implement it we will try to capture it well and then try again we will get the same result expect login with a popup and we will just bypass and the async provider Facebook this time is great and yes, we should have the user, it's a console log output and then I'll show you something we actually need to do.

We will also route the shipment. to the board, right board, perfect and then here let's unregister the error. Lovely, what's wrong with you? Oh, I have the space here and I press save. Okay, now in our little Firebase there are a couple of things we need to do, so start here. Good. cool so let's go here to get started go to our app so make sure you have it enabled as well so login methods make sure you enable Facebook and you will have this app id and app secret make sure copy those two. and then here you also need to go to the Facebook app like Dev development depth something um.

I think if you just click here you can find it. Where is the Facebook app settings? Then we need to post this callback on our Facebook dashboard. What is the name of this Facebook developer? I think it's this one, it should be this one, yeah, and then you go to my apps, make sure you create an app, create an app, it's pretty simple, and then once you get in, you can check it out. to settings somewhere here then you need app id and app secrets take these two paste them here directly from here app id app secret and then app domains will be localhost , you must also publish as a URL, Site URL.

I'll just have localhost there, but you should know where the son of a gun is. It should be like a callback that you can paste. Should be here. That is so weird. Oh, maybe here, the Facebook login settings are valid and not redirected. Uris posts that fool. here from here okay copy post it here and save it here save it here and that should be great so now that we have that we should be pretty good to go so let me minimize this go here by click add and click on this and then we'll say uh phase, but what did I do?

Should I call this Facebook login? Facebook login, okay, copy this, paste it here and press save Facebook login, okay, now when we get to this. You should be redirected to Facebook, a message will appear for you and boom, now we are there, everything works. See, I get the name and everything and the only problem is the image and this is because they made a weird update where they made it extra. It's hard for you to get the image for some reason for security reasons so I searched on the internet and it's a nightmare but I found the solution so you can go here so basically what we have to do is pass an access token to Facebook. it only allows us to get image-like data if we pass the Nexus token, so what we do is up here, we make the credential.

I set this equal to a Facebook weight outside the provider. We will get the Facebook document credentials outside of the result provider. and then we'll pass the result from up here, so this will give us basically like an access token from our login, so we can make a constant token equal to credential, credential, dot, access token, to get the result real. URL for the image photo URL, we can say URL result.user.photo, so it is the same as Google, but Facebook basically provides the stock image, so it doesn't actually give you the image because It is the same as Google's. same thing it just works but Facebook doesn't so basically here we can just add a plus symbol and say we can also specify a height so we can say question mark height let's set it to 500 and then we can say n access token equals plus the token that we got from there okay so basically we're adding the token to this URL but what I want to do is also update my image so I can say "wait for profile update" and I can import this update profile and you you can modify it.

Basically

your

profile is similar to the Firebase database as far as I can tell from the current user and I can modify the photo URL to the photo URL that I have down here okay so if you want to update to the user with some type of information they want to add. the data changes its name, something like that update profile allows you to do that, so I'm just changing the url of the photo, this one from stock to the one with the access token and that should make it work fine, cool, so let's save that, you may need to log out. and log back in to get this working, let's hopefully see that boom updated and now we have the Facebook image ready to go, so that's going to be it for me today.

I hope you enjoyed this episode. Be sure to subscribe below if you did and write in the comments section what you would like me to teach you next. I'm in a very good mood. I'm learning a lot now, so whatever you want, just write the code for the design dance lessons. I got you, goodbye.