Up next in 10
How to Build Symfony Google OAuth2 Login System (One Tap + GIS SDK) with MongoDB in Browser
Aug 30, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/how-to-build-symfony-google-oauth2-login-system-one-tap-gis-sdk-with-mongodb-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:00
Uh, hello guys, in this video, I'll show
0:02
you I built out a Google login logout
0:04
OAuth system in Symfony. Symfony, as you
0:09
all know, it's a very popular PHP
0:10
framework.
0:12
And uh, let me show you the directory
0:14
structure of this framework. So, this is
0:16
actually the full directory structure,
0:18
as you see, all the files here are in
0:21
PHP.
0:22
Um,
0:24
as you see, we are running this
0:25
application, if you see, on localhost
0:29
8002.
0:31
So, this is a port number. I already
0:33
started this on my terminal. The
0:35
application is running. So, let me just
0:37
start.
0:38
So, localhost 8002. So, it's
0:42
a Symfony Google login logout system,
0:45
and we authenticated through all the
0:47
three methods which are available for
0:49
Google to authenticate. So, first of
0:51
all, we have this one-tap Google login,
0:54
where you actually see the screen.
0:57
Automatically, it detects which Google
0:59
account you want to login.
1:01
One tap. So, once I authenticate, it
1:04
will fetch the user profile information
1:07
and redirect you me to the dashboard
1:09
page. So, here, everything will be
1:12
displayed, profile picture, email
1:14
address,
1:16
display name. This is your Google ID.
1:19
We also have the logout button as well.
1:21
So, all this information is actually
1:24
uh, uh, also displayed in a JSON object
1:28
as well. This is your ID, Google ID,
1:30
email, name, picture, everything. So, we
1:33
are storing this information in MongoDB
1:35
database. So, we have this running
1:37
locally, as you see, MongoDB Compass.
1:39
So, if I refresh this,
1:41
it automatically creates this database,
1:43
Google login Symfony. It creates this
1:46
collection table called as users.
1:49
Um, this entry is successfully inserted.
1:51
This is your Google ID, email address,
1:53
name, picture, everything.
1:56
So, this is the full project guys in
1:58
Symphony.
1:59
Uh if you need the source code, I've
2:01
given the link in the description.
2:03
Uh you can directly purchase the source
2:05
code. So, after you purchase it, you
2:07
will be redirected to Google Drive
2:10
where you will get the zip file.
2:12
And after you open this folder, you need
2:16
to go to the .env file for the
2:18
configuration.
2:19
So, this you only need to do for the
2:21
very first time. In .env file, you can
2:24
change all this information
2:26
if you're developing for development or
2:28
production. So, you can change this.
2:31
And then, you can even change the
2:33
default URL, which is set to
2:35
http://localhost:8002.
2:39
And
2:40
then, you need these two things, which
2:43
is Google client ID and Google client
2:45
secret. So, these two things you can
2:47
directly get
2:49
through Google Cloud Console.
2:52
So, just create create credentials, and
2:54
you need to create a OAuth client ID.
2:58
And
2:59
simply submit select application type to
3:02
web application.
3:04
This is required because you are doing
3:06
Google authentication. So, you do need
3:08
to
3:10
So, now you need to put the URL.
3:15
So, in the authorized JavaScript
3:16
origins, we simply paste the base URL.
3:19
And then, this authorized URL will be
3:22
the actual
3:24
callback URL.
3:26
So, for this, you simply add this
3:29
/auth/callback.
3:31
So, this is your redirect URI.
3:34
Paste both these two things, and then
3:37
click on create. This will give you your
3:40
actual client ID and client secret. So,
3:43
that's all that you need to paste in
3:45
.env file.
3:47
So, this is all the configuration which
3:49
is needed guys. I've already done that.
3:52
And then start this Symphony application
3:54
by simply typing this command in the
3:56
terminal.
3:58
As as you see PHP - s localhost 8002 - d
4:04
public.
4:06
This will start this application at
4:09
localhost 8002.
4:13
Uh let me try this with a different
4:14
account as you see.
4:18
With a different authentication type,
4:20
let me use now this Google Identity
4:22
Services. This will now open this pop-up
4:25
right in the same page. You select your
4:27
account.
4:28
This also does the same thing. It
4:30
redirects you to the dashboard page
4:33
where you see all the information right
4:35
here such as the email address, profile
4:37
picture, everything.
4:40
So if I refresh the database as well,
4:42
you see now there are two entries out
4:45
there.
4:46
This entry also have the same
4:47
information.
4:49
So it's a complete system, guys. We also
4:51
have the logout button.
4:53
Bye.
4:54
Now you are successfully logged out.
4:57
You can type three is this one, Google
5:00
authentication redirect system
5:02
where you are redirected at select your
5:04
account, grant the permission.
5:07
And then also
5:09
it also does the same thing.
5:11
This is a complete system, guys. This is
5:13
your dashboard page as you see.
5:17
It will automatically detect that you're
5:19
already logged in. So it will redirect
5:21
you to the dashboard page. Coming back
5:23
to the project, guys, once you purchase
5:25
the source code, everything you can
5:27
customize it.
5:29
So basically all the templates
5:33
This is a authentication template, the
5:35
login page. We are written inside this
5:38
file as you see.
5:40
You can customize this as well.
5:43
This is your login page.
5:46
This is your dashboard page once you are
5:48
authenticated.
5:50
These are all your views.
5:52
Actual views out there.
5:54
So, as you see this is your dashboard
5:56
page.
5:58
Here we are showing these are dynamic
6:00
variables such as your user profile
6:02
picture,
6:04
email address, display name, user
6:07
in double curly brackets. So, these are
6:09
the variables in Symfony that we are
6:14
displaying it.
6:17
So, in the source folder we have
6:18
controller. We have written this auth
6:20
controller which actually controls the
6:23
authentication once you click the login
6:25
button. So, every authentication is
6:28
written in this file, auth controller.
6:31
The session, everything. In the
6:33
services, service, we are
6:36
connecting to DB database. So,
6:38
right here we have the service service
6:40
file
6:41
where we are communicating to DB
6:43
database.
6:44
This is actually the address where
6:46
DB is running.
6:48
In our case, it's 27017.
6:51
So, I locally installed this software,
6:53
DB Compass, which runs directly
6:55
inside your machine.
6:57
So, we are simply communicating with
6:59
this and storing this user information
7:02
in the DB database.
7:04
This is a service file.
7:07
This is your templates folder. This is
7:09
your controller folder, service,
7:12
as you see.
7:15
This is your public folder,
7:17
as you see.
7:19
Here all the assets are stored. This is
7:22
your JavaScript code,
7:24
CSS code.
7:26
These are different routes that
7:28
we have services.
7:38
So,
7:39
the configuration part is very simple.
7:41
You go to dot env once you purchase the
7:43
source code. Simply replace Google
7:46
client ID client secret. That's all.
7:49
Then even change the database name from
7:51
here.
7:53
This is your URI.
7:56
Just replace the address wherever you
7:57
are communicating your DB.
8:00
This is your database name.
8:03
So, this is the overall project guys.
8:06
It's coded inside Symfony
8:08
which is a really popular PHP framework.
8:12
And I developed this
8:14
Google login logout system OAuth2.
8:18
Definitely check this out.
8:20
The link is given in the description.
#Jobs & Education