Jamstack Fridays with T&T: Next auth and Firebase

this is gem stack friday with tnt hello tony what is up welcome back to another gemstick fridays man hello tim good good i'm very excited about today's session because you're gonna show me some stuff right and i know you're gonna be connecting up some cool services again for our audience yeah okay how about i share your screen and you can kick it off let's let's do it let's do it okay all right tell us what you're gonna show us so we got three tabs open and we got our vs code in the background so you probably already understand what's going to happen so we're going to go from right to left we're going to go next next off and then firebase okay so so you're going to be connecting next off to firebase so your jamsex site will have login yeah so i'm going to show very basic demo of authentication of within nextgs application and i'm gonna bring in my data from um from google i'm gonna so i'm gonna go into my next app i'm gonna have a login uh ability in there and then i'm gonna go ahead and click sign in or log in and then when i log in i'm gonna retrieve data from my uh google uh profile and it's gonna show my picture my name my email and then after that i will you'll see it in my next application right there on the page and i'm not going to write too much code of authentication i'm going to leverage a library called next auth it's authentication for next.js and i'm going to leverage one of the providers which is google okay and do you need ssr for this or is it all in the client it's gonna be all locally running but this is gonna be uh client based okay cool but you can do um like further exploration we're not gonna do it today because i want to do just a quick quick demo uh you could do you can get like server-side props by leveraging a session so there's a lot of things you can do but just to show you kind of the the beginning the getting started right nice so um i went ahead and created everything ahead of time so i created a project in firebase obviously i enabled authentication as you can see here the google sign-in has been enabled and that's pretty much it there's nothing else here that's there's some settings and that's it you'll you'll see it all throughout the demonstration so let's go ahead and explore this first so first things first we're going to go into our pages and then we're going to go to api so i had to create a little path here off and then that's it so this way we'll be able to authenticate that's how pretty much this came from directly from documentation of uh next auth library and then i have my environment variables that are stored here i'm not going to reveal those but no please don't so you don't have to mask it later and then um then let's go into our app so so just explain to me how this is a page in next because it's literally just a function that returns right in the next auth uh file the json i just showed it's a it's a it's an api right it's an api around yeah underneath apis so yeah yes because we have inside yeah so inside of apis we have hello that we have like a basic routing and then we just kind of extended it here so and we're using uh uh all next art library so let me actually show you what do we have installed here so i have next 11 already 11 yeah baby we're living on the edge yeah then we have next odd react and react dom that's it sure that's all i have in here yeah and then here we're leveraging uh next auth then providers and we're using google obviously so yeah very social their documentation is really good so nice i'm not going to spend time on that but we'll leave the link uh in the description and then two pages where we need to update stuff is going to be app so in here we're adding a provider client and we're wrapping our component with that and we're adding a obvious a session here and then i like this man in react that you can do this because if then the session doesn't fit or you're not logged in the component is just not shown right yeah that's a cool way to go about it um and then next is index this is where it gets kind of uh you see how small that is that's it that's it you can just say use session check if it's there and then that's it yeah like this so two buttons sign in sign out it's all coming directly uh from our library yeah so sign in sign out use session and then this is where i'm exporting all my data from google analytics we'll have to do some masking probably uh on post-processing of the video but i shall be doing that it's all about it sorry about that no worries so young dev uh let's see what i have here okay oh you might have to go in yeah exactly soaring okay uh-huh whoa i'm already signed in that is already okay so let's go through the whole thing again let's clear it out done and let's go ahead click sign in oh and this is basically that route that returns this button that makes it for you this is like the api auth sign-in cool correct and then i'm gonna it's so easy exactly right and then signing google that's where we'll need to mask a lot of this stuff please it's all good no worries so next.js authentication let's go to our settings public facing name and we're gonna mess with this sorry about that and then i'm gonna use my personal email and there it is and i'm getting all this data right here session user email name image and can you now also create like a protected page or something yes yeah it's that because you have a session and if you don't have a session you just redirect back to like a login page or something correct correct so i'm doing very simple here it's if you're signed in check the check the session if you're signed in show sign out button if you're signed out show sign in button and that's it and then the rest is kind of here that's it that's all i wanted to kind of show how easy it is to get kind of get going maybe uh sorry did i interrupt you no i i will ask a very annoying question soon i'll let you finish okay i wanna show you uh the docs so next off documentation and then you have authentication providers sure and then look how many there's facebook github so if i want to do twitter where's twitter it'll literally going to be provided twitter and then you'll set up all that stuff just run with it that is easy wow okay so um twitter though because you have a session right and you're logged in and then you want to do let's say a lambda function like an api call but for that you also need to be logged in otherwise you're not allowed to do that call so can you check in your lambda function in the api folder if you have a session and then say hey that json token thing that json web token is not correct so you're not going to be able to query this thing does it have this too or is that a very annoying question no it's not an annoying question it's just a question that i don't have an answer for right now i need it i can i'm here there's rest api so i i'm assuming it just works oh no this is just uh client type session there it is um okay there we go you want some tokens yeah so they have but like i'm asking this because netlify uh also has like a netlify sign in system and they also have if you then have netlify functions in your application they actually also give you they can check if the signing that you did on the client side they can also check in the in the api with the lambda functions if you are actually logged in so you kind of need to be authenticated with your own login on the client before you can even query that thing so that that is interesting to me also but maybe um there was a bit too much in scope for this video today but it's that those things are pretty interesting i think yeah no i i i think that's more of like a an extra exactly an extra layer of authentication once we log in and are we allowed to access that further uh routing yeah exactly but that's another story that's not for today you actually showed in like five minutes how easy it is to set all this up and then have authentication and can you do this without firebase maybe just in a different way yeah yeah so what i showed you was the firebase but then when you have these like authentication providers you can use any of them so right here sure so i used google and i use a google provider as a so instead you will just go ahead and replace instead of google you will use another provider that you want whatever yeah and then firebase potentially you don't need to store data anywhere right nope you can uh just do twitter i i might be doing this stuff soon i need to start doing more next anyways now that 11 is out right so yeah why not use this stuff man thank you that was a fun little exploration there of how you can combine tools in gemstack world yeah awesome thanks man see you next time i guess when we try out the stuff so yeah hopefully i will be able to answer that next next stuff with your extra uh authentication i keep asking annoying questions and let's see where we get to anyways cheers man speak next time have a nice friday bye