Build a Python Django Google OAuth2 Login and Logout System With Sessions in Browser

uh hello guys welcome to this video so in this video we will look at how to actually integrate the Google

authentication Google login and logout system with sessions inside Jango application Jango is actually a

framework of python which allows you to build a applications it's a very popular framework and we will be showing you how

to actually integrate the Google authentication o to login and show these profile details of a logged in user you

will see this is actually showing the username display name email address and also a log out button as well inside

this uh window and if I click log out here I will be successfully log out right here and I will be redirected back

to the login page so you can now see there is a login with Google button right here if I close this window it

will automatically redirect me to the login page it will automatically detect I'm already logged off so you can see

login with Google button is showing right here so if I just simply click this button what should happen it will

go to the profile page it will log me in and now you can see if I close this window once again reopen go to Local

Host 800 Board number it will detect that I'm already logged in and it will

actually redirect me to the profile page where I can see the display name email address

and I can even show for a different account as well if I [Music]

now go to Local Host 800 so you can now see this is actually a

different account right here I can log out I show for this

account so you can actually try out for any account right here you should have a Google account for that to try out just

go to Local Host 800 so now this is actually the button

so if you are doing it for the very first time it will actually show you this account screen right here as you

click the login with Google button then it will redirect you to the consent screen where you can actually select

your Google account right here so as I select the Google account you will need to redirect just allow the permissions

so this you need to do it for the very first time if your our account is new you just need to Grant the permission as

you grant the permission right here your display name email address will be fed

and now it is it will be displayed it right here in the browser so if I close

this here and once again go to the same page you will

see it will automatically detect that I'm already logged in so it is automatically redirected me to the

profile page you will see that so we also have the log out button if I click the log out button I will be log out

here but once again if I click login with Google I don't need to redirect and select my account it will remember me

and I can directly log in right here so this is actually the sessions we are also using S sessions in Jango you'll

see as I close the the browser it will automatically redirect me to the it will automatically detect I'm already logged

in so it will storing information in the form of sessions in Django application so I will show you so one such package

is available in Django which is actually called as show social or app Jango this

is actually the name of the package that we are using for this application so we are using this package

here pip install social or app Jango so this is actually the

command for installing this module so this is actually the source code for this project I will show you step by-

step instruction on how to build this D Jango project and integrate Google login so if you're interested in purchasing

the source code with full documentation and support you can go to the description of the link in the video you

will find out the payment link from Pro Cod store.com you can purchase the full source code after you purchase it you

will be redirected to Google Drive where you can actually get this ZIP file from Google Drive

after you make the payment so I will show you step by step instruction guys how to build this project and how to

integrate Google Google login so we will look at it in the next section so now to

get started guys we are actually here in my current working directory so what I

will do I will CD into this directory and I will make a new directory right

here and uh or I can basically build out the Django project so you should have

Jango installed on your machine so if you don't know about Jango it's actually a framework of python it's very famous

framework for building web applications this is their official website Jango makes it easier to build better web

applications more quickly and with less code so it's a high level framework and it basically comprises a built-in

features which is admin panel everything is built in inside Jango and you should

first of all install this framework by using this command pip install Jango so

this is actually the command let me zoom in so pip install Django so just first

of all install this package if you are not installed it so once you install this there is actually a command line

command to actually build out ajango project which is Jango admin so Jango

admin comes with the command for creating project for everything so D Jango admin followed by there is a

command right here for creating a project high level project this is the start project Command right here and

followed by your actual project name so let me call this as Google o or to

project this is actually my project name Jango admin start project followed by

the name of the project so simply enter it so it will actually create your project so now you just need to CD onto

the project name which is Google or to project

so if I should show you the directory structure of a basic D Jango project if you create it using this command it will

look something like this there will be this manage.py file so we actually call this file to actually start the Jango

web server on port number 800 and then this is actually the high level project files in it. py is empty

you don't need to worry about it this is also another file this is actually the

high level settings file of your Jango project so here we will be making some changes for integrating that uh

framework that we will do urls.py which actually corresponds to all the URL

routes that you will do inside your Jango app and that's all so these are some of the files of the project files

so now to start this server it's very easy you actually call this manage file

python manage.py run server so this is actually the command python manage py

run server it will actually start your Local Host 800 so you will see that

so it actually started the server so we can navigate to this address Local Host

800 so you will see that it will actually I I think it's already running

