Up next in 10
How to Build Next.js Google OAuth2 Login & Logout System in Browser Using MongoDB Database in TS
Aug 30, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/how-to-build-next-js-google-oauth2-login-logout-system-in-browser-using-mongodb-database-in-ts/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
Show More Show Less View Video Transcript
0:00
Uh, hello, guys. In this video, I'll
0:01
show you how to build out a Google login
0:04
and logout system inside Next.js and
0:07
MongoDB. So, this is actually the
0:09
interface of the application. So, we
0:11
have integrated all the three Google
0:13
login types. We also have pop-up.
0:16
We have Google Identity Services.
0:19
And then we also have Google OAuth 2
0:21
redirect, which is the old version of
0:23
authenticating.
0:24
So, I have actually made this
0:26
application from scratch. This is
0:28
actually the full directory structure.
0:29
It's the Next.js full-stack server-side
0:33
application where we authenticated
0:35
Google login.
0:37
So, I've given the link in the
0:38
description. You can directly purchase
0:40
the source code. So, once you purchase
0:42
it, you will be automatically be
0:43
redirected to Google Drive where
0:45
a zip file will automatically be
0:47
downloaded after the payment.
0:50
So, let me show you the demo of the
0:52
application first of all.
0:54
So, as you see, I'm running this
0:55
application. We started this local
0:57
development server. NPM run dev.
1:00
It started this
1:02
local development server. So, now if I
1:04
try to authenticate
1:06
using this pop-up login,
1:09
I will be redirected to
1:12
the dashboard page
1:14
where you can see we see the profile
1:16
picture. This is your dashboard page. We
1:19
see the email address, display name.
1:21
This is Google ID.
1:23
So, the method is one-tap Google login.
1:26
So, all the things are shown to us. And
1:28
also this is stored inside MongoDB
1:31
database.
1:33
So, this JSON response is returned to us
1:35
holding all the information. If I show
1:37
you MongoDB database, if I refresh it,
1:41
it will create a new folder,
1:43
new database Google login Next.js.
1:46
So, automatically, as soon as you do
1:47
this the very first time, the database
1:49
will be created and it will create a
1:51
collection or table such as users.
1:55
And it will contain all this information
1:57
such as the display name, email address,
2:00
Google ID, email and profile picture,
2:02
everything.
2:04
So, we are storing this information in
2:07
MongoDB database. So, if I try to once
2:10
again visit this, it will automatically
2:12
detect
2:13
that you are logged in.
2:15
Again, if I go localhost:3000,
2:19
so you will see that it automatically
2:21
detects that you're logged in.
2:23
And if I try this with a different
2:25
account,
2:27
this also will work.
2:29
Again, I visit localhost:3000.
2:33
This time I use a different Google login
2:35
method. So, this is Google Identity
2:37
Services, GIS.
2:39
It's actually open this pop-up window
2:42
where you select your account. This is
2:43
the second type of Google login
2:45
authentication. So, we integrated all
2:48
the three methods which are there.
2:50
Again, it redirects you to the
2:53
It shows you the profile picture,
2:54
display name, email address. You also
2:56
have the log out button as well.
2:59
If I refresh the database,
3:04
so if I refresh it, now there will be a
3:07
second entry which will be there as you
3:09
see. Name, profile picture, email
3:11
address, everything is inserted.
3:14
So, it's a complete Next.js full stack
3:16
Google login and log out project, guys.
3:18
If you are interested, the link is given
3:20
in the description.
3:21
You can even log out. If I click the log
3:23
out button, we are successfully logged
3:25
out.
3:26
And let me show you the third method
3:28
which is
3:29
a Google OAuth redirect. So, this is the
3:32
old method by which we authenticate
3:34
where we redirect to the screen, then we
3:36
need to allow the permission, click on
3:38
continue.
3:40
And this also does the same thing,
3:42
redirect you to the dashboard page. So,
3:44
if you're log If you're looking forward
3:46
for
3:47
Google authentication system integration
3:49
in Next.js
3:50
and MongoDB, this is the correct video.
3:53
I've given the full project source code
3:55
in the description of the video. You can
3:57
directly purchase it.
3:59
And now do actually configure this for
4:01
the very first time, you need to open
4:03
this .env.local file. So, here you need
4:06
to simply paste these two things.
4:09
By default, it will set to run on
4:11
localhost:3000.
4:13
You can set the next-auth secret to
4:15
anything. I set this to secret.
4:18
And these two things you need to get,
4:20
Google client ID and client secret. You
4:22
can easily get this by creating
4:26
a OAuth client ID. This is quite easy.
4:30
Just go to Google Cloud Console and
4:32
create this. Select web application.
4:34
And in the authorized redirect,
4:38
you simply paste the address
4:39
http://localhost.
4:42
wherever you are running. So, we are
4:44
running on localhost:3000.
4:46
So, we just need to paste it inside
4:48
authorized JavaScript origins. After
4:50
that, in the authorized redirect URI,
4:52
you need to paste this URL.
4:55
This needs to be same, so don't
4:58
just fill out the same entry
4:59
http://localhost:3000
5:02
/api/auth/callback/google.
5:05
So, this is actually the redirect URI
5:07
which you will be redirected to once
5:09
you're authenticated.
5:11
So, just fill out these two entries,
5:13
click on create. And this will give you
5:15
your own client ID and client secret.
5:18
So, this you just need to do this for
5:19
the very first time whenever you are
5:22
configuring it. So, just paste these two
5:24
details, client ID, client secret.
5:27
And for the MongoDB, if you're running
5:29
locally, this default address will be
5:32
there. By default, the MongoDB runs on
5:34
27017.
5:36
I already downloaded MongoDB Compass,
5:39
which actually is a desktop software,
5:41
which allows you to run MongoDB locally
5:43
inside your system.
5:46
This makes it possible. So, that's all
5:48
the configuration which is needed.
5:50
The source code link I've given in the
5:52
description. So, as you see, we are
5:54
using the latest version of Next.js. If
5:57
I show you the package.json file, we are
5:59
using the 16 version, which is the
6:02
latest version of Next.
6:04
We are using NextAuth as well,
6:08
which is a library for authenticating.
6:11
It supports various providers, Google,
6:14
Twitter, Facebook. So, we are using this
6:16
library NextAuth.
6:18
Um this is the latest project that I
6:21
made
6:22
from scratch.
6:24
So, if I show you the components, in the
6:26
components we have using TypeScript. So,
6:30
this is the main component of Google
6:32
Auth.
6:33
As you see, we written this codes
6:35
from scratch.
6:37
If you still face any problem, you can
6:38
contact me after the purchase. This is a
6:41
dashboard page
6:42
where it shows you all the information.
6:46
Once the user is authenticated, this is
6:48
the logout button component.
6:51
So, through which we are able to log
6:53
out.
6:54
This is actually the routes, different
6:56
routes inside the API folder,
6:59
which we are configuring.
7:02
And this is the config folder.
7:04
So, inside the config folder, we are
7:07
using this client ID, one tap,
7:09
everything.
7:11
Each and every file is customizable. You
7:13
can customize the source code once you
7:15
purchase it, make changes, everything.
7:18
So, these are the user details
7:21
that we are use also using Mongoose
7:23
library for communicating through
7:25
MongoDB database.
7:27
So, it's a very
7:30
friendly code that I written from
7:32
scratch. So, you will be getting to
7:34
understand how I develop this once you
7:36
purchase it.
7:38
So,
7:40
it's very easy. Simply go to the command
7:42
line, simply run NPM run dev. This will
7:44
start a local development server
7:46
localhost 3000.
7:49
So, it's a very
7:51
simple project
7:53
developed in Next.js 16 using next-auth.
7:56
Definitely check this out. The link is
7:59
given in the description.
#Jobs & Education