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

uh Hello friends welcome to this video so in this video we will actually build out a Google login and log out

application in flask in Python which is actually a web application framework for

building web applications in browser so this is actually the demo that you are seeing on your screen right here we have

a button out there with login with Google so if you basically click this button you will be able to login with

your Google account and we will be displaying the details in the browser such as profile picture email address

and the display name of the user and we will be storing all these details in the MySQL table right here I have already

created this table you will see ID is the primary key this is the email address name and the profile picture so

we'll be storing these details so you will see currently this table is empty right here nothing is present and also

if I just show you we are also having sessions variable as well so if I just run this application for the very first

time what you will see python app.py on the left hand side a folder will be

created which will be sessions so I think yeah flask Lo login project I need

to run this file python app.py so now this folder flask uncore session will be

created you will see that so now your app is running on Local Host 5000 so I

will simply go to this and click on this button login with Google so what will happen guys it will

actually log in with my Google account and it will actually see the profile picture this is actually the display

name email address and a log out button as well if I refresh the table right here you'll see entry will be added

right here which will be all this information will be coming from Google O2 this is the ID email address this is

display name and this is actually the profile picture URL so we are simply showing these details from the my SQL

table so if I close this browser reopen it once again it will automatically detect that we are already logged in so

you will see that so if I again open any another browser window and uh go to

that I open a new browser window right here again go to Local Host 5,000 will

automatically detect I'm already logged in you will see that so we now have a log out button right here if I actually

click this log out button I will be redirected to the homepage now you can see that if I close this window it will

automatically detect that I already logged out so that's why it will show me this login to continue button so in this

way you can do that and all the session information is stor stored inside this uh folder guys you will see every time a

user logs in it creates a new session and it stores inside this file right here that is automatically created let's

suppose I uh login with a different Google account right here let me have a

different account uh Local Host 5,000 and you you can also see the

authorization flow as well if you're doing it for the very first time it will actually asking you to select your

account you will select your account you need to Grant the permission click on continue after doing that you will be

able to see your information this is actually the display picture uh profile picture display name and email address

and if you see now there will be a second entry added inside the flask uncore session folder and if I also show

you the table right here a second entry will be added right here you will see that so in this way guys it will be a

full compete complete google2 authentication system we will be developing it with sessions and storing

it in my SQL database in flask in Python so all the source code is given in the

description of the video guys if you need the full source code with full documentation and support you can go to

the description and purchase the full source code from my website Pro cod.com and after you purchase it you will be

redirected to Google Drive where you can actually download the zip file after the payment is done so the link is given in

the description you will actually need to purchase it if you are interested so now let's get started I will show you

step by step instruction on how to basically build this application so what I will do right here I will simply

create a new folder right here go into my YP projects directory

and CD into a new file I will say Flash

login and open this folder inside vs code currently you will see that

currently it is empty so you need to have python installed on your machine guys already have the latest version

installed so you need to have python installed on your machine

so we are using the latest version which is 3.1.2 point2 at the time of recording

this video so it's a latest version so now we what we need to do right here we

do need to install some dependencies as you know flask is a web application framework you do need to install this

module as well which is a p install pip is actually a dependency manager where

we can actually install modules flask is the actual web framework flax MySQL DB

this is actually the package which allows to connect your application to my SQL database so flask is the actual web

application framework you need to install this then we have flask Dash

session so this is required for managing the session inside your flask application to actually store the

information in a session then we have oo lib oo lib is required guys because we

are making Google authentication request this is required then we also need the

request module as well because we are actually making a request to the API of Google that's why we need this module

and also we need request o lip this is another module that we need because we

are actually making request to a Authentication Protocol these are the dependencies we will need flask flash my

SQL DB flash session o lip request and request o lip simply enter it and I have

already installed these modules so it will hardly Take 5 to 10 seconds and it will install it now you just need to

make a file inside your root directory app.py so right inside this

file we need to first of all import the flask module and we need to here import

the base flask module and we also need

to now after we do

this so what I will do is that I will first of all import all the dependencies

so right here if you see we are importing flask we also need to import the redirect module as well we also need

URL uncore for and also session and also we need request module

as well from this base jfi jfi and render template these are all the

modules that we need from flask library and from flask underscore

session we need to import the base session class and from flask my SQL DB we need

