Transcript of i tried coding the best login screen ever!

[Music] we have a good news and a bad news the bad news is that hey guys welcome back to the channel today we're going to build something that I've never done in my life before so here's the crazy thing I've been a software engineer for like five plus years I'm a senior software engineer now been coding for like eight years and it's surprising that I have never ever built a login page before so today today and I'm going to try and build like the best login page for my app Lex which is what I coted as like my German language budes and what does best mean so to me best is like a good balance between cost so hopefully it's free and time for developing and of course the largest chunk will be the user experience I'm going to open up CH GPT and ask it for help to figure out what would be the best way for me to go about creating my login screen especially because I want it to be aesthetic and a good user experience as well so I'm asking it what's the best uiux for users and also what's the easiest way for me to go about building this login screen as well and lastly I'm going to ask it if I can do this in an hour because I don't have a lot of time today to build this so I hope there's a really quick way for me to go about building this okay it came up with a few different things and in this easiest way to build the login page I think the file base authentication is going to be what I go ahead with so to just read about it I have definitely read about this before like I have heard people talk about this but I've never gone about integrating vbase off in an app before so this going to be the first time time I need to really read through the documentation and just to get a gist of like what exactly am I trying to build here this is what the Firebase UI demo looks like it looks very ugly so I'm definitely going to create my own login screen because there's no way I'm going to use this UI for my login screen but talking about UI let's try and figure out what my UI would look like and I'm going to open my iPad for this I'm actually going to spend some time to thoroughly understand how this Firebase earth works or how it's going to work because continuous learning or like continuously picking up new knowledge it's not just about consuming information but also about understanding concepts because then I feel like I'll be able to debug better or just go through implementing this a lot better and that brings us to brilliant who are also the sponsors of this video brilliant is not your typical learning platform it's an app that helps you get smarter every day with thousands of interactive lessons in math science programming and more inste of boring lectures brilliant teaches students through handson problem solving and that's proven to be six times more effective than passive watching the brilliant app also makes it easy to learn anywhere right on your phone with fun lessons you can do whenever you have time I was also very intrigued by their thinking and code course which is great to build foundation and coding and learn to think like a programmer or even their data science content which is great for beginners like me who are interested in like learning more about data science to try everything brilliant has to offer for free for a full 30 days visit brilliant.org lifeof Gores or scan the QR code on screen or you can even click the link in the description below you will also get 20% off your annual premium subscription so check out brilliant right away and thank you so much for sponsoring this video [Music] so for the user interface I want it to look something like this so there will be a welcome text at the top and then we would have the username field for the user to type in and then the password there will be a submit button and at the bottom I want there to be Google off because I personally love to use either username password or Google off so this is all that I'm going to provide and for the actual logic if the user exists then I want it to automatically log in and if the user does not exist then we just sign up and this means that there would not be separate login Pages or sign up Pages everything would just be together and that's the type of user experience that I like let's dive into the code and try to build this out [Music] we have a good news and a bad news the bad news is that I don't think this is a working expected for me because the problem is that I created when I created this Lex project I had a separate front end and a separate back end but that is not seeming to work as I expected with some of these other dependencies or tools that I'm using so I'm just thinking that maybe this is a good time for me to convert my old app into a next JS project because then I have a framework that I can use and that will just make my life a lot easier and the good news is that I've been wanting to do this for a while so this might be a good time for me to actually make that switch so I'm going to give myself a bit of time to switch this into a next JS project and let's talk when that's done and hopefully it's not as difficult as as I thought you would [Music] be I already have an xjs app so now I'm going to use cursor to ask it to set up all of Fire based o UI elements that I need and I'm going to be using shet Cen for this because I just like that tool a lot and they just have really good UI components that look nice and clean at the same time I'm also going to be using Firebase console to set up my project because you need a project and you need some API keys on Firebase that you then connect and link to your project but aside I have the UI elements set up already so let's try to run this app this is what it looks like okay there's a weird spacing issue we need to fix that so okay fixed it now there's a nice space between the email and the password as well I currently have a separate sign up page and a separate login page but I know I want to combine them the end so for the sign up we're now going to test if I create a new email and will it appear in my Firebase users page or not so if this whole integration is set up properly so let's try that out I have the email I type in the password blah blah blah let's check off okay cool the email appears that means it actually works I feel like this whole integration is happening very fast all of a sudden so the next step is to actually add Google off because if you remember from the designs that I came up with I want username and password and then I want that to be Google off login at the bottom so now we need to integrate with firebases Google off so again I'm going to input into cursor for it to set up all of the UI elements for me as well it does really well so now that that's ready let's see if it works [Music] email password and then there's a continue with Google at the end so I'm going to try to test if it works with username and password just to make sure I didn't break anything now let's try to log in with Google and that works as well okay this is very fast and now I have both emails on the Firebase users which is my username and password email and then also the Google off that I tested so that means that this entire integration is actually working I totally forgot to record my screen for this part but I also combined the login page and the sign up page so now there's just one off page where if the user wants to log in then they would log in and if they want to sign up then it would be the exact same process they would just sign up from the same screen itself and now is the fun part which is I'm going to try and get the UI to look more aesthetic so I'm going to ask cursa to help me do that as well um I'm using a lot of AI for this project because why not and I on a time restriction so I want to get it done as soon as possible okay this is what it came up with I think it looks LLY welcome to legs at the top so I'm going to remove that because yeah it it doesn't look that nice okay it looks much nicer without that just going to clean up the text like uh what do they call it like the copy and if not I think I'm happy with this like it works we have a working login page I think the part that took me the longest was when I tried to convert my front and back hand into a nextjs project because yeah that's just took me way too long than expected other than that I think the whole setting up of the login page with Firebase off was relatively simple and I don't know I think it took me like half an hour to get it set up other than the slight detours that I had to take because I read the documentation wrong and started to do something different but the next step I actually have to come up with a way to protect my Lex page because currently even if the user is not logged in they would still be able to view the Lex page so I need to come up with like protected view so that those would be able to view this Lex page and I also want to create like accounts so that the user can see their accounts and their progress or just stuff like that so quite a few features to build but this was a decent start thank you so much for watching definitely check out brilliant if you want to continue to learn a lot more or if you're big at a topic that you want to pick up and with that being said I will see you in the next one