it that's why it is so what we can do again we can run this

so you can see that this is actually the page that you will see for a newly created Django project so this is their

welcome page so now if you want to run it on a different port number as well you can

even provide a different port number as well I think there is this Command right here after that you need to provide the

port number Port is equal to 801 you can even provide a different

port number as well if you don't want to run it on 800

uh I think 8001 directly you need to pass so now it will actually run this on

8001 so if you want a different port number simply provide it as an argument so now it will actually shift this to

8001 so you can change your port number as well so now we will look at guys how to actually integrate that package that

we told you earlier this is actually the command for installing that package which is uh pip install social or app

Django this is actually the package guys that we need to install for actually uh integrating the Google o to

login so simply install this package and I have already installed it so now the

first thing you need to do you need to go to this settings file which is this it is located right here settings.py

file and and here you need to first of all tell Jango you we need to create a

in the directory section right here right here just in the template section

right here by default every Jango app has its own template but we will be

creating a templates folder right here for telling it you just need to in the

D's folder right here it's an empty array right here but here we need to Simply import the operating system

module at the top right here so just import the operating system module and right here

we need to tell Jango that we need to have a high level templates folder so operating

system path join and here we need to tell the base directory and it will be located in the

templates folder so we need to create a templates folder where we will be actually storing all our templates which

is a login page profile page so we actually tell Jango that they should

look in the templates folder so we can now create a high level templates folder right

here so inside the templates folder we will have our login page login. HTML and

the profile page profile. HTML so these things you need to do just create a templates folder just create login. HTML

profile. HTML and now in the settings.py we simply tell Django that we already

created this templates folder so just look right here after this what we need to do we we need to in installed app so

every Jango project consists of different apps as you all know we can also create our custom apps as well if

you have a really large project if you can split your functionality into different apps so for this module that

we installed right here for integrating the Google login there is one app that we need to just in single quotes you

just need to say social uncore Jango so this is actually the name of that app that we installed

so social _ Django so simply add this inside this installed apps array and

also inside middleware array we also need to add one more middleware which is

a built-in middleware social Django do

middleware do social o

exception middleware so this is the thing guys

basically we have added this middleware social Django

middleware so this is the name of the middleware so we have added this also so

after this just go to the bottom of the file and here we need to add some settings for our plugin so we are

basically adding the settings for O2 Google login plugin that we installed so

the first setting setting is authentication backends so we just need

to add this this will be actually an object sorry this will be a parenthesis

right here and here we need to add two backends social core backends do google.

gooogle so you just need to copy paste the same code that guys that I'm doing right here so these is actually the

authentication backends which is required for integrating the Google login and secondly we have the Jango

cont contri do. backends do model backend

that's all these are the two authentication backends that we actually have added at the

top this is required and then after this we need to ask some constants first

constant here will be social o Google O2

key so this will be actually the client ID and the client secret that you will

get from Google Cloud console and then social op Google

o to secret so these are the two different

values guys that you will get once you sign up on Google Cloud console and create a diff a project here and get

your credentials so which is actually this is client ID that you will get and this is client secret I will tell you

step by step how to get this this information and then we we need to

provide the redirect URI social or so as I already told you guys u in

Jango you don't need to build everything from scratch it's a high level framework

so that's why everything is built it some features are already built in in Jango so that's why it's a high level

framework and uh it's very easy to integrate Google login so you just need to put these constants

social or Google or to scope so here you need to provide

which scope that you are requesting from Google so we need the email of the user so I will simply type array email first

and then the profile so we do need these two things first is the actual email of

the user secondly we need the profile which includes the display name email address everything so this is actually

the scope and then we need our redirect Ur social o

URL underscore namespace and here you will simply tell

social and just after you provide this this secret and here we also need to

have social o so these constant that we are naming

right here guys this needs to be same you can't change the name of the variable so this needs to be named like

this Al only you can't change the name of these constants so social o Google O2

and redirect URI so redirect URI is actually the thing whenever you grant

access to your Google account so Google will redirect to which URL so this URL

is constant you don't need to change this value so just note down this value Local Host the port number we will start

here 8001 I will pick 8001

SL slash complete SLG Google das2 so

this same redirect URI we will be providing in Google Cloud console as well so I will simply note down this

simply copy this as well simply copy this so one last thing you also need to

do login uncore URL this constant you need to put this value to be/ login