to import the base MySQL class to actually make the connection to the database and then the buil-in module

which is Json which is built-in python module we need not have to install it and also we need to import the request

module as well that we installed now to make request and then from o lib o to O

to we here need to import a class which is called as web application client we

need to import this and also we need to import the base operating system module as well we need this we need to set a

simple environment variable right here to actually

enable HTTP which is insecure because we are building it on Local Host that's why

if you don't just set this environment variable you will get a error that you need to have https so while we are

developing it we can enable this unsecure so if you're doing it for production just remove this

line so we do need to set this environment variable which

is OS environment so this will be a simple

variable o Leb insecure underscore transport

is equal to one in single quotes you need to just write here so that's all

and now we just need to get some information right here this is Google client ID all this information you will

get from Google Cloud console I will just show you just wait and we will

basically also have one more variable for storing the Google client unor

secret and also we will also have this Google Discovery uncore URL this will be

constant and uh this will be actually be equal to https

accounts. google.com/ wellknown slop ID configuration so this will be

constant you just need to write this it will be redirected to you once you want to uh do the authentication it you will

be redirected to this URL and now we just need to make a simple flask app so

app is equal to flask the base and here we need to pass the name of the app as

an argument and then we need to set a secret key right here for the session app doore secret key and we will

use the base operating system module and we will use this Ur random method and 24

so what it will do it will actually generate a 24 digigit random key and it

will set this to the secret key of the app app this is really useful because we are using session here flask uncore

session so this secret key is required if you don't set it you will get error so after you do this we also need to do

the session configuration as well the session

configuration so these are some of the settings that you need to just do app.

config and here what we will do session uncore type this type will be we will be

storing the session information in the file system in a folder so file system is there so it

will actually create a folder right here in the root directory where we'll be storing all the session details app.

config one other setting is session uncore

permanent this is actually a Boolean value either it can be true or false we don't want to store the information for

permanently wice you can even set this to true as well that in that case your

session information will be stored permanently but in we don't want to store it permanently that's why we'll

put false right here and then you start the session by using session class and passing the app reference as an argument

this will now start the session so what it will do right here if you just

see if you now run this project let me just start this application first of all

and tell you if you want to start this application

you will write uh a the main function which is required

for every python application so if name double equal

to main then we need to run this

application on code number uh 5,000

like this so if you just see here if I run this application a folder will be created on the left hand side I

think you will now see a folder is created which is flask uncore session so

this is coming because we have set this uh to file system because the information of the session will be

storing on the a folder it this folder will automatically gets created this is

happening because of this module flask underscore session so it has automatically created this folder as we

run this code so now what we need to do right here we now need to actually

create a database so for managing our database we are actually using PHP my

admin which comes with the exam control panel which is part of aache server MySQL whenever you are building PHP

applications we develop we download exam control panel say crossplatform software

if you just write here exam control panel download it is available for Windows Linux and Mac the very first

link which comes right here just install it for your respective operating system Ive already installed it so we started

this Apache server and my SQL go to admin section right here and right here

go to SQL we will write some SQL query right here to actually create a database so what I

will do I will say create database and I will call this as flask login

semicolon and then we will use this database flask login and inside this

database we'll create a table create table

users so so far guys we have written three lines of code first of all we are

creating this database flas login and then we are using this database and then inside that database we are creating the

table which is is called as users so right inside this you will mention ID

will be actually the primary key so warar and 255 variable

correctors and it will be not null and it will be the primary key of

the table it will be unique every time then we have the email which is again will be a

vchart the length here will be 255 and it will be not null

and then we hold basically our name again this will be vchart

255 lastly we will hold actually the profile picture

link bar 255 so that's all guys you will see uh we have storing uh four fields

which is ID key here email display name and profile picture so there is actually

a go button right here if you execute the SQL query your database will get

created if you see uh flask login where is this this is actually database

created inside that database we have a table also created automatically and

inside if I show you the structure of the table we have four Fields right here ID is the primary key email address name

and profile picture so now our database and table has been created now we can

actually make a connection right here inside the flash cap so we need to write some code for this so after you define

your session information right here just after this session we will now be

writing a simple comment for configuring our MySQL configuration so right here we

need to set some variables for this so app.config we need to set the host information we are developing it on the

