Add Authentication to Next.js in 10 mins with OAuth (Google, Github...)

so if you're struggling to add authentication to your next GS application in this video we're going to see how you can add authentication with stuff like oh continue with Google continue with GitHub or Facebook or any other oauth provider or even with like email and password to your luck next.js and react application in five minutes and the best part about all of this actually you can Implement those using the new next year server components and client components so you can have everything new I'm going to implement Advanced oauth authentication with like Google where you can click oh continue with Google it's going to take you know accounts that we want here to choose an account you can select an account after that and it's just going to immediately authenticate you in here just take you to your timeline here where you can see the email your authenticated with you can create like a session token with you create a cookie for you and https only cookie it's very secure very well thought off and it just works perfectly so if you're new to nextgus we're just getting started with node.js and want to add authentication to stuff like email password or something like oh continue with Google continue to our Facebook or any other like oauth provider so there is a really awesome library that allows you to do exactly that but it's just going to make things a lot easier because they actually have created everything so you can just install the library and use their like build team providers built-ins authentication mechanism and so much more the library is called next auth.js so this is actually a really awesome Library it's pretty secure pretty well thought off they have a pretty awesome like nice features anything you pretty much would like think about implementing in the realm of authentication or next year as an authentication you're going to find it particularly implemented in this library from simple email password to very advanced stuff like oauth so to get started with this all you got to do is go ahead and get started in here and there's actually one thing before we get started because as we know there is a new version of nox.js like next.js 13.4 has like put a stable release of the app directory instead of using the Pages directory so likely for us next.js in here or the next auth.js library in here actually has guys for both of you either using the old one or the newer one so let's get started with this simply just go ahead and do a pmpm or yarn or anything just add this one using npm so add next auth into your project and you're gonna go jump into that one exclusion here telling you oh you add the API routes in here so whether you're using using Pages or the up route you simply go ahead and create a configuration with this and initialize the next author here which is going to be provided so in our case what we want to do is actually we have a simple application here it's a like a Twitter cologne we built in the previous video tutorial about next GS 13.4 well this one is pretty simple it uses like some SQL like database where you can just log in in here and log out and you can just basically you know view the Tweets in here you can add comments you can go to a tweet view all the comments and video so what we want we want to use next auth.js Library I'm going to add authentication to this particular application where the user can click in here and log out can actually you know before you can view this we want to just display a login so you say like oh please you need to First login in order to be able to view the Twitter timeline so much more so that's exactly what we're going to be doing so we're going to add authentication to this next GS application so there's actually no project setup we have like an application we have like you know inside of the app directory you have like a timeline to show the layout the page and you know how like an actual or the newer next.js application are structured and you've got like a live work so it's obviously a further in here so I want to go and increase some configuration so I'm going to add an off.ifscript which is a file that's going to allow me to just you know export some configuration for the authentication purpose so this one I'm going to add first an object so it's going to be calling this oh auth config I'm going to explore the objects which is going to be next auth options which is mainly going to take the providers now the providers in here are pretty straightforward next all it has actually plenty plenty of providers going from credentials which are email and password or going from single sign-on for like you know continue logging with Google or like logging with Facebook those kind of providers are logging with an email email link like an OTP link or SMS something of that storage so they have all of those so we need to specify the configuration of those providers and like the secret the password to use for example Google sign on or how to handle the authentication with the database everything is going to be handled inside of that object so the first thing here makes you go ahead and like import the credentials Provider from the provider's credentials off like next art providers credentials and here you can just go and put the objects to do credentials provider and here you give it the configuration objects for that and for this one I'm going to go ahead and add like oh a name credentials and this particular objects you add like what are the sign-in credentials you can even add like first name you can even add like username instead of an email but that's I'm going to be using in here I'm going to use email label time placeholder and likely for us there's actually a really awesome feature that's why we're adding a placeholder in here and a type email because next auth the library is gonna like oh it's going to immediately read those it's going to generate for us a form that's going to just work right out of the box it's going to add it into a URL so you don't have worry about it so if you want to use that you know built-in form you can do it or you can customize it and add that authentication method to your custom form so after adding the credentials in here there's actually the next important thing which is like knowing or when the user is actually logged in how do we verify the user if it's actually login or not so this one what I'm doing this question shows in here are going to be like email and passwords a recorder of an email and password the same thing that you put on top in here so you're gonna check oh if there's no credentials or email and password just return null or here secondly just go ahead and use the prismap whatever database order you're going to be using so you're going to add or grab the DB user which is with the email provided then you're gonna go do some like password checking so usually in here you're going like to do some encryption to check the password because not 99 of the times in a production ready database passwords are encrypted but for in our case in here they're not just to make it simple but mainly like our encrypted using bcrip so you can just go ahead and encrypt that you can double check oh if password is wrong right or we simply need to go ahead and do is actually return the user objects in here which is going to have the email and email that's it and you make sure just to remove the password and other fields that are not related otherwise if the user fails to authenticate and we can actually Define a database or the password doesn't match what we can do is go ahead and return null and this will actually tell next auth it's going to return an error for us and this will not you know it will not authenticate the user we just like stop it and it doesn't allow it to go any further so the first provider here is the credentials provider now we can add all the providers let's say in our in our case in here what I want I want to use continue with Google and I want to use continue with so for that I can just go and add two more providers there is the Google provider and there is the GitHub provider you can just import them the same thing from the providers folder inside of the next auth Library so 99 of the times most of the providers are going to have or take the same options which requires an oauth 2 options which are client ID and the client secret like you're wondering basically oh where can I get those good question so for example for Google what you go to is actually go to console.cloud.google.com which is or you can just type in on Google Google console and it's just going to take you here so here you need to create you know you have to have your Google account with you in here and then just gonna immediately for you it's gonna have it in here so you can just go and create a new project or you can just go and have a quick access so from here you can just go and do like view all products and it's going to take you to the list of all products in here that are available and you have to search for apis and services now apis and service is actually the one that's going to allow you to generate an oauth clients and actually use the ability to use like Google to sign in users into your like database into your like application so once your API service you go to credentials and in this one this is actually where you create the credential screws in here you go inside of oauth 2.0 client IDs and this is exactly where you need to create them so I already created the next JS auth in here but you can just go ahead and do create credentials in here and you can just go in and add like oauth clients and simply this would just go and like give you an application time for us it's a web application but you need to choose one if you're using something else you give it a name in here and here there's actually the most important step you need to add the URI and the authorized redirect Uris so from where would you get those so if you go to the next auth Library documentation and go to Providers and you scroll down a little bit go to Google you find Google here because this actually shows you the configuration and down here it's actually going to tell you where the one eyes are so for example in here for production this is the Callback URI but for development this is actually the Callback URI so you can just copy this one go back in here uh the Callback URL is actually this the redirect URI where the user going to be redirected after it logs in and this is actually the URL for the application for application it runs localhost so I can just put you know localhost 3000 in here and that's it I can just go and click oh web application web client creates in here that's going to create for me an application and there you go it's going to give you the client ID in here and the client secret as simple as that so you need to make sure to go and copy both of these and actually put them in the EMV file and you're good to go now you can just go in and use them now if you go to the EnV or wherever you set your environment variables but don't interview for next year is you put the Google client ID and you put the clients in the secret and the GitHub as well the other thing that next auth needs to in order to operate correctly is actually you need to put next auth secret which is going to be a secret to sign and encrypt GWT tokens because next on is going to use GW tokens to keep a session inside of your browser so you make sure you're here to put a random password so you hear that's going to be very long and very random and here you put the URL of your application and simply as that you just go to Google provider and get our provider and use those secrets and that's all of it and the initialization is done now now we can use Google GitHub and credentials to actually authenticate our users now to finalize the configuration of next auth you go to the up in here you create an API off and you created the same thing in here with like you know it's an array dot dot dot next auth and this actually needs to be read by next all they have to put it exactly like this and you create like a route.type script it needs that the newer next year's 13.4 needs that and here you just use the configuration created and you initialize auth and you make sure you import or sorry the export the handlers both at the get request and a poster and like this you're done with initialization all right now it's time actually to integrate this you know the authentication without application and add a form add abundance to login with Google GitHub and so on and so forth so what I did in here for application I went to the 8.10 Times Square which is like the main page for the website in here and there's actually I'm going to take it as a sign in so here I'm going to do a sign in page and actually return a sign in page in here where there's a button for Google sign in a GitHub button in here to sign in with GitHub and have like or then a form to credential signing using email and password and this actually really looks like so continue with Google continue with um and you have got the two you know email and password and the login button so this if you want to create a customized version of your form and actually customize however you want but likely for us there's actually another version that generates or gets generated automatically from you when you add the configuration for like the next auth in here is if you go to the API auth sign in which is the same URL you put you know the next auth in here here you're gonna find something generated for you out of the box so screws in here you find an email and password and sign in or you find you know the two buttons continue to go and continue to go home and likely just right out of the box all of this in here just works like literally just works like for example if I open the application in here to check if any cookies are added or not so if you try this one and put it just like an email and password on the form that it was generated and click oh I want to just go and assign the exclusion here a new session token has to be generated for us and actually did sign us in here and everything just works just flawlessly and for you all you have to do is just basically add the configuration in here and that's it that's all you got to do and finish for example trying to sign in with Google option in here you can just click on it right over the box and that should just go ahead and sign you in with your like accounts or whatever if you have that already set up and this how you can add authentication in like around five minutes to your next GS application all right awesome now let's go back to our original form our custom form in here which we want to add the ability to authenticate to this with Google GitHub and whatever in here so we don't want to use the generated form for us we want to do something special for us when I use the custom form a custom design so much more so how can we do that yes the API is ready and API is pretty simple to use that so if you go back to the code in here and for example go to the credentials form this is actually the Forum where it allows you to put your email put your password in here and actually log in using them so how can we add the ability to do that so all you're going to do make sure to mark this as a user client because this has to be a client component otherwise you can't do event handlers and so much more you maybe can use server actions but they're still in the Alpha version so I don't want to just go ahead and whisk through that with authentication particularly so I want to just use the use clients in here and just do it and work with it using next year so I'm going to add a handle supplement in here I'm going to make sure to prevent defaults and grab the form data in here is using the current Target we have the data the second thing in here I'm going to call a function which is a special function going to be imported from the next author react so this will allow us to go ahead and sign in so we're just providing sign in you provide what is the type of sign in or provider in our case it has to be credentials you can put Google or GitHub in there and the second option here is actually the diu when I put so for the data you can have email password and here you can put redirect Falls why because if for example you've got an error if you put redirect true in here it's going to redirect you to the generated form that's going to redirect to other URL to show the error but we don't want that because that's going to look horrible in the user experience so I want to handle the error at the same component in here without doing any redirect or refresh and here after that I can just go ahead and do like oh check in if sign in response and like there is no error I can just go ahead and redirect to the timeline because I'm authenticated right that's cool but if it's not authenticated I'm going to do a set State error I'm going to say oh your email or password is wrong in here I'm just gonna log it out I'm gonna display the error and I'm done so if I go back in here let's say for example I'm going to put oh a wrong email that's gonna and I'm just gonna be wrong in here my wrong password I try to log in there you go it tells me the error oh your email or password is wrong you can't like do that but let's say I'm gonna use the right one in here I'm gonna do login and as soon as I log in screws he redirected me into the timeline in here and I can see the tweet I can just work fine it just works flawlessly all right so let's go ahead and add the continue with Google and make it work as well as like you know continue with GitHub buttons now instead of the page in here instead of like the main form in here what I had to do is actually extract those so I because this one is actually a server component so I didn't want to actually make the whole component in here a client component so instead what he did I extracted the parts that needs to be climbed into a separate component and that's actually going to save you a lot in performance when loading the website for users so here like you know those components are a client component for example here what I put I put all buttons in here which gonna be like a used client which is a user like client component in here and here I have like a couple of components all of them uses like you know unclick and stuff like that in order to authorize users so what I'm doing for example Google sign in button here has a handle click and all it does literally all it does it calls the same function like we did used before for credentials but now a cool sign in it just tells it to use Google that's it and everything literally everything is going to be handled behind the scenes for you using the next auth Library so all you're going to do is call this function sit back and relax and the same thing here goes for GitHub in here so we have that working as well so now if we try to like oh continue with Google Now as curious in here just takes us to accounts.google.com and this is actually where we're going to use the oauth and you can use any your you know authenticated user your accounts in your freezer I'm going to choose my account in here click enter and that's just going to authenticate me take me to the timeline put the cookie there as well like the session token cookie which is a DWT token and so much more and it just works flawlessly if you want to try GitHub so you can do continue with GitHub as well in here it's going to take you to GitHub it's going to authenticate you because I already authenticated and have only one GitHub account open so it's going to do that fallacy for you and just quickly as that now the last part of authentication or adding authentication to your application is actually managing the session or getting the current user's data like the current logged in users data in you know inside of the application needs so for example if we go to timeline in here and page.tsx let's say what we want to do is actually display the user name the the currently logged in username on that particular timeline page so I'm gonna do in here um to do use that there's actually two ways so it depends on exactly when you or where you want to use it so if you want to use inside of the server instead of an API route for example an API around like this or you can science server components as we have in here inside of server component here which is going to be rendered and run inside of the server you can use the git server session function from the next so here I can do session equals get server session which is like you know a function that you can just give it the auth options that you have so you have to give it the auth options so you can just auth config in here from a follow here so you have to give it that one and this lucky for us it will be a session but you have to put wait for this in order to make sure it works perfectly and what we can simply just go ahead and do in here for example I can just you know before rendering the tweets one I'm gonna do is simply um I'm just going to put it like this and I'm going to say oh H3 this is your timeline something like this and this is your timeline I'm gonna do session dot User it's going to give you the user you can have email image and name so I can just go do an email I can also use the image in here if I ever wanted to so you can do something like oh image I can just do SRC session dot user dot image I can just add some checking in here and we're good to go so now if I use my Google account here to sign in there you go it just tell me oh this is your timeline it gives you like the email perfectly and squeezing here this is actually how you get the session and how you manage it the last thing we want to do for our application is actually protecting routes for example this timeline in here we want only authenticated and logged in users to be able to view this route unless if like any other user that is not authenticated or logged in just yet if it goes to that route we want to like redirect him back to the login page so now for example if I log out and actually just you know I doesn't actually take me anywhere because I'm logged out right so I can go back to login here I can go back to timeline and I'm not logged in right I'm not logged in I can go back to timeline in here there you go this is excuse me they prove that I'm not logged in there's no session there's no data and I still be able to view the timeline which is you know pretty bad I don't want to do that so what I did in here is actually went through and it created two utility helpful functions things one is called like login is required on the server that you can call it on a server component and this one you can call it on a client component so simply what we're doing on the server get get server side like get server session and if there's no session we simply use the redirect you're going to redirect him back to the login page on the other side here for the clients what we do is actually use the session hook which is going to provide with the session and we're going to grab the router and if there is no session we just simply just go ahead and redirect him back to the login page so you can just go ahead and use those both of those back in here I'll screws in here so simply all I'm going to do in here inside of the timeline it's actually do a weight login is required and then make sure to use the server because I am inside of a server component right so I do login is required so now if you go back to it and try to you know flawlessly go to the timeline and click on the timeline because it tries to load some stuff but it just you know redirects you back over here because you have no session you can't be there and you cannot be authenticated the other one I'm going to do is actually inside of the login page in here I'm going to grab the session as well and we check oh if there is a session we just redirect him to the timeline because why would you let the user review a login page if it's like already logged in right that doesn't make sense so we're just like redirecting to the timeline because he's already logged in so let's say we want to just we're inside of the timeline here right and we're trying to go to the login page it doesn't allow us it just immediately read your access in here and that where it's fallacy again so anyway guys thank you guys for watching hope you guys enjoyed the authentication process with this really awesome library on the new next year's anyway guys catch you hopefully in the next ones

Channel: CoderOne

Views: 4,781

Keywords: react, next.js, react login, nextjs auth, react auth, next authentication, next register, next signup, next signin, next login with google, login with google, react oauth, next oauth, next oauth 2, next user login, next user signup, next user signin, react user signin, react user signup, next-auth, NextAuth.js, next auth js, next.js authentication, next 13 auth, next 13 authentication

Id: AbUVY16P4Ys

Length: 20min 35sec (1235 seconds)

Published: Sun May 21 2023