that's all that's all that we need to do guys now we need to get these client ID client secret from Google Cloud console

so I will simply go to Google Cloud console and simply get these values from

the dashboard so go to Cloud console and you should have account here it's

completely free you don't need to pay any sort of money right here it's

completely free after you create a project go to apis and services go to credentials and right here you need to

create a client ID so simply click on this button create credentials and go to

O client ID and right here you need to just enter this information which is

application type is web application we are developing web application and then authorized JavaScript Origins this is

actually the homepage address so we will simply paste HTTP Local Host followed by

the port number so we are developing it on 801 so this is actually the full address of the

homepage you don't need a trailing slash so ulate that this will look something

like this so copy this and in the authorized redirect URI so we'll simply paste the complete redirect URI that we

are using it// complete or2 so this will remain the same so simply copy this also and

then click on create so now it will give you your client ID and client secret this will be different for you so don't

copy my client ID and client secret so simply copy this and go to here paste it

right here and similarly get the client secret and

paste it that's all so this is all the setup

is complete guys for setting up this plugin now go close the settings. py

file and now we will go to the file called as urls.py

so all the things are done guys in a very systematic way in Jango as I

already told you you don't need to reinvent the wheel everything is built in in Django all the features buil-in

features so urls.py is the actual file which corresponds to all the routes that

are used inside your applications such as the homepage whenever someone goes to the homepage whenever someone goes to

any route so which page will be opening so this file is responsible for that so

right here in this file what we need to do we need to add some patterns right here so one such P pattern we need to

write is path we using the path module right here we have imported it you will see already Jango has imported that for

us so once someone goes to this part or slash we need to include the built-in

package so this include we need to import it so from just put a comma and

include this we need to include this package which is social

Jango do URLs so we are importing this and in the second argument you need to

provide the name space which is actually called as

social that's all we have put this so this is required

for integrating Google login this is actually the package that we have installed so we have included their path

this is actual all the routes will go which have which containing SL o which

it will correspond to the social Jango do URLs so secondly when someone goes to

the uh login page what we need to do right here login slash so we need to

load a template for loading the template we need to import this from Jango do views. generic we

need to import the first of all the redirect View and the template view so these two things are built in in Jango

so whenever you some you want to redirect someone to a different page then this redirect view will come into

the picture and whenever you need to load a template whenever someone goes to any route this

will come into the picture so we'll use this template view right here to actually load the login template right

here so we'll use template View and it actually contains a method which is as View and here we will loading this

template so we need to give the template name as an argument right here this will

be login. HTML so it is actually located in the templates folder that you see right here so by default all the

templates is located in the template folder we have configured this setting early on by going to Der here you will

see that so everything is systematic in Jango so it will look for this template

in the templates folder which is login. HTML and in the second argument you also

need to provide the name parameter so name you can give it

login put a comma so if you just uh restart your app

application by default it will get automatically gets restarted so python manage. py run server and we will be

running it on 8001 so if you go to the if I just uh

put something in the login page I see here just put H1 right here

this is the login page

so if I go to Local Host 8001 if I go to/ login so now you will

basically see it will actually show me the login page 8001 SL login so now this

route is opening this template right here this is the login page so in this

way guys you can actually correspond to any route you can load any template by using this method template view as view

give it a template name so by default it will look into the templates folder and we load this template in Django so it's

very easy so now in the same manner we will also be making this route for the

login page sorry the for the profile page so after you authenticate it we will be showing the profile of the user

this will be protected route so we will make sure that uh the authenticated

users must only be viewing the loog profile page so there is a decorator in

Jango that you can use it's a built-in decorator for this you need to import

from Jango and

contrib it is located in O do decorators and this is a built-in decorator which

is loginor required so by the name itself uh you must be authenticated you

must be login before you access the page so we will simply pass this decorator right here we will simply write here say

here which is login required

so I

think SL account SL profile okay this is sl/ profile and

here we need to put this decorator right here in between login required and then if the user is authenticated then only

load this view as View so we need to give it the profile. HTML

and then we need to give the name parameter in the second argument which is profile so this line pretty much sums

UPS all the process guys first of all it is checking whether the user is logged in if the user is logged in then only it

is showing the profile. HTML so this profile. HTML is located in the

templates folder you will see that so this is my by this so it's only a on

line code but it's doing a lot of job at the same time so this is the power of

Jango you write very less code but that less code means a lot so in the same way