local environment so this will be Local Host and then we have to set

the usern name and password so default username for examp is root if you

haven't changed the settings the default settings are root and uh the password

will be nothing default password is nothing so I

will sa and then we need to define the database name so so whatever

database that you have defined my SQL DB so my database name is flask

login and then we will make the connection we'll call the base MySQL

class and pass the app reference right here can see that so we have set all

these variables and then we pass this as a reference to the MySQL connection class that we imported at the very top

from flascore my SQL DB so

after you make the connection now what we can do right here we can actually or to client setup we need to

get this information which is client ID and client secret now to make a new client we'll invoke the web application

client class that we imported and pass the Google unor client ID so first of all we need to get both

this Google client ID and client secret so we are developing our application on

Local Host let me change this to 3,000 so this application now will run on

Local Host

3000 so if I restart the application right here if I make the

changes so now you will see the app will listend on local 3,000 this is actually the base URL of the application now you

need to go to Google Cloud console and you need to have a simple project Creator right here so the very first

link which comes right here simply click and go to Google Cloud console and

you do do need to have a project created I've already have a project and go to

the menu right here it is totally free you don't need to pay any side of money for this go to apis and credentials go

to credentials and right here uh just create your client ID click on this

button create a credentials and O client ID and here you need to select your

application type so this will be a application simply select here you need

to paste your base URL in my case it will be htgp unor localhost 3000 if you

developing it for production you need to Simply pres paste your url of your production level website so this will be

HTTP Local Host 3000 and then the redirect URI redirect URI I will simply

say slash login / callback this will be the actual call back URL whenever you

grant the access what URL your application will redirect so I will simply make this URL pattern SL l/

callback later on whenever we do the call back configuration so this will be

our call back URL of the application so after you do this simply click on Create

and uh now it will give you your information client ID and client Secret

so don't copy this information this is unique to every user so simply paste it and

uh so I've already pasted the Google client ID client secret now what we need

to do we need to Simply Define a route inside our web application so app dot

route if someone goes to the homepage what they see we'll Define a function which will be index and uh here we will

basically return a template to the user so we will use basically the render

template and we will show the login. HTML page to the user as someone goes to the homepage now we need to create a

templates folder by default all the templates are stored inside this folder flask will look inside this folder

whenever a index route is hit right here so this render template will look inside

the templates folder now we just need to Define this login. HTML file and we will

using a Tailwind CSS for styling purposes so you'll say flask Google

oo login and log out system so here we do need to paste

Tailwind CSS if you don't know about Tailwind it's actually a very good utility based classes framework where

you don't need to write CSS you can attach pre-build classes to

your HTML paste the CDN here for Tailwind now what we need to do uh it's

very easy uh after you do this uh we need to

attach some classes to the body which is background BG cray these are classes

shade here 100 Flex items Center justify center edge

screen so inside this we will actually be defining a div which will have a background color white padding 8 p8

rounded on large devices and it will have a shadow on medium devices Max

width on small devices and width will be full text Center so these are you can

see all these classes are pre-built and inside the this we will have a text

heading 2XL font bold

mb6 we'll simply say login with login to continue or login with

Google so if you just now uh refresh the

application if I go to Local Host 3000 what we will see if I just

refresh uh I just need to refresh the application first of all

uh you'll actually see login with Google right here if you see we do need to

Center this out

uh uh BG gray 100 Flex item Center

justify sorry justify Center not dou R was the mistake and if you just refresh

right

here I think there is a additional setting that you can do right here inside

this debug to true I think you can pass this setting and if you make any sort of

changes it will automatically refresh so you don't need to restart the server once again you will see uh if you make

any sort of changes right here you login with Google and if I go to the login

HTML and if I let's suppose if I make a change I think it will automatically detected you will see that

so just pass this option of debug to true for local it's very

helpful and uh go to here uh after doing this we will actually be

having so we can basically give this heading right here login to continue and then we will actually be

having a hre tab which will go to/ login and this will actually say to the

user that login with Google you will have to have some classes right here Tailwind

classes BG blue 500 uh when we hover onto this button the BG blue will change

to 700 text will be white font bard py2

PX4 and it will be rounded so these are all the classes that we attached right

here you will say/ login is not defined we need to Define this route right here inside our

app.py file so right here we will Define this request which will be coming from

