Up next in 10
How to Build Node.js Express Google OAuth2 Login & Logout System with MongoDB in Browser Using JS
Aug 30, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/how-to-build-node-js-express-google-oauth2-login-logout-system-with-mongodb-in-browser-using-js/
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:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
Uh, hello guys in this video, I will
0:02
actually show you how to build a full
0:05
Google
0:06
authentication system
0:08
in Node.js and Express and using MongoDB
0:12
as a database. All the user information
0:15
will be stored inside this MongoDB
0:17
database. This is actually the interface
0:19
of the application. I'm running this
0:21
application on localhost 3001.
0:25
If I show you the terminal, I simply
0:27
executed npm run dev. It has started the
0:30
server, Node.js server, Express server
0:35
on localhost 3001.
0:37
And MongoDB is running as well.
0:41
If I show you the directory structure,
0:43
this is actually the full directory
0:44
structure of the project. We have the
0:47
server.js file, which is actually the
0:50
file where we are running this.
0:54
Uh, let me actually show you the
0:55
functionality
0:57
of this application. So, as soon as you
0:59
do this,
1:00
we have three authentication types.
1:03
First is the one-tap authentication,
1:05
then we have
1:07
Google Identity Services, which is a
1:09
one-tap auto pop-up, then we have Google
1:11
redirect, which is the old way of doing
1:14
Google authentication. All the three
1:16
types are supported. Let me try the
1:18
first type. As soon as you click the
1:21
one-tap, it will redirect you to the
1:23
dashboard area.
1:25
So, here it will show you all the
1:26
information such as email address,
1:28
profile picture, display name,
1:31
joined last, Google ID, everything. It's
1:35
also returned as a JSON response as
1:37
well.
1:39
All this information. So,
1:41
if I refresh my MongoDB database,
1:45
now it will create this database google
1:48
/_login_express.
1:51
Inside this we have the collection or a
1:54
table
1:55
which actually stores this information.
1:59
So, we also have the logout button as
2:01
well. You can logout as well by clicking
2:04
the logout button. So, now we are
2:05
successfully logout. We can try this
2:07
with a different authentication. This is
2:09
one tap auto pop-up.
2:12
This pop-up window will open. This also
2:14
does the same thing. It redirects user
2:16
login page dashboard page.
2:20
Then we have the third authentication,
2:22
which is the old way of doing it. We
2:24
redirect you to the different page. Then
2:26
you select your account, grant the
2:28
permission, and this also does the same
2:31
thing.
2:32
So, we can try this with a different
2:34
account. If I show you
2:54
Now, as you see, we are trying it with a
2:56
different account.
3:00
So, once again, it shows you the same
3:01
information, display profile picture,
3:04
everything.
3:05
And if I refresh the database,
3:07
you will see another entry successfully
3:10
inserted.
3:12
Now, we have two users inside the
3:14
database.
3:15
This is actually, guys, how we
3:18
actually implemented this. If you need
3:20
the source code, I've given the link in
3:22
the description. You can directly
3:24
purchase the source code from my
3:26
website. After that, you will get the
3:28
source code automatically from Google
3:30
Drive. You will get a zip file.
3:32
And the very first thing you need to do,
3:34
you need to go to .env file for the
3:36
configuration.
3:38
And right here, you need to replace You
3:40
can change the base URL as well. By
3:44
default, it runs on localhost:3001.
3:46
Port number, you can change.
3:48
And then these two things, Google client
3:51
ID and client secret. You can easily get
3:53
this through
3:56
Google Cloud Console. So,
4:01
for this, you click on If you go to
4:04
Google Cloud Console,
4:07
just create a OAuth client ID.
4:11
Create credentials, click on that.
4:18
And from here, select web application.
4:21
And in authorized Java JavaScript
4:23
origins,
4:24
you basically paste the base URL in
4:27
which your application is running. So,
4:29
my application is running on localhost
4:32
3001.
4:37
So, you paste this.
4:39
In authorized redirect URI, you
4:41
basically paste
4:43
the redirect URI.
4:50
If you check,
4:51
we have given this redirect URI. So,
4:53
simply copy this same URL.
5:04
Then click on create.
5:06
This will give you your client ID and
5:08
client secret. These two things you need
5:10
to paste once you purchase the source
5:12
code. This is all the configuration
5:14
which is needed, guys. As you see, you
5:15
paste this client ID, client secret,
5:18
and then run your application. So,
5:22
simply npm run dev, and this will start
5:24
a local development server.
5:26
That's all that you need to do. And if
5:28
you see the actual files, we have config
5:31
folder, we have model folder, which we
5:33
store
5:34
through Mongoose. We actually
5:36
communicate through MongoDB database.
5:38
So, for this, we are using Mongoose.
5:42
So, here we defined all the routes.
5:45
So, this is our main file for
5:47
authentication as you see.
5:51
Then we define these views. This is our
5:54
login page, that dashboard page once
5:57
you're authenticated. These are coded
5:59
inside EJS, which is a template engine.
6:02
And this is our .env, this is our main
6:05
server file.
6:08
So it's a complete project guys in
6:10
Node.js Express Google authentication.
6:13
All the three modes are supported. It's
6:15
It's really good. We also have log out
6:17
button as well.
6:19
So inside this application, all the
6:22
three modes are supported.
6:24
So it's very good if you're looking
6:26
forward for
6:31
for actually authenticating yourself.
6:34
This is really good application.
6:36
You can customize it, add more features
6:38
on top of this as well.
6:40
Once you get the source code, you will
6:41
get to know how I coded this as well.
6:45
You can customize it as well. All the
6:47
files are coded inside JavaScript.
6:50
So these two views are coded inside EJS.
6:53
So definitely check this out.
6:56
And thank you very much for watching
6:58
this video.
#Jobs & Education