if I just refresh now go to this route here if I try to access this route SL

accounts SL profile I can't access it you can you can see I can't access it

I it will redirect me to the this this fite cannot can't be reached so you

can't access that route you must be authenticated so it is

preventing us that's exactly what we want and

also we also need uh first of all let me just

make the login page so just go to login. HTML we will

start building this so for building this uh UI we'll be using Tailwind CSS simply

paste the ti after the title CDN of Tailwind CSS and right here we will be having a

simple login page so we'll be giving all these classes Tailwind

classes so these are all the Tailwind classes that you see right here

so right here we will simply have a button right

here which says login so we'll basically say text 2 Xcel font bold

mb4 so after

this this is not necessary I am just styling it for the UI to look good but

for the this tutorial it is not necessary that you use Tailwind CSS it's just for styling purposes so right here

we will simply have this login with Google button

and so the HF will be dynamic it will simply have curly brackets and right

here percentage signs URL and WR in single codes we just need to write

here social pan this needs to be same but I'm writing here you need to write

it and again in single codes Google o

two and then close that percentage sign that's

all so right here we just need to give some classes these are all Tailwind

classes so

simply so if I just uh refresh here if I navigate to Local Host 8001 /

login so just restart your

server uh just wait I I think I made a mistake right here in path

so all the source code is given guys in the description you can directly purchase it so I think right here I made

a mistake right here me paste the correct one it's a slight uh modification that

we done it's now you can see as I navigate to it it is showing me the login page there is a button right here

login with Google so all these styling is done using Tailwind CSS so there was

slight typo mistake right here in this line so that's why it was not working so now you can see if I go to Local Host 00

1/ login if I click this button it is saying to me that uh backend not

found which is

uh these patterns are not found so right here in the urls.py file

we need to write all the patterns that we are missing so we need to write those missing

patterns uh guys there was just a very silly mistake that I done inside this login. HTML file that's why you are

actually see seeing this issue uh if I navigate to Local Host

8001 SL login and if you just click this button login with Google you will see

this issue that backend not found this is coming because I just made a silly mistake right here in login to HTML and

this back end is simply login O2 not or2 just just make the slight modification

right here just write this o o or2 this is the mistake that I done so just write

this o right here so after you do this this error will go away but now a different error will come and I will

show you the solution to this problem once again if you navigate to Local Host

8001 and go to the login page / login and click this button now a different

error will come right here no such table Dango Jango unor session so this package

that we installed which is this package Jango social at or app this needs to

actually create this session table because we will be storing the user information in the session that's why

whenever we close the browser and again reopen it it will automatically detect that whether we are logged in or not so

for creating those tables we need to run the migrations so right there is a command right here in in Jango you can

run right here Django admin uh run or we can simply write say

this is actually the command uh python manage.py migrate this is a

command so python manage.py we are again calling this file which is manage.py

this time there is a command which is migrate so if by default it uses the sqi

database that you see right here sqi database it uses and it will actually create all the tables migration tables

for the session information inside this database python manage. py migrate if

you run this command it will actually create all these tables which are necessary required for integrating

social login so now everything is gone okay now you can actually run the back

of application and there will be no error which will be there if I navigate to Social uh sorry login

page click on that and I will be redirected to my consent screen guys

where it can actually select my Google account and uh Grant the permission

so as I select my Google account you need to Simply allow these permissions simply click on continue so now it will

actually redirect me to this page if you see Local Host 8001 slac accounts SL

profile so now the user is authenticated now it actually redirects me to this page this route that we configured

inside this url.py file if I show you ur. py file so if the user is

authenticated then only show this so loginor required this decorator is actually using this uh functionality and

now when the user is authenticated we are actually showing this profile. HTML if I

just show this is actually the profile page this is a profile page so here

we'll be displaying the email display name of the user for the time being simply you will see that so if I now

close this again reopen it Local Host a

001 so again it is basically uh navigating to the Lo login page so this

is a problem guys we need to fix because uh we should automatically detect that the user is already logged in we don't

need to log in again and again so now to fix this it's very easy go to urls.py

file once again and here we need to Simply write a route which will be very

much easy we need to Simply detect that the user is logged in so we don't need

to redirect them to the login page for doing that there is one line of code

that you need to write right here so this line is basically path

again we'll use the path module and here we'll be just s the first argument will

be empty so this signifies the homepage so here we are simply redirecting if you are going to the

homepage we are actually redirecting you to the as view pattern name

you need to provide the pattern name right here pattern name

profile and here we need to say permanent and uh there is this option

that we need to configur which is I will explain you the code guys just

write it permanent is false and then in the second argument you need to give it the name name will be here home so this

is actually we are config in it to for the homepage so if you actually navigate to the homepage we are redirecting them

to the profile page because they are already logged in this actually what

this code is actually doing it is actually redirecting uh the user authenticated

user to uh profile page based

upon based upon whether they are logged in or not so if they are logged in we will be redirecting to the profile page

so if I just now refresh if I go to the homepage local hosts 8001 now you can

see that it is automatically redirecting me to the homepage if I just I'm just navigating to the Local Host 8001 so you

can now see it is no longer redirecting me to the login page I can still go to the login page but if I just open the

homepage you will see that I am redirected back to the profile page so that's exactly what we want guys and

uh now what we need to do uh after we do this we need to go to

the profile. HTML and here we need to display the details of the user we need

the email address and the display name so just after the title past the CDN for Tailwind CSS again we using the Tailwind

CSS for displaying information so it is not not necessary guys for this tutorial as I already told you I'm just doing it

so that the UI looks great these are all Tailwind classes so this makes it easy

for not writing custom CSS and uh in we can simply have

a H1 tag right here text to excel font

will be bold Shadow it will also have a

shadow Max width on medium devices and width will be

full so inside this uh you will simply say to the user I will

simply copy this right here I don't want to write custom CSS it's very

hard so right here uh we will have two information right here to show to the user which is uh the username so in

double cly brackets we just write user dot username so this is actually the display name the second information we

will be displaying which will be email which will be user.

email I simply say welcome welcome message so you'll welcoming it the user

if I just refresh now guys you will see the user profile welcome come this is

the display name geeki Gotham 1987 and this is the email address geeki Gotham [email protected]

so we are actually displaying this and

uh uh it needs to be wrapped in I forgot to

do this in the div tag right here so just right here you need to wrap everything

distri tag

so so wrap

everything just format so everything is now shown in a card like structure you

will see that so it is looking good and uh after you have a simple form which

will uh actually again we'll write this code it will

actually go to this URL log out in single codes and just

this is a syntax and here in method here will be

post and you must have a csrf token this

is uh for security purposes

so here we'll have a simple button of log

out so if you just say there will be this log out button uh no reverse match

at accounts profile reverse uh you can act see that this log out that we

written is not found so now we need to actually make this route in the url. py

file so every route that you see basically guys we need to uh just configure it in the urls.py file so just

go to urls.py file and for the log out functionality it's very easy we just

need to write here just before accounts profile just

write for the log out as well functionality so whenever someone goes to the logout functionality we just need

to say we need to import the logout view which is also a built-in view in

Jango if you see we have a built-in view which for the log out as well so log out

view redirect view I think we imported that

indirect view so log log out view is we are using it it actually contains a

method next page so here we need to just load the login page so we are simply

telling login go to the login page so whenever someone log out just go to the login page so here we

need to give it the name parameter so just after this

the second parameter which is the name

parameter that's all so if you just refresh now

uh just need to

restart I think there is some kind of syntax error which is there in this line I think let me see

let me fix it oh sorry we forgot to put a comma so just put a comma right here we for got to put it that's all is there

if you just refresh now if I click log out I will be redirected back to the login page so

that you can see that guys if I again login with Google I will be showing to the profile page here we can see the

details if I just close the browser once again open the same page page local hosts

8001 I will navigate if you just go to the homepage

you will see it will redirect me to the profile page because it automatically detect that I'm already logged in so

this you can do for any user guys uh if you're doing it for the very first time you do need to select your

account if you click login with Google you need to select your account Grant permission once you grant permission you

will see your details right here this is ajango user authentication guys Google login that we configured step by step

all the source code is given in the description of the video you can directly purchase it from my website Pro Cod store.com you will actually get a

zip file so the full source code is given with full documentation and support

So if I close this browser once again open

it go to the homepage 001 so it will redirect me to the

profile page you will see that so this this is because we already the session table is created in it is present in

this db. sqlite it is actually getting this information that the user is already logged in so that's why it is

showing the profile page so thank you very much guys for watching this video step by step please hit that like button

subscribe the channel as well and I will be seeing you guys in the next video Until then thank you very much