the slash login so now we need to Define this route slash login slash

login so this will be a method Define login now here we need to Simply Define

a variable here Google _ provider configuration settings CFG so you will say

getor Google so we need to Define this method which will actually get these settings

for us get Google unor provider CFG so we need need to Define this

method right here at the top

so what I will do right here uh just

see uh I think this method is a available right here if you see a

original code right here where is this

method yeah this is actually the method we need to Define right here

uh just after you do this this is actually the method that you see right

here so what this method will do it will actually go to this URL that we Define which is Google unor Discovery URL and

it will actually get the Json of it we are using the request module request. getet Google Discovery URL that we

defined early on if you see Google Discovery URL and it will go to this URL

so basically if you go to this URL it will actually show you all the accounts that you have all this information that

you have it will actually need to get this Json information right here so we are actually going to this URL

programmatically and getting all this Json data and we are actually returning it from this function so you will see

that so so we are getting this information

inside this variable Google unor provider configuration now what we need to do right here we

need to actually have a authorization endpoint where we can actually get the

authorization code so Google uncore provider configuration and here we need

to get this authorization

endpoint and then we need to Simply set the request URL so client do prepare

these are different methods available pre-built inside this Library if you want to get the access token if you want

to get the authorization code we need to get the authorization code for this we need simply say prepared request

URI prepare request URI and right here you need to pass the authorization end

point we need to say redirection URI is equal to the request. base URL

plus we need to Simply say SL call back and then we need to say the scope so

what sort of information that you are need to

get so we need to get the profile and the email of the user so we'll say

scope we need to get the open ID we need to get the email address we need to get

the profile of the user so these three things we need and after that

we need to return this redirect we need to redirect the user to this request

URI so now if you click this button if you go to Local Host

3000 if you click this button right here we need to restart the application

sorry this is Local Host 3000 click on this button and you will be redirected to your set of Google

accounts that you can select right here and uh so now if I select this account right

here and Grant the permission so what it will do it will try to access the call

back URL that you provided inside your Google Cent console so you will actually see it will go to this URL but it is

saying that not found if you see the address bar/ login /all back and it is

returning this authorization code right here this is actually the value that we need so now we need to get the access

token using this authorization code so access token is really important because in order to access any Google API you

need the access token now how we can get that access token we need to get this authorization code value that you see

right here and exchange it for Access token so it's very easy um we need to

Define this callback URL so right here app. route and uh SL

login / callback and uh we will actually be defining this we

need to get the authorization code

value from the URL so now to get that value we Define the code store

request. arguments. getet and that was the code

argument we'll stor in the authorization code in this variable and then simply say Google uncore provider uncore

CFG get Google configuration we again call this

function and token uncore endpoint and

Google underscore provid configuration and we need to now get this URL which is token uncore

endpoint in order to get the access token so token _

URL headers body and here we need to prepare

it for now the token request we now need to get the access

token for getting the access token we need to provide the token and point we need to provide the

authorization response which will be equal to the request underscore request. URL and then we need

to say redirection URL will be request. base do base URL and the code authorization

code we need to provide so this will be equal to code is equal to code and then

after that our token response what will be the token response coming we now need

to make make a post request using this information that we got which is the

token URL and the headers will be equal to

headers the data will be equal to which is available inside the body that we defined if you

see the body and then the authorization so this will be equal to we are

providing the Google client ID Google client secret to get the Excel token so

now we need to make this request client. par request body response and here we

will say json. dumps token response.

Json so after you get this you will actually get your user information User

information endpoint we will say Google provider configuration now here we need

to get the user info endpoint we need to get the endpoint where we can

request the user information so we can simply say here URI headers body and you

say client. add token user info

dopo so user info response you say request.

get URI headers is equal to headers and data is equal to body

so here we actually have a if condition right here if user info response Json

contains if you want to get only the verified email address so if this

contains a property called as email verified in that case only we need to get the information so unique ID we will

get which it is user info response Json and we need to have

this property which will be

sub similarly we'll get the email address display name and the profile

picture which will user email user info response.

Json so what I will do uh I will simply copy this two more time for that profile

picture and the username this will be

picture and this will be given name the display name of the user of the account and I will say users

name so now we need to actually store this

information in the session so you B basically make a session variable

session user uh this will be a object we'll

store the ID of the user which is unique ID we'll store the email address which

will be users email and we will store the display

name which is users name we will store the picture as well

which is actually the

picture so after you store this information guys we do need to also

store this user info in database as well so for storing it uh

we actually need to say C uh MySQL do connection we need to make the

connection first of all cursor this is the actual method after we do this we need to EXE give a very

simple command which is uh replace into the table name which is users ID email

name picture and then followed by the values so whatever is the values we actually

need to give the placeholders

like this and here we just need to give

the comma right here and then we need to

say unique ID users email

users and just you need to close this I think I forgot to do

this and right here un ID users

name users sorry users email users name

and picture that's all after this my SQL do

connection and we need to commit and close the connection cursor

close and then we need to redirect the user back to the

the index route or

else there is also else block as well because we have that if block right here

if if request so if the email is not verified in the else blog we can simply

say that uh user email not

available or not verified by Google so so we are only taking the verified

emails only we will return a 400 request that's

all so now we just need to modify the index route right here just a little bit

so whenever someone goes to the homepage we just need to check right here if they are in the session or not so you'll

actually have a condition right here just to check that if the user is if the

currently logged in user is logged in or not it is available in session or not if

they in session in that case you will return a different template which will be profile. HTML you'll pass the user

which will be coming from the session so session user so now if they are not in the

session in the else blog we can show this login page so conditionally we are

rendering it based upon if the user is available in session then we show the profile HTML if they are not in session

then we show the login. HTML now we know need to Define this

uh a this file which is profile.

HTML so this will also be the profile page of the user once

they are authenticated we again need to use the Tailwind CSS uh CDN of Simply

copy this and simply after the title paste it so right here uh for displaying

the user information it's very easy again you'll use the same Tailwind

classes BG gray 100 Flex item

Center justify Center horizontal screen and here you'll

simply LG shadow

these are all the Tailwind classes that we give early on as well so inside this

uh we will actually displaying the profile picture of the user which will be coming dynamically user. picture so

this user object that we are passing it if you see we passing this from the session so this user is available inside

profile HTM you're using double curly bracket to actually embed the variable user uncore picture so in flask you can

do this and we can actually give it a rounded full W 24 WID 24 horizont height

will be MX

uh h24 MX

Auto margin 4 so after this Prof uh profile picture is

there we need to also give it a

heading so here we need to display the usern name of the user display name

user. name

then we need to give it a paragraph here we can actually show show the this uh

email address of the user

and so if you just uh refresh now uh try to go to

this if I go to Local Host 3,000

click on this button so you'll be directed to your selecting your account and click on continue and uh it will

actually show you profile picture it will redirect you to the Local Host 3000 so you will see that

so if I actually show you the table as well uh one entry will be added right

here you'll see automatically the previous entry was there you already logged in with this account and now this

second second account is also inserted so if I go to this Local Host 3000 it

will automatically detect I'm already logged in it will show first of all you need to log in right here so you will

see that the information is displaying successfully and if I close this now

once again open this it is stored inside the session so it will retain this

information you will see that so in the file system it has created Flash session so all this session information is

stored inside the file system in this folder so now at last we just need a log

out button to actually let the user log out or delete it from the session so SL log

out so here we can simply say log out and give it a button BG red

500 these are all Tailwind classes guys so uh this tutorial is about last not tail

V so you can read more about their

documentation so there will be this button added log out and uh we do need to

actually make this log out request which is very simple code right

here if you simply go to this it will be not found so just go to app.py and just

Define this request also at last ab. rout SL

logout so here what we need to do we need to clear out the session it contains pop method you need to delete

the session delete the user from the session and then redirect the user

to the index route so in that scenario the user session will not be available

in that case it will actually go to the homepage Home Route and now it will show

the login. HTML so click on log out we do need to restart the

application for this so it will automatically detect if

I say login if I click log out it will

redirect me to the homepage you will now see if I close

this so you can see that so in this way guys you can actually build out this complete user Google user o to login and

log out system in flask in Python we have shown you how to display it from step by step and we are storing this

information in my SQL database as well so if you are interested the full source code with documentation is present you

can purchase it from my website Pro Cod store.com the link is given in the description and thank you very much for

watching this video please hit that like button subscribe the channel as well and I will be seeing you in the next video