Step-by-Step Guide: Adding Google Authentication with NextAuth in Next.js 13 and MongoDB

hi everybody Welcome to GT coding in this video we will see how to add Google authentication to your app using next auth so first of all let me just give you a demo so here we have this simple home page and we can click on any of these sign in buttons I'll just click on this button right here and here we can see that we are taken to the Google login page and let's log into our account so I'll just click on the email ID and here we can see that we are logged into our Gmail account and we are getting the name from the Google account and also the email ID over here and we are also getting the profile image and when we click on this sign out button now we can see that we are signed out of our Google account and here we are on the login screen and when we log in for the first time with our Google account we will also store the details into a mongodb so that we can also add some additional data to the database so we will do all of that in this video let's get started right so here I have created this folder called Google auth and I just opened it with vs code now let's create a new Next app so let's click on view and let's click on Terminal and here let's add our Command so you can just type npx create next app at latest and let's also add a DOT over here to create the app in this current directory so let's press enter let's press enter once again and now you need to answer some of these questions so for typescript I'll just select no and yes for eslint and Kevin CSS will select yes and now for the SRC directory and for the app router we need to select yes and we'll just keep the default import LS and now we can see that the app is being created and with that our app has been created and we can just open the app by typing npm run Dev and let's just open this link and here is our next app and this is the default homepage of our app now let's go ahead and create the design of our app so let's go back and let's go to the app folder and here we have this file called page.js and in that we have all this code and this is the design that is displayed in our home page over here so I'll just go ahead and delete all of that so let's delete everything inside the return and here for now I'll just type hello and now if you go back to our website here we can see that it says hello and let's also remove the default styling so let's go to the global.css file and I'll just delete everything after this Tailwind code and now we can see that all the styles are gone and now we can start with the design of our app now the first thing we need to do is we need to go ahead and set a Max width for our design so if you go back to our project here we can see we have this file called layout.js and this is a file which is basically a container for all the app so here we can see we have the HTML tag and we also have the body tag over here and in that we have the children now this children is basically all the design in our app so let's go ahead and create a container division for these children and let's add a Max width for that so I'll just create a div and I'll just add this children inside the div and let's add some Styles over here so I'll just type class name and we are going to use Tailwind CSS to style this so let's go on top Max W of 3XL and if you hover this we can see the Styles over here so we have set a Max width of 768 pixels now if you're not able to see this CSS you can just go ahead and install an extension called Tailwind so if you just search for Kelvin CSS here we can see we have this extension you can just go ahead and install this Telvin CSS intellisense and now let's go ahead and bring everything to the center so I'll just tap MX to set the margin left and right and let's set it to auto and now if we go back to our website now we can see that we have this Max width and if we just add a background color so if I just tap BG red 500 here we can see we have this Max width and our content is in the center right now let's go ahead and start with the styling of the login page so the first thing we need to do is we need to create a nav bar so this is the nav bar now we need to have this nav bar in all the pages of our app so let's go ahead and create a component for the nav bar and we'll just add it inside this layout file so that it is in all the pages of our app so let's go over here outside our app folder let's create a folder called components and in this components folder let's create a new file and I'll just call it navbar Dot jsx and for the nav bar let's tap export default function and I'll just call it navbar and here let's tab return and in the return we need to have a div so let's create a div over here and in this div on the left side we need to have a logo so here we can see we have this logo now for the logo I'll just create a link so I'll just tap link over here and let's import link from next link and in this link we need to have an hrf and for the sref I'll just set it to forward slash so this will go to the home page and here I'll just type GT coding right now let's go ahead and add this nav bar to our layout file so let's go to the layout.js file and here inside the body and inside this div let's import the nav bar over here so I'll just type nav bar and we'll just import it from components now bar and now if you go back to our website here we can see that the nav bar is being displayed we have the logo displayed over here right now let's go back to the nav bar and let's continue designing it so here after this logo we need to have this button for signing in so let's create a button for that and in this button I'll just type sign in and let's go back and this is how it looks now let's go ahead and style it so for the container division let's go ahead and add some class names so let's set the padding to 4 and we set the display to flex and I will set justify between so that the items are to the extreme left and right sides so here we can see we have the logo on the left side and the sign in button on the right side and we'll also bring everything to the center vertically so let's tap items Center and let's also add a shadow so I'll just tap Shadow and we'll just set the shadow to MD which is medium and this is how it looks right now let's go ahead and style this logo so for the logo let's add some classes so I'll just type class name and let's set the font to bold and we'll set the text size to large and we'll see the color of the text to Blue 700 and this is our logo right now let's style this button so for the button let's add some classes so I'll just have class name and let's set it to background of slate 900 and let's set the text color to white and let's set a padding left and right of 6 which is a padding of 24 pixels and let's set the padding top and bottom to two and we'll also set rounded corners and let's say to medium and let's go back and this is how our nav bar looks right now now the next thing we will do is we'll create this sign in button now what we need to do is when we are signed into our account we need to show a different screen so this screen right here and when we have signed out we need to show this sign in screen so we're going to create a single component for that and I'll just name the component user info so here inside components I'll just create a new file and let's call it user info Dot jsx now in this we will display the sign in button if the user is not signed in and we will display the user info if the user is signed in so let's go ahead and type export default function and I'll just call it user info and here let's type return and you need to see whether the user is logged in or not so for that we need to use an if condition and we need to use the next auth package for that but for now we'll just create the sign in button so I'll just create a component for the sign in button so here in the components I'll just create a new file and let's call it sign in button Dot jsx and here let's tap export default function sign in button I'll stop return and for now I'll just type div sign in button and let's go back over here to the user info now let's import the sign in button over here so I'll just type sign in button and here we can see it has Auto imported over here right now let's go ahead and import this user info component into our main page so if you go to this app folder here we have this file called page.js and I'll just change this to jsx and here instead of hello I'll just import the user info component so here I'll just go ahead and create a div and here I'll just type user info and let's import it from components user info and I'll just delete the import of the image over here let's close the tag right now let's add some styles to The Container division so we need to bring everything to the center of the screen so let's go ahead and add some classes over here so I'll just type class name and let's type grid to set the display to grid and let's start Place items Center and let's set the height to screen which is 100 viewport height and we also need to add a negative margin to compensate for this nav bar so I'll just tap minus empty and I have calculated it to be 24. so let's go ahead and see how it looks and here we can see that our sign in button is in the center of the screen right now let's go ahead and style this sign in button so let's go back and let's go to the sign in button component let's just change this into a button and in the button let's type sign in with Google now here we also need to add an image so here we can see we have the Google logo so let's go ahead and add the image over here so I'll just type image and we can import image from next image now here in the image we need to add a source so I'll just type Source equals and here I have pasted this image inside this public folder and it is called Google logo.png and we're going to use this image so let's type forward slash Google logo dot PNG and let's say the height of the image to 30 and we'll also set the width to 30 and let's go back and here we can see we have the image displayed over here now for this text we need to have this blue background color so let's go ahead and add this inside a span so I just have span and let's add this text inside the span and let's add some classes over here so I'll just type class name and let's set a background color so I'll just tap BG blue and let's set it to 500 and let's say the text color to white and I will say the padding left and right to 4 and padding top and bottom to three and this is how it looks right now we need to bring this logo on the left side and this text on the right side so let's go to The Container which is the button and let's add some classes so I'll just have class name and let's set the display to flex and items Center and let's set a gap of 4 and we'll also add a shadow of Excel and let's set it to rounded large this is how it looks let's also add some padding left so here let's tap PL and let's set it to three and now it looks alright and with that we have completed designing the home page of our app now it's time for us to add next Dot and add Google authentication now for adding Google Earth we need to install a package called next auth so let's go back to the terminal and I'll just close this server so you can just press Ctrl C and let's type npm I and we're going to install a package called next auth and we'll also install one more package for storing the data to a mongodb database so let's type Mongoose so we're going to use this package to access the data from the mongodb database so let's press enter right now let's go ahead and start our server back so let's type npm run Dev and here we have our server running once again so let's go back and the first thing we need to do is we need to create a folder inside the app directory and we need to name it API and the API folder we need to create one more folder called auth and in the auth folder we need to create one more folder called square brackets and in that you need to type dot dot dot next auth and then in this folder we need to create a new file called route dot Js make sure that you have created these folders with the same exact names right now you need to write the code for next auth so first of all we need to import next auth from next auth slash next so let's tap import next auth from next auth slash next now since we're going to use Google authentication let's import Google provider from next auth forward slash providers forward slash Google right now we need to create an object for the options so let's tap const and I'll just call it auth options and in this object we need to have providers so let's start providers now here we're going to add the list of all your providers we're going to use a Google provider in this so I'll just tap Google provider and in this we need to add the client ID and the client secret so let's type client ID and you need to add the client ID and Divinity type client Secret and you'll need to add the client secret and now we need to export this so let's create a const and let's name it Handler and uh we need to set it equal to next auth and here we need to provide the options which is called auth options so let's tap auth options and the Navigator export it so let's type export now we need to export it as get and post so let's tap Handler as get and Handler as post now the next thing we need to do is we need to add the client ID and the client secret over here now we'll be adding them inside an environment variable so that the values are safe so let's go outside the app folder and let's go to the root of our application I'm going to create a new file called dot EnV and here we can store all the environment variables and now here let's go to the git ignore file and let's add this EnV file over here so that it is not pushed to the repository so I'll stop dot EnV and let's close it right now we need to get the Google client ID and also the Google client Secret now here I'm in the documentation of next auth and if we scroll down here we can see that we have the configuration link over here so you can just go to this link and you can get the Google client ID and the client secret from here and I will also provide this link in the description of this video so let's go to the link and you need to log into your Google account for this and the first thing we need to do is we need to create a new project so I already have a project over here so if you don't have a project you can just create a new project so I'll just click on new project and you can just name this anything you want so I'll just name it Google Earth test and let's click on create where the new project has been created so let's switch to the new project so I'll just click on this drop down and let's select Google Earth test now here we need to go to credentials and go to create credentials and click on oauth client ID but here we can see it says that to create the oauth client ID we need to First configure our consent screen so let's click on configure consent screen and here we have these options so you need to select external and click on create and then you need to add the name of the application so I'll just call it auth test and for the email ID I'll just add this current email ID and here also we need to add the email ID so let's add the email ID over here and now let's go ahead and click on Save and continue and then here we have these options you can also add and remove Scopes from here and click on Save and continue and then we have the test users and I'll just go ahead and go back to the dashboard and now let's go ahead and click on credentials and here we need to click on create credentials and oauth client ID and he will select the application type as web application and for the name I'll just type Google Earth test and let's go ahead and add the authorized JavaScript Origins so for that you need to go back to the website and we need to copy this link from here and we need to paste it over here and it should not end with forward slash so I'll just delete it and here for the authorized redirect Uris we need to add the URL of our home page forward slash API forward slash oauth forward slash callback forward slash Google you need to add this exact URI over here and here instead of localhost 3000 you can add the link of your website and now let's go ahead and click on create and here we can see that our client ID and client secret are displayed over here so let's click on copy and let's go back and let's paste the client ID over here and let's go back and let's copy the client secret from here and I'll just paste it right here now when we use next auth we also need to add some environment variables over here so we need to type next alt URL and we need to set it to the URL of our website so let's go back to our website and let's copy this URL and let's paste it over here and then we also need to add next auth Secret and here you can generate a random text and add it over here now the next thing we need to do is we need to wrap the app with the provider of the next Dot so for that you need to go back to the app folder and we need to create a new file called providers dot JS now you need to use something called the session Provider from next auth and we need to wrap it around the app so we will wrap it inside the layout.js file so let's go back to the providers.js file and here let's type import and we need to import session provider from next auth slash react now when we use the session provider we need to change this component into a client component so let's tap use client over here at the top and you need to export this session provider so let's tap export and I'll just call it next auth provider and here we need to get the children and we need to pass the children inside the session provider so here we need to type return and session provider and in the session provider we need to add the children now we can go ahead and add this next auth provider to our layout.js file and all the content that we have inside the provider will be passed as children to this and it'll be added over here so let's go back to the layout.js file and here we'll just wrap everything inside the next auth provider that we just exported over here so here let's type next auth provider and it is auto imported over here and I'll just cut this ending tag from here and let's paste it down here right now our whole app is inside this next auth provider and so we'll be able to use the methods inside the next art Library so first of all let's go ahead and test the sign in so let's go to this component called sign in button.jsx and we will add the sign in capability for this so what we need to do is we need to add an on click event listener to this button and when we add event listeners we need to change this into a client component so let's tap use client over here and now here let's go ahead and import sign in from next auth react and we're going to use this sign in method over here so here in the button let's type on click and you need to type Arrow function sign in and you need to pass the name of the provider which is Google and now let's see whether this works so let's go back to our app and let's click on this login button and we have this error so let's go back to our code and let's see what's the problem I think we forgot to add the values over here so here we need to add the Google client ID and the client secret so it is inside the environment variable so here we have Google client ID so let's copy this and you have any to type process dot EnV Dot the name and then we have a Google client secret so let's copy this and let's type process dot EnV dot the name and let's go ahead and restart our server so let's type npm run Dev and let's go back to our application and let's see whether it works so let's click on the sign in button and here we can see that we have the Google login screen displayed over here let's click on our email ID and here we can see that we are logged into our account and let's see whether we are actually logged in so for that let's change the sign in button to sign out when we are logged in so let's go to the navbar component where we have the sign in button at the top now what we're going to do is we're going to display the sign in button when we are not logged in so for that we need to check whether the user is logged in so for that let's go ahead and import something from next auth so I'll just type import and we need to import use session from next auth react now for using use session we need to change this into a client component so here let's type use client and here let's type const and let's get the status from use session so let's tap equals use session right now let's add this button inside a conditional so here let's add curly braces and let's type status equals authenticated so if the status is authenticated then we'll just display this button so I'll just cut this from here and let's paste it over here and if it is not the case so let's add colon and here let's go ahead and copy this same button from here and let's paste it down here and here let's change this to sign out and this one to sign in so now what will happen is that when we are signed in then the button will display sign out and when we have not signed in then it will display sign in so let's go back to our app and now we can see it says sign out now let's also go ahead and add the functionality of sign out and sign in over here so we need to import them from next auth react so here let's type sign in and sign out so here for the button let's create an own click and here let's start add a function and let's type sign out and for the sign in button let's type on click Arrow function sign in and you need to type Google and now let's go back and let's test whether this works so let's click on the sign out button and now we can see that we are signed out of our account and here it displays sign in so now let's click on the sign in button and now we can see that we are signed into our account right now the next thing we need to do is we need to display the user info over here when we are signed in and when we are signed out we need to display this login button so for that let's go back to our component which is user info and here right now we are just displaying the sign in button so here first of all we need to import use session from next auth react and since we are using use session we need to change this into a client component so let's tap use client over here now you need to get the status and also the data that we get from the session so let's go ahead and type const and status and we'll get the data and I'll just rename it to session and we're going to get it from use session and now here let's add an if condition and let's type status equals and let's see whether it is authenticated and if the status is authenticated then for now I'll just display a div and let's tap user info and here let's add an else and if it is not the case then we need to return the sign in button and here also we need to type return and we need to add this div inside the return now let's go back and let's see whether it works so let's click on the sign in button and now we can see it says user info and if I sign out we have the sign in button displayed over here all right now let's get the actual user data so here let's go ahead and first of all get the image so I'll just import image from next image and here in this image we need to add a source and also a width and a height so let's say the width and the height to 60. and for the source we will get the source from this session so let's tap session and here if you have the session then in that we will have user and if you have the user then in that we'll have image and now if you go back now here we have this error because we are getting the image from an external website so we need to add this to our next config so let's copy this link from here and let's go back to our code and let's go to the next dot config.js file and here inside next config we need to type images and in Divinity type domains and here we need to add the link so let's add the link over here and now if you go back let's refresh this page and now we can see that the image is being displayed over here let's go ahead and also display the other data so here after the image let's go ahead and create a div and let's type name and here let's add the name inside a span so here let's type curly braces and if we have a session then in that we will have the user and if you have the user in that we will have the name and now we can see that the name is being displayed over here and in the same way let's also get the email ID so let's type div let's tap email and here we'll create a span and here let's type session user email and here we have the email ID displayed right now let's go ahead and style this so here for the image let's add some classes so the start class name and let's type rounded full and now we can see we have this round shape and here for the name in the span let's tap class name and let's set the font to bold and we'll do the same for the email so here I start class name font bold right now let's add some styles to The Container division so here we have this div and here let's add some classes so I'll just type shadow and let's set it to excel and let's add a padding of eight and let's set it to rounded medium and let's set display to flex Flex direction to column and let's add a gap of 3 between the elements and we'll also change the background color to Yellow 200. and that's basically it with our user info so let's go ahead and click on sign out and here we have the sign in button and if I click on sign in we get these details from our Google account right now it's time for us to add the data to a mongodb database now you can just search for mongodb Atlas and you can create a free account so I'll just go over here to mongodb atlas and you can just sign up and create a new account I'll just sign in with my Google account right here I have created a new mongodb Atlas account and let's select this free version over here and let's keep all of these as it is and let's click on create and here we can see we have this username and password so I'll just change this to GT coding and here we have this password so I'll just copy this and save it somewhere so let's go back to our vs code and I'll just paste the password over here we will need it later and let's create this user and now you need to add the IP address so I'll just type 0.0.0.0 forward slash zero so this will be accessible from anywhere so I'll just click on ADD entry and let's click on finish and close all right so here we have our database and let's go ahead and click on connect and let's click on mongodb for vs code and let's copy this connection string from here so let's click on copy and let's go back and let's paste it over here in the environment variables so I'll just tap mongodb URI and let's set it equal to the connection string and here instead of this password we need to add the actual password so let's copy this from here and let's paste it over here and here at the end we also need to add the database name so I'll just call it Google Earth test right now the next thing we need to do is we need to connect to the database so here let's go outside the app folder and let's create a new folder called lib and that will create a new file called mongodb.js and he will write the code to connect to our mongodb database so we will connect it using suggest app import Mongoose from Mongoose and let's tap export const and I'll just call it connect mongodb and it is going to be an async function and here we will add a try catch block and here in the try let's type await Mongoose dot connect and you need to add the connection string so we can just type process dot EnV and here we have saved it as mongodb URI so let's copy this and let's paste it over here and then let's also add a console.log and here we'll just type connected to mongodb and here in the cache let's go ahead and console.log error connecting to database and let's also log the error all right so this is basically the code to connect to the mongodb database now the next thing we need to do is we need to create a schema now a schema is basically the structure of our collection here in our application we'll just store the email ID and the name to our database so in our schema we will have the email ID and we'll set the type to string and also the name and we'll set it to string as well so let's go ahead and create the schema so let's go back to the root of our application and let's create a new folder and I'll just call it modules and let's create a new file called user.js and here first of all let's import Mongoose from Mongoose right now let's go ahead and type const and I will just name it user schema and we need to set it equal to new schema and we'll just import it from Mongoose and here in this we need to add all our Fields so the first one is email so let's tap email and in this email let's type type and let's set it to string and we'll also set it to required of true right now let's add another field which is name and here let's set the type to string and also required to true and then we'll also store the date so we can just add it over here by just typing timestamps and set it to true and it will automatically store the date and the time right now you need to type const and I'll just call it user equals and I'm going to type Mongoose dot model and let's tap user and here we need to add this user schema so stop user schema now if you already have the model then we'll just type models and I'll just import it from Mongoose Dot and we will have a model called user and here we'll just add an or now here if you already have a model then it will just store the model over here and if you don't have the model then it will just create this user model with this schema and now let's go ahead and Export this so I'll just stop export default user right now let's write the code to store the data to our database so for that let's go inside the app folder and in that we'll go to the API folder and here we will create a new folder and we'll just call it user and in that we'll create a new file called route dot JS and here we can write the code to add the data to our database now if you want to learn more about the crowd operations in mongodb I already have a video on that you can go ahead and check that out I will leave the link in the description of this video right now here let's tap export async and let's have function and it is going to be a post method so let's tap post and he will just get the request I'll just call it request now here the first thing we need to do is we need to get the name and the email from the request so just tap const and I'll just destructure it over here so I'll just type name and email and we'll get it from request dot Json and we also need to add a weight over here because this is gonna return as a promise and the next thing we need to do is we need to connect to the database so let's type await connect bongodb and I will just import it from lib mongodb right now the next thing we need to do is we need to add the data to our database so for that let's tap of it and we need to import the user model from Models user ability to type dot create and here we need to add the data so the data that we have our name and email so let's type name email and then lastly let's go ahead and return a next response and we'll just import it from next server dot Json and here let's type message and let's set it to user registered and let's also add a status code and let's set the status to 201 right now the last thing we need to do is we need to perform a fetch call to this API so it is inside API and this user folder should be inside the API folder so let's move that all right so here we can see we have app in that we have the API folder and in that we have user and in that we have this route.js file and now let's go ahead and see whether the fetch call works or right so for that we will just use Postman to test this API endpoint all right so this is an application called Postman and you can use this application to test your API endpoints and you can just download it for free from Google so let's go ahead and create a new request and let's tap HTTP localhost and I think it is 3000 so it is 3000 and in this we have this folder called API and in that we have user so let's type forward slash API forward slash user and I'm going to change the method to post and let's go over here to body and let's select row and let's change this to Json and here we need to add the name and the email so let's type name and let's add a test name over here and then let's tap email and let's type test gmail.com and let's click on send and let's see whether everything is working all right so let's click on send and here we can see we have this response user registered so let's go to our mongodb database and uh let's click on browse collections and here we can see we have Google or test and in that we have users and we have the test user displayed over here so the API is working all right now let's go ahead and store the data of the user when the user signs in for the first time so I'll just close this Postman application and let's go to this next auth route.js file now here in next oauth we can also use callbacks so let's tap callbacks and we have different callbacks in next oath and one of them is called sign in so let's type async sign in and here we get some data so I'll just restructure the user and the account and for now I'll just go ahead and console.log the data so let's go ahead and type console.log user user and console.log account and account and for the sign in to work correctly we also need to return the user so just type return user right now let's open the terminal and let's see whether we get these values let's go back to our website and let's click on sign in now we can see we have signed into our account and let's go back to the terminal and here we can see we have all the data displayed so in user we have the user ID we have the name and also the email ID and also the image and in account we have the provider which is Google and some other things over here so let's go ahead and write the code to store the data to our database so the first thing we need to do is we need to check whether the account provider is Google so here let's type if account dot provider equals Google and if it is true then we need to add the data so let's create a try catch block and here in the trial let's go ahead and perform a fetch call so let's type await Fetch and here we need to add HTTP localhost 3000 API user and then we need to add an object with the options so here we need to type method and we need to set it to post and then we need to type headers and for the headers let's type content type and let's set it to application Json and then lastly we need to send the Body Solid star body and we need to send it as Json so let's type Json Dot stringify and you need to send the name and the email so I'll just restructure it over here so here let's type const and I will destructure it from user because we are getting it from user and that we have name and email so let's type name email from user and he will just pass the name and the email so let's type name email and let's go ahead and store this result inside a const named res and let's go ahead and check whether it is okay so let's type if let's have rest dot ok then we'll just return the user so when we return the user it will actually sign in and here in the cache let's go ahead and type console.log error right now let's go ahead and see whether this works so let's go back to the mongodb database and right now we just have this data that we tested so let's go ahead and sign out and let's click on sign in let's go back to our mongodb database and let's refresh this page and if you scroll down here we can see that we have the data from our Google account so we have the email ID and the name displayed over here and right now if you just sign out and sign in once again and if you go over here and if it refers this page we can see that the data is stored once again so we need to make sure that the data is not already available in the database before storing it in the database so for now I'll just go ahead and delete all this data right so I have deleted all the data and now let's go back to the code and here let's check whether the data is already available so for that here I'll just type await and let's connect to the database so I'll just type connect to mongodb and we'll just import it from lib mongodb and then we need to type await user and we need to import user from Models user so here we have it and Dot find one and given it to pass the value that we need to find so the unique value is email so I'll just type email over here and I'll store it inside a variable called user exists and we'll just add all of this inside an if block so here let's type if the user does not exist so let's tap exclamation user exists and let's copy all this code from here and let's paste it inside this if condition so this is how the code looks first of all we are just checking whether the provider is Google and if the provider is Google then we are proceeding to destructure the name and the email from the user and then we are using this try cache block and in that we are first of all connecting to the database and then we are checking whether the user already exists with this email value and if the user does not exist then we'll just perform a fetch call to this API user with the method of post and with this data which we are getting from the user and then if everything goes all right we'll just return the user so now let's go ahead and save this and let's see whether it works so let's go back to our website and first of all let's refresh this mongodb database and right now we don't have any data over here so let's go back over here sign out and let's click on sign in and here we can see we have signed into our account so let's go back to the mongodb database and let's refresh this page and now here we can see that the data is being stored in the database we also have the timestamps and now let's sign out and let's sign in once again and let's see whether the data is stored again so let's click on sign in and here we can see we have signed in so let's go back to our database and let's refresh this page and here we can see that the data is not stored once again so whenever the user signs in for the first time the data is added in the database right so that's basically how you can use a Google authentication using next auth and also store the data in mongodb all right so that's basically it for this video if you have any doubts you can ask in the comments below and I will leave the link of the source code in the description of this video so if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day

Channel: GTCoding

Views: 13,769

Keywords: gtcoding, Google OAuth, User authentication tutorial, Next.js authentication, Next.js tutorial, Next.js 13 tutorial, Next.js authentication tutorial, Next.js Google authentication, Next.js user authentication, Next.js MongoDB integration, Next.js authentication with NextAuth, Next.js tutorial for beginners, Next.js authentication with Google, Next.js authentication with MongoDB, Next.js user authentication tutorial, Next.js authentication example, gtcoding complete course

Id: 6N3Rumo-c3s

Length: 47min 1sec (2821 seconds)

Published: Fri Jul 14 2023