Set up Google OAuth with Next.js using Next-Auth!

today I'm going to show you how to set up oo using Google as the identity provider I'm going to run through and do this using nextjs and next off but OJs the library that next off comes from can be used with additional Frameworks so if you're using a different framework feel free to use off JS and the rest of this guide is going to be basically the same with that let's go ahead and dive in before we get into the code I want to give you a twom minute overview of oo and how it works this is going to provide a lot of context for what we're about to do and how it's going to work at a high level I'm not going to talk about the exact HTTP requests those differ between ooth 1 and ooth 2 but this is a high level that should provide the context you need the first thing we have is a user and the user is going to show up and they're going to want to use your application and your application in the context of of oaf is known as the service provider or SP for short and so the user is going to want to access the service provider now your service provider doesn't know the identity of the user so the user is going to select one of the identity providers these are things like GitHub Google Twitter X whatever the user is going to select one that they want to log in with and the identity provider is going to identify the user so let's say they do Google because that's our example and so now they're going to be redirected to the identity provider in this case Google and so here Google is going to know what your app is Google has to know what the name is Google has to know what the permissions you're requesting are Google has to know all of these things now when the user shows up on the Google identity provider they're going to be asked to log in now most people aren't going to have to do the step because they're already logged into Google this is one of the nice things about using a well-known identity provider is that most of the time they're already logged in so they don't need to explicitly do this step and then the user needs to accept reject or do fine grain control on what permissions they are allowing your app the service provider to get most of the time this is an All or Nothing although uh some providers let you have like fine grain control and explicitly allow or disallow certain things once the user has done that then the identity provider redirects the user back to the service provider your app and says here's the user information here's the user profile and these are the permissions that you have access to that the user has granted now as part of this flow if the user rejects it either they don't log in or they reject your permissions they'll also get kicked back to your app with the rejection message saying the user did not complete the flow and then your app's going to have to handle that too what we have to do now is create our application with Google so Google knows the permissions we need and all the configuration for our app to do that we head to the Google Cloud console to get to the Google Cloud console go ahead to console. cloud.google.com and this will bring you right in if you've never done this before you might need to sign up and actually create your Cloud console but once you've done all that you should land on a landing page like this now I'm in my own organization because this is a Google Apps account you might not have this exact thing if you're doing a gmail which is a regular Google account one thing to note is that I've done a lot of work in Google in AWS and Azure and Google's Cloud console is not intuitive okay so if you get lost here or confused it's not you trust me the first thing going to want to do is you're going to want to create a new project I get here either by clicking this drop down up here or you can click it right here and create new project the project is going to house all of the apis you need all the resources so make sure that this is like a new unique thing for whatever project you're working on for this let's call it Google oo YouTube because well that's what we got and then they're going to give you some weird identif fire whatever that doesn't matter too much with that you can select an organization or location the defaults are fine and go ahead and click create this is going to take a little bit of time hopefully shouldn't take too long all right now it's been created so we can select the project welcome to your project dashboard there's a lot of data here and a lot of it you probably don't need this can be very useful if you're using a lot of Google apis and it's going to show you your usage if you have any problems going on what your build is and all of that for us we're just setting up o off and so we only need to use a very small subset of this entire Google dashboard go ahead and jump into apis and services and the first thing we're going to want to do is go to the O off consent screen you can set up ooth with one of two ways within Google one is you can have an internal app so because I'm in an organization this is an option you might not even have this as a specific option when you do it internal means only available to users within the organization this is really nice if you're working on an internal app for a company and your company already has Google accounts for everybody for us we're going to do external this is available to anyone with a Google account now because it's external there are additional checks and balances that you have to do before you can make it really really public but this will make it available for anybody on the internet let's go ahead and create it so here we need to supply your app information this is what's going to be shown to the user when they go to the allow your application to access this user's data screen so again for here we can do Google o off YouTube this is going to be an email that you have access to right so it should be your email here you can upload your app logo if you change this later your app might need to be re-reviewed but it's also not necessary if we're just setting this up to do some light testing for the app domain you're going to want to provide your homepage privacy and terms of service link these should be real links to real products uh and real pages but for now I mean we'll just pretend like we're running this all on Local Host and then we have the authorized domains the authorized domains are required when you have your application shipped to production so for right now we don't need to do anything here because the only domain we're using is Local Host this should be your email again and save and continue Scopes are how you request permission for your application you should always request as few permissions as possible because if you ask for everything it's going to scare a lot of users away Google has a couple of different types of Scopes nonsensitive Scopes are scopes that they deem something that a lot of applications are going to ask for and they can't do any real harm with them these are all very common and they're all readon sensitive Scopes allow you to access private user information and some sensitive Scopes let you even change some information restricted Scopes are even more sensitive and you should only ask for that if you absolutely need them so for here we're going to add or remove Scopes here are all of the scopes for everything Google has to offer there are lots and lots of lots of these Scopes however to get started you really only need three this is you associate you and your profile with Google uh the user info profile and the user info email so these are like the bare minimum I suggest to get in order to be able to correctly create your user and identify them and get something useful like the email go ahead and click update at the bottom and then you'll have your Scopes listed here go ahead and save and continue and now you're going to want to add test users now if you're doing an internal app you don't need to do this but because we marked ours as external we need to say what users we can log in with for now I'll go ahead and add myself this UI is a little tricky if you just click add here it doesn't actually work you have to click off it first then click add and then it shows up once you've added whatever user you want to test with I recommend testing with the user you sign up with and then also one additional user to make sure it works well go ahead and save and continue here and we get our summary of what we just did with that we can go back to the dashboard so that's creating the oath consent screen but now we have to go through and actually explicitly set up the application details that our app is going to be using this is going to include where requests are coming from and what the redirect URL are so to do that go to credentials here and we're going to create new credentials and this is going to be the oof client ID when we create this we can select what type of application we have in this case it's a web app and you can give this an exam as well this will be example content app I recommend using the same name whatever you pick you want to do here whatever JavaScript origin your page lives on so this is going to be for testing Local Host 3000 and then in production it's going to be the domain you're using in production for the authorized redirect URI this is also going to be Local Host 3000 for testing but then it's going to be explicitly the call back URI that Google is going to send you back to we're using next off for this that's going to look like API off called call back Google because this is the Google provider go ahead and click create and here you get your client ID and client secret we're going to take these and toss them into our app as environment variables and before I post the video we're going to delete all of this so it is secure you can also download the Json if you want to have a hard copy lying around however we just need the ID and the secret and with that we're done with the Google Cloud cont and we can jump into the code here I have a brand new nextjs project and I've only done a couple of things to get it started I've installed the Prisma client and Prisma which I'm simply using as an omm you can use whatever you want including superbase or some other omm and then we also have installed next o which is what we're going to use to wire up the authentication for Prisma I have a simple user model here with an ID email name an optional Avatar and then simply create at an updated that most of my other tutorials will have a tenant which I recommend as a higher level but for here and this we just simply have a user that will create in our database from here we simply set up next off and use it with Google go ahead and create a new file and this is going to be API off next off and then route. TS this is in the app directory if you're using the p directory the name is a little different but the content should be very similar the first thing we're going to want to do is read out the environment variables that we're going to want to set so this is the Google client ID and the Google client secret we're going to use that for the Google provider next we're going to run through and set up the next off options and configure next off here we're going to use a JWT session strategy which works fantastic with oo you don't need to keep round session tokens or save anything to a database all you have to do is is give your users their JWT and when that expires they can relog in again then we're going to set up the Google provider and passing in the client ID and the client secret again these are read from the environment and we're passing them to the provider pretty straightforwards now we're going to configure some callbacks now the call back we mostly care about is the signin callback this is going to be called when the user signs in with their Google account and are redirected back to our application when that happens we need to look at the information Google gives us and then decide if this user already exists and update it or if we need to create a brand new user and save it to our database here is the signin callback and the first thing I like to do is check to see if we have the information in this case we're looking up the email in the profile and if that wasn't provided we can't do anything because that's the unique key we're using to look up our user and then the next thing we need to do is use the magic of upsert to either create create or update the user so here we're awaiting Prisma user upsert and we're checking based off of the profile email which we know we have because we checked up here to make sure we had it now if we don't have it we're going to create a new user passing in the email and their name otherwise if we did find the user we're going to update the name with a profile this way if the user changes their profile name on Google and they relog in to the application you you can update their name in the application here lastly return true for the signin and that's all you have to do lastly after all that we need to make sure that we are exporting the information and we should be good to test so on the homepage what I'm going to do here is delete all this and because this is a server component by default we can look up the user session and then we'll simply display what it is and if nothing is there it'll be null and that's fine too before we can test this we have to create our environment file with those environment variables we got from Google so here we have the secret the ID our next off URL which is whatever root domain the website is hosted on and you want to pass in the next do Secret in this case it can just be secret something useful for local testing so here you want your Google client ID and Google client secret make sure you get these in the right order now we can test all right so we currently have no session which is perfect now if we go to API off sign in it's going to bring us to the default next off signin page we click sign in with Google this is going to send us to Google as the identity provider all right so here we have to sign in because this is my developer environment I currently don't have an account signed in so I can go ahead and sign in remember this has to be the user you set up as a test user sign in and there we go we didn't even have to go through the oo consent screen and now our user actually has a session created let's go ahead and fix that awful background so once we signed in we went through the ooth process where Google validated our profile and then sent back the information and so we got our name email and an image associated with our profile now remember we had a Prisma uper of user in our database so if we go ahead and check out our database and refresh here we have my user that was created with the information we got from Google fantastic successfully set up Google oo to use with our application and tested it end to end locally now what you're probably going to want to do is be able to do this on production as well so when you move your app to production there are a couple of things that we have to do to update the ooth configuration to make sure it also works in prod let's say you have your project hosted on versel this could be any other host that you want the important thing is that you have a production domain name so let's run through and make sure we have production set up so it works the same way as it does locally first thing you want to do is make make sure you know what your production URL is in this case it'll be this guy this can be whatever you have configured so let's go ahead copy that open up settings I like to do this in a new tab and this is going to be our next off URL make sure this is the full thing https and the full URL that you have have for next off then what you can do is you can go ahead and copy the rest of the environment variables and paste them all into this field now instead of secret here you're going to want to pick something like something long and complex and that is actually a secret and make sure you have your Google client secret and ID as well now these don't need to be set in development but you probably want them set set in the preview environments and production go ahead and click save and now you have the four environment variables added to your project now in order for these to take effect we have to go ahead and redeploy the application but before we do that let's head back to the Google console in the Google console we need to update the client to say we have additional authorized JavaScript Origins the first one goes here and that's going to be whatever your domain is and then we also want to make sure we add a new redirect URI and that's going to have the same route but it's going to have the updated domain so go ahead and click save note that it can take a couple of minutes for this to go to into effect so feel free to take a small break before testing this out if you are running through this end to endend make sure that you have a postgress database or whatever datab database you're using set up to work in production already and then add the database URL into your environment so now we should be able to sign in with Google and this is going to do the full OA process and because I don't have a database we're going to skip that real quick and we should have our JWT given and we should be logged in voila just like that we have the same thing our name profile image this is the session information that we're getting from next off and it shows we've gone through that signin process and we've logged into our application I hope this was useful for you as you go through and set up o off the Google Cloud console can be a little confusing but otherwise the whole flow is relatively straightforwards let me know if you want to see other providers I'm planning on doing a couple more to set it up and otherwise if you like this give it a like And subscribe and until next time time happy coding

Channel: Build SaaS with Ethan

Views: 4,776

Keywords: next, nextjs, next.js, react, software, coding, software engineering, next js 13, next.js 13, Nextjs 13, Next 13, oauth, oauth provider, identity, google oauth, oauth google, next-auth, next auth, authjs, auth.js

Id: ot9yuKg15iA

Length: 21min 0sec (1260 seconds)

Published: Thu Sep 21 2023