Up next in 10
How to Build Deno.js Google OAuth2 Login & Logout System Using MongoDB & TS in Browser
Sep 1, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/how-to-build-deno-js-google-oauth2-login-logout-system-using-mongodb-ts-in-browser/
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:01
Uh hello guys, in this video I will
0:02
actually show you how to set up Google
0:05
authentication
0:07
in Deno JS. Deno, as you all know, it's
0:10
a new framework.
0:12
It's similar to Node JS,
0:13
but better, faster JavaScript.
0:17
So, I will show you how to actually do
0:20
Google authentication in Deno JS. So, I
0:22
built out this complete project.
0:25
This is a full directory structure.
0:27
We have this main TypeScript file right
0:30
here. We have Deno JSON. These are all
0:33
the views files, the login page,
0:35
dashboard page. Then we have this
0:36
JavaScript logic for authenticating
0:40
Google.
0:42
Then we have the CSS. This is all the
0:44
files which are there.
0:46
And I'm running this project locally.
0:48
Deno task dev. So, it started this local
0:51
development server on localhost, HTTP
0:55
localhost 8003.
0:58
Uh let me show you the actual demo of
1:00
the application, localhost 8003.
1:05
All the source code is given in the
1:06
description. You can directly purchase
1:08
it
1:09
from my website. So, once you purchase
1:11
it, you will get the source code from
1:13
Google Drive, this full directory
1:14
structure.
1:16
So, interface looks something like this.
1:18
As you see, we are running it locally.
1:20
And for the database, we are using
1:22
MongoDB.
1:23
So, once you authenticate for the very
1:25
first time, let me select, we have all
1:27
the three authentication types. This is
1:30
the pop-in
1:32
tab login.
1:34
You tap on the Google account, and then
1:37
it redirect you to the dashboard page.
1:39
It shows you all the information,
1:41
profile picture, email address, logout
1:43
button as well.
1:46
So, it's a complete project. We also
1:48
have JSON response coming.
1:51
So, if I refresh the MongoDB database,
1:54
it creates this database automatically,
1:57
and creates a table collection users.
2:01
And then it stores everything as you
2:03
see.
2:05
Everything is stored in the database.
2:08
And then we also have the logout button.
2:10
If you click it, you are simply logged
2:12
out.
2:14
It automatically detects all your Google
2:16
accounts that you log in.
2:17
This can be a great source code if you
2:19
are building any kind of application
2:21
that you want to implement Google
2:23
authentication. The second type of
2:25
authentication is this pop-up one where
2:28
you click
2:29
and then you can authenticate
2:31
with that your any Google account.
2:34
This is the second type of Google
2:36
authentication. It does the same thing.
2:39
And then we have the third one which is
2:41
a redirect one. It redirects you to a
2:43
page where you need to select the
2:44
account
2:46
and grant the permission.
2:48
So all the three
2:50
Google authentication types are
2:51
supported as you see right here.
2:56
We can also try this with a different
2:58
account as well.
3:02
So again, you log in.
3:04
You are authenticated to the dashboard
3:06
page.
3:07
So if I refresh, now a second account
3:09
has been successfully inserted in
3:11
MongoDB.
3:13
So as you see guys, this is a Deno JS
3:15
project. This is the main file ma-
3:18
main.typescript.
3:20
So where we are importing all these
3:22
libraries, Mongoose for communicating
3:25
with MongoDB database,
3:27
.env file.
3:30
And then right here, we are making the
3:32
server owner server.
3:35
If I check your Deno.json file, so here
3:38
it lists out it's similar to
3:39
package.json in Node.js
3:41
where we list out all the dependencies
3:43
which are needed.
3:45
So these are all the dependencies that
3:47
we have used for this project.
3:50
And these are the starting
3:53
scripts. You simply type the script
3:55
right here. NPM
3:58
Dino task dev. So, it will start this
4:00
local development server.
4:02
And then we also have the .env file
4:05
where it actually resides all the
4:07
information that
4:09
is needed. So, you will need this Google
4:11
client ID and client secret. So, go to
4:14
Google Cloud Console and simply get
4:16
these two details.
4:20
So, if you're developing it at locally,
4:23
it's very easy to do. Just select web
4:26
application, create a Google Auth client
4:29
ID. In authorized JavaScript origin,
4:31
simply paste your home page URL.
4:34
>> [snorts]
4:34
>> I pasted it already as you see.
4:37
And then you paste this callback URL as
4:40
well.
4:42
/callback.php
4:44
For this, you can read the readme file
4:47
that I created for this.
4:50
So, this file.
4:58
Yeah, so I created this readme file. You
5:00
can read how to run this project. So, I
5:04
explain step-by-step. So, first of all,
5:07
you need to create OAuth web client.
5:09
Simply paste
5:11
these two URLs if you're developing it
5:13
locally.
5:14
Then you get this client ID, client
5:15
secret. You paste it.
5:17
And for MongoDB, we are actually
5:20
downloading this software locally,
5:22
MongoDB Compass.
5:24
By default, it runs on port number
5:26
27017.
5:28
And once you first log in, it
5:30
automatically creates your database and
5:33
the collection and the table.
5:35
So, everything is automatic. And then
5:37
you run the application. It will start
5:40
your application at localhost 8003.
5:45
So, the link is given, guys, in the
5:46
description. You can directly purchase
5:48
the source code. It has all the Google
5:51
authentication, all the three types.
5:53
These are different views which we have
5:55
used, the login page and the dashboard
5:57
page.
5:59
So, here it contains all the HTML code.
6:03
Then, we have this JavaScript file
6:05
which actually holds the logic for
6:09
implementing
6:11
Google authentication. Then, we have
6:13
style.css.
6:15
This is the CSS file.
6:18
So, this is the overall directory
6:21
structure, guys. I've explained you
6:22
actual application.
6:25
And definitely
6:27
check this application out. The link is
6:30
given in the description.
#Jobs & Education