Build a CodeIgniter 4 Google OAuth2 Login and Logout System With Sessions and MySQL in Browser

uh hello guys welcome to this video so in this video we will actually talk about how to actually integrate the

Google login inside Cod nigher for application C nighter is actually a PHP

framework if you don't know just write Cod nighter and this is the official

documentation website it's a PHP framework it's a small framework but

with powerful features it's a MVC W framework model view controller and let

me just show you the demo so if I just open host 8080 this is actually the you

will see the profile information about the user which is a display name profile picture and the email address so we also

have the log out button as well if you click log out you will you are successfully log out and we will also be

storing information inside this table if you see my SQL table so we will actually have these fields here which is ID this

is the Google ID name email profile pick so let me just uh zoom in

just wait so you will basically see guys this

is actually our table which is storing ID is the primary key Google uncore ID name display name email address and

profile picture so all these details will be storing it inside the table in COD nighter so this is the actual

directory structure of the project if you see that we are actually running this project on our port number you can

have this command PHP spark serve this is actually the spark CLI which is

provided by Cod nighter PHP spark Ser so this will actually start our development

server which will simply run on Local Host 8080 so if I open this application

the very first link which comes right here so we are not logged in we need to log in so simply we need to click this

uh login with Google button so as you click it you will be redirected to the consent screen where you need to select

your Google account on which you need to log in I will simply select my Google account right here you need to Grant

permission right here simply click on continue to actually Grant the permission to this project so once you

click continue it will actually fetch the user information and it will display the profile picture this is a display

name this is actually the email address and we also have the log out button and if I refresh the table right here you

will see that one entry has been successfully added so you will see the ID is automatically inserted primary key

this is the Google uncore ID this is a display name this is the email address and this is actually the full profile

picture link right here that we are displaying here so in the browser so if I close the window right here again open

it reopen it you will see it will automatically detect that I'm already logged in so it will actually redirect

me to the profile page you will see that so now we are actually showing the user profile information so if I close my

browser as well again reopen the browser and again go to that same URL

then also it will work because it is storing this information in the session so again it will redirect me to the

profile page so once we are logged in so we also have the option to actually click log out so now we will be

redirected back to the login page so once again if I open the browser now it will re redirect me to the login page

because we are log out so very simple login system guys we will not try to

develop this Google authentication system so now you will see this login with Google button so once you click

this button you will be redirected to the profile page so we are actually using Cod nighter 4 the latest version

of the this framework we will be storing information inside the session table in

the users table in the MySQL table right here you can try out with any account

here Google account if you have a different account you can try out with that also again it will cons uh just

show the consent screen you need to allow the permissions so once you do this you will see your profile

information in a nicely like structure we are using Tailwind CSS for the user interface this is a complete project

guys and if you are interested in purchasing the full source code of this project with full directory structure

and documentation the link is given in the description you can directly go to the my website proot store.com where

I've given the full source code with full directory structure and documentation the link is given in the

description of the video after you purchase it you will actually get a zip file of this which will actually contain

all these directories structure so once you make the payment you will be redirected to Google Drive where you will actually get this ZIP file which

will actually contain all these project files so if you are interested the link is given in the description of the video

so now let's get started by building this uh application so I will be seeing you in the next section so now guys in

this section we will start building this Cod nighter 4 project before you do this you must have exam control panel

installed on your machine so this we will be requiring for for running PHP because citer is actually a PHP

framework so you should have exam control panel installed so we are actually starting our Apache server

which will run on port number 80 and the MySQL uh database which will actually

run on Port 3306 so this comes with this uh MySQL

comes with this Apache while control panel exam control panel you can simply

write here exam control panel download the very first link which comes this is their official documentation you can

download for Windows Linux and Mac depending upon your operating system simply install this and start this

Apache server and my SQL Server so now to actually install Cod nighter and make a

new project I will simply go into the C directory and go to examp so just go to the exam directory

where the exam is installed and then go to STD docs folder and write right here we'll make a new citer project so for

making this citer project we have a command line tool that we can use which is composer which is a dependency

manager for PHP application so we'll simply write this command composer

create project citer so just write the same spelling

right here that I'm writing citer 4 SL app starter and Then followed by your

project name so let me just give Google O2 login project so this is actually the

command guys let me zoom in composer create project code nighter 4/a starter

and Then followed by your project name so I will simply enter it and now it

will actually create the composer file and it will actually install all the modules which is a cord nighter modules

so you just need to wait for some time to actually install in this and just finish so once it's installed it will

actually give you notification that everything is okay so now you can see that now we can navigate to our project

directory and open it inside vs code so it will look something like this the

basic citer project we have the app folder we have the public folder so this

is actually the basic citer project so now the very first thing we need to do we also need to install this module

which is the Google API client which is a dependency required for implementing

Google authentication composer require Google SL API client so this is

actually the composer require Google SL API client this is actually which is

required for this application simply enter it and uh now this will actually

install this Library as well it is used to actually interact

with the Google apis different apis so this is actually the client library for

PHP applications so it will hardly Take 5 to 10 seconds and it will install this

module as well after that we will actually create our table and migrations

in code nighter so there is a actual command which is there which allows you to make

those migrations so once it is finished we will try making the tables as well so

just wait for this to

finish so you can see it is just extracting the archieves here it is gone to this Google SL API Client Services if

you see the version number it is the latest version that we are installing

it so once it it is installed guys I will be back so now wise it is

successfully installed uh the library that we are installing so if you see inside your

vendor folder all the dependencies will be installed so this is actually the vendor folder and this is actually the

module that we installed it is stored inside Google this is API client folder it contains all the modules that we will

be using in this tutorial API client services so all the services that Google

offers apis we have installed it so after installing it we will now need to

create our database and table so for that we need to go to the app folder go to the config folder right here and just

there is a file called as database.php you need to edit this file and here you

need to tell citer which is your database name and the username and

password so this is actually Local Host host name will be correct Local Host username you need to replace here for

examp it is root password is nothing so by default password is nothing and here

you need to replace your database so you do need to create just go to your PHP my admin simply click it you will be just

create a new database I will call this database as uh o

or2 login click on create so now now you

will see that this database has been created

this is O2 login database currently it doesn't have any table so what I will do

I will replace this name in the database entry or or to login that's all and DB

driver is my SQL I that's all this will remain the same you just need to replace the username as root and the database

name so whatever database that you will create replace the name right here simply close this file now come to the

command line and simply you need to execute this Command right here here which is

composer uh PHP spark and make migration make colon

migration and then you need to name your migration so I will simply say create users table this is actually the command

simply pause the video and write it PHP spark make colon migration and create

users table so it will actually create the users table and you will see the file is created in the database m mtion

folder so if you just see there is a database folder right here in the

migrations we have actually created this file this file is automatically created

when we executed that command so right inside this file we just need to write here just write some code for this this

Forge and here we need to add field so we need to add field for our ID

so this ID will be actually will be the primary key so this will something like

this so what I will do I will simply copy paste it don't waste your time and then explain to you what is happening so

this is actually the fold uh I just uh just

fit let me copy this and explain to you what is happening right here in

this this is actually uh the fields right here guys we have added for add field we ID is actually the primary key

Auto increment to Google uncore ID name display name email address and profile

picture so this will be typ varar again constraint is 100 so we have just

put right here after that uh we just say here this Forge

and here we need to Simply add the primary key so we'll simply see add key

ID to be true so this basically tells the Cod nigher to make this as a primary

key and lastly we just need to create the table so there is a method out there

which is in code nighter which is create table and we will name this table as users so this table will get created

user table so there is a function create table so after this for the for this

migration to happen if you want to delete this table we have this uh drop

method as well there is a drop table method as

available as well if anytime if you want to delete this table you

can uh undo this migration so this function will call this drop table to actually delete that so both the

functions we have written so now what what we need to do we just need to run

this migration to actually create the table if you just look at in the database

nothing is present because the table is not created Now to create that table using these constraints that we have

written we just need to execute the command which is PHP spark migrate so

what it will do it will run this migration and now you can see that the

table will be created if you refresh two tables are created this is actually your migration

table it will actually hold all the migrations that you have done so we have created one migration create users table

and the second table is actually the users table if you see the structure of the table ID primary key Google ID name

email profile pick these are five columns out there so the table is

successfully created just close this file right here and now after this we now need to create model so in just go

to the models folder and just create a file right here user model.

PHP so right inside this file guys we need to models typically refers to the

data whatever data that we need to store so right here we will be

using PHP tag right here Nam space app

models we will be using the code lighter uh SL model

class and this will be the class here of user

model it will be extending the the model

class model based class so right here we will have some

variables protected first of all the table that we have created uh table is equal to the table name which is users

then we have uh the primary key which is

ID and then we have allowed

Fields so what fields are allowed so we are allowed in Google uncore ID display

name email address and the profile pck so these are the four columns

we will be storing information Google ID name email profile pick after this we

will actually Define a function in our model to actually find or

create we will actually pass the data to it and here you'll be actually inside

this model we will be getting this information by using

this where Clause so where Google ID is equal

to Google uncore ID so this is actually the method

first so this will actually get uh the username we here we are actually

providing the Google ID so this Google ID will be coming before if you make authentication successful this all this

information will be coming from Google so here we are actually getting the user by providing Google ID so after we get

this user we can just have if the user is not found in that case you can simply

say insert this user to the database so if this user is not found in the table

if this is a new user then in that case we will be inserting this user by using

the insert method in the table and then we will simply say user

us this. where goore

ID data Google uncore

ID first that's also after this we just

need to return the user

so here if you see guys basically in this function we are getting the user

and we are checking it if the user is already present so the user is already present

we are returning it simply we are returning

it so if this is a new user then we are inserting it to table

by using the insert method like this this is actually the model class so

that's all that we need to do inside the model CL class guys user model simply close this file now we will navigate to

uh again uh app folder and this config folder and here you will actually found

a file which is called as route routes.php this file is responsible for writing all

your routes inside your application so there is only a single route available to you so if you just run your

application if I run this application PHP spark serve this will start your

development server HTTP Local Host 8080 so if you run it for the very first time

this application this will actually load the homepage you will see welcome to Cod nighter

4.5.3 so which file is this doing it is going to the home page if you see in the routing file it is loading this

component home controller and then home controller is calling this file which is index so now we need to go to the home

controller if you see it's a MBC framework so model view controller so we

have a controller folder if you see we have having this home controller and

inside this home controller if you see we have the index function and it is loading this view which is this welcome

message so we have defined this file if you see go just go to the Views folder

we have this file called as welcom message. PHP so we are actually loading this file if you see if I make any sort

of changes right here to this file WR say hello Vol so if I makes changes refresh you

will see it will change so you just need to understand the inner inner workings

of citer before you make uh integrate Google login so it's MVC framework

before first of all the application goes to routes.php it basically goes to the

homepage then it loads the home controller and that home controller is located in this folder home.php then it

is loading this index calling this index method then it is loading the this view

this is welcome uncore message which is located in the views folder so now what

we need to do we need to add some more routes to it so just go to routes.php

so right here we need to add some more routes routes for getting the login page

so slash sorry Au login so for the login page we just need

to create a new controller for this which is the Au controller and here we'll need to create

a method which is login so for doing this just go to your

controllers folder and we need to create a new controller which is au. PHP just

create this folder just create this file. PHP and uh

we will simply have appcore just write some PHP tag first of

all app controllers it's a controller file that's why this name space is necessary and then you use uh

Google SL client as

Google client and then use app

models SL user we are integrating the user

model file that we defined early on and then we are using the use code

ner SL controller the base controller class for defining every controller so

you'll basically Define this controller class o extends uh controller

so inside this controller guys we will actually have this method which is uh public function

login so this function will be responsible for actually defining

our configuring our client or for O2

login there will be another function which will be responsible for call back URL

so this will be responsible for call back

URL once you actually Grant permissions so which which URL you want to load and

then the third function here will be for the log out functionality so here we will be writing

code for logging out the

user that's all so so right here guys first of all we need to write our login

functionality this is really easy we will be configuring our client which

will be new Google client so we have imported this dependency

so and here we will have this function which is available to us which is set

client ID so here we need to set our client ID and similarly we have a function for setting the client secret

as well so we need to get both this information from Google Cloud console I

will show you later on how to do this and in the meantime we also have this function as well which is set redirect

URI and here you need to set your redirect urri the base URL followed by

SL sorry au/ callback so this will look something like this uh if you want to

see HTTP Local Host 8080

SL au/ callback so this actually is the redirect URI that you need to copy

pasted inside Google Cloud console to actually get the client ready and the client secret so after this we also need to add

the scope what scoping information we need to say add scope we need the email

scope we need the email of the user and also we need the profile as

well so we need the profile as well like this so after this guys we

will actually be creating the Au URL so this will be client there is a function

here create all URL and then after that we will be

returning this we will be redirecting user to this URL which is

two and then or URL that's all that's all is there in this function

guys so once once the user goes to the login page once it clicks it it this

function will trigger and here we need to actually Define this client ID and client secret so for doing this you need

to have a Google Cloud console account for this I've already have one so if you

just go to apis and services you need to go to credentials and uh if you go to it then

click on create credentials o o client ID and select app application type to be

web application and here you need to paste your homepage URL so this will be I'm

running it on Local Host 8080 this is my homepage in the authorized JavaScript Origins and then

the authorized redirect URI so the same redirect URI that you have mentioned

right here if you see I will copy

this so This depends upon on how you are configuring your application for me it is look something like

this just see this is the HTTP local 8080 Then followed by sl/ callback

that's all so just follow me and then you will get no error so after that it

will give me my client ID client secret so don't copy this information this will be different for you so just simply

paste the client ID and also paste the client

secret so after you do this it's very now easy now

uh now what we need to do we need to go to the if you see we are actually having

this Au controller if you see Au login so here what we need to do we need

to go to the home controller so just go to the controllers folder just go to this file which is home.php and right

here if you see if you are going to the homepage we are simply loading this view but we don't want to load this view

instead we want to check if the user is in session so

session we will basically have this method get if the user is in session in

that case the user is already logged in then in that

case just remove this I think why it is

coming if the user is already logged in then we will simply redirect him to the

profile page but we will just do it later on but if the user is not logged

in in that case we will return the view as au/

login put a semicolon so here we need to

define the login page login view which is uh which will

be present in the views folder so we just need to go to the Views folder

right here and just Define a directory called as

directory o a and inside this directory you just

need to make a file login.php

so this will be the login

page so we also need to include Tailwind CSS because we are using it for styling

the UI so just after the title paste the CDN for CSS after this guys we will be

having a body class BG gray 100 inside this we will have these much

of classes this is just a basic HTML so I

will not waste time in writing this all the source code is given you

can purchase it so this will be the index uh login HTML we have a simple button

login with Google and it will simply go to this base URL which is / login so

this routing we have defined it inside routes.php so here we are actually if

you go to all/ login we will be loading this function in the controller that we

have defined if you see or. PHP we have defined this function which is login we is simply calling this function login

function if you see in the controller file so in the we are simply going to it so

now what we need to do we also need to create one other file in this views folder which is profile.php just create

this not in the O folder not in the O folder just outside this profile.php so

here we will be showing the profile of the user so we will say this is the

profile page simply here in uh our

controller file if you see uh not in controller file it is in

the uh I think there is this file home.php so just go to the home.php

and here we will simply if the user is already logged in then we will redirect the

user to the profile page so two base URL

profile so here we are simply checking if the user is already in session if the user is already logged in then we are

redirecting it to the profile page if they are not then we are showing the login page login

view so if you just refresh now you will see the login with Google

button right here so it has already detected this condition evaluates to

false because the user is not in the session so now it is running this view

which is located in the O folder in the views directory if you see o folder and

it is loading this view login. PHP so once we click this button right here

login with Google it is saying whoops we seem to have hit his snack so whenever

this happens guys if you want to debug your code nighter application there is a folder available to you if you go to

this uh writeable folder and go to logs and there is a logging file right right

here so you can check errors what error has happened so it is saying to us that

class Google client not found if you see this error is taking

place Google client not found so we need to actually uh go to

that and actually import this class because it is

saying to us that this class doesn't was found so I think I made some kind of

error in

this Google

client Google / client as Google client

let me see guys what is the error so now guys it is perfectly okay the application is now working so it was

just my backend issue so now you can see that if I click this button of login

with Google it will redirect me to the account selecting screen consent screen

so here I can select my Google account and uh let me select this account and

here need to Grant permission so simply click continue so what it will do it will exactly show you 404 page because

you can see the URL structure Local Host 8080 sl/ callback this is actually the

call back URL that we have configured and this is actually it is giving you the authorization code this is exactly

what we want this authorization code value we want this code to actually

exchange it for Access token so access token is access we need the access token

to actually use the Google API to actually show the user profile information so now to exchange this

authorization code for Access token if you see you need to go to your uh route

file go to config folder and just open this uh routes.php so we need

to write this route for the call back URL so when this URL occurs we need to

add a routing for this routes. getet

and then we will simply say /all back and whenever this occurs we need to

call the Au controller and inside this we need to call the call back function put a semicolon so here we are simply

telling Cod ner whenever this URL structure comes we just need to call the O controller in that Au controller we

have defined a method called as callback if you open the O controller if you see we have the login method we have the

call back method and we have the log out method so now we will concentrate on the call back method to actually

exchange the authorization code that we get with access

token so now inside this again we need to configure the

client new Google client we need to set

the client ID once again here also and also the client secret as

well and also we need to set the redirect URL this is same that we have done early

on as well base

URL / callback

so put a semicolon right here so here you need to replace your simply copy

this and replace it here

also and just replace your secret key as well right here

so after that we will actually have a if condition right here and here we will simply check that

if request get variable code so this

simply means that if this in this URL structure if this uh code variable

exists so we just need this value this is authorization code so we are checking in this if condition that if this code

variable exist then we need to exchange it for Access tokens so we will simply have a method right here inside this

client library of PHP which is fetch access token with

authorization code or you can even Fetch with uh refresh token as well but we

using this fetch access token with authorization code this is a method and here we need to replace

our get Val

we will just say We'll provide the authorization code like

this so after you so this will be in this request method

request it contains this method get like

this so now we actually get this access

token so if you want to print out this access token just to see what it looks

like you can just Echo out a simple statement right here

token so it will just show you on the screen if I refresh

here just go again I think

okay so this token if you want to just see the error you can again go to that I

tell you that writeable folder and this log statement and you will see this

lock if you just delete everything from here again refresh you will see arror to string

conversion this is actually the method error is coming because this token is in the form of array we can't display it

directly that's why this error is coming so we can delete this line from here instead what we can

do uh uh what we can do right here we can

set the access token the client set access token you

can pass this token as it is

token access token this is actually array so that's

why it was having this error so if you want to display this this is actually a array so in this we have this property

called as access token so now if you want to display it

if I refresh

now you will see that so this is actually the access token that we got from this authorization code if you see

so we exchanges this authorization for for this access token so we are actually

getting it and we are setting it so it is good practice to actually debug your code as well just to see if it you if

you are on the right track so after you do this we just need to declare a new variable new

Google service and uh this service will be for

the o 2 login system so passing this client as an

argument so here we need we will be getting a Google user from this so O2 this actually

contains a function which is user info and it contains a get

method so now we will be getting the user model we will be instantiating a

new instance of it we have declared this class early on which contains five properties Google ID

name email and profile ID so what we will do so you'll put the user data array

variable you will simply say Google

user ID then we comes the

name Google user name and then comes the email

address email then comes the profile

pick picture I think that's all so these are

the four columns that we had and just put a semicolon right here and then we

need to Simply insert this into the database as well so we'll say user

model find or create this is a

function we'll pass the user data so actually it is calling this class which is user model class we Define this

function early on find or create if you check in the models

folder uh if I show you user model class we have defined this function find or

create so we are actually checking if the user is already available then we are simply returning the user or if this

is a new user then we are inserting this user in the table like this so This is

actually calling that model function so this is internally related guys say MVC framework model view controller that's

why after this we need to store this VAR uh user in the session so you'll say

session set it's very simple in C nigher you look like this user pass the user

like this this will set the user in the session and then we will simply return and redirect the user to the profile

page two and here we will

simply go shift the user to the profile

page that's all

simply and here if you see if this uh request code doesn't generate

in in that case we will be redirecting the user back to the login page so

redirect to to the login page so / login if there

is some kind of error then we are simply redirecting user to the login page that's all so if you just refresh now

what will happen it will actually if you just go to Local Host

8080 click this button and uh sorry cannot seem to find the

page you're looking for can again go to the log

here again delete everything from here again

refresh so you will see it will redirect you to the profile page whenever I want to go to the homepage it is redirecting

me to the/ profile page if you see so here it is saying to me that 404 not

found so this is not error but we are on a uh right track if you open this uh

routes.php we are haven't defined this route for uh the profile route so we do need

to Define this to actually counter this error so we just need to

define the profile route just right here we will say routes doget

profile and whenever someone goes to the profile page we need to Simply call the Home controller and then def call the

profile function so here we need to go to the home controller and right here we will

be calling

our home controller and this home controller actually contains the code

for so here we will Define a function profile so we are calling that

function so here we will simply say the user will come from the session so

session get you getting the user right here you will see from the session so

after we get the user we can simply compare right here if the user exist if the user doesn't exist here we will

simply redirect the user back to the login page very simple very simple logic

base URL that's

Sol so it needs to have dollar sign so if the user doesn't exist we are

basically going to the homepage and if the user exist in that case we will showing the profile page

profile and here we will be in sending

this user as an argument user is equal

to

user that's all so if you just refresh now they will actually see this this is

the profile page if I go to the Local Host 80 it will redirect me to the

profile page we are currently logged in now we just need to go to the profile page that we have in defined

here in the views folder profile.php and here we just need to edit this file just to show the

information that we need which is the profile picture display name and the email address so just after the title

paste the CDN of Tailwind CSS and this is profile page of

user so all the source code of this project guys you can purchase it with full documentation the link is given in

the description I will support you once you purchase it and after this right here we

will be giving a class BG gray

100 so we will be having class here M at screen Flex items

we will show the image to the user like

this so we are showing the profile pick like

this so if you just refresh you'll see profile picture is showing

we will basically give it some Tailwind classes to it so just give it a

class rounded full MX Auto

mb4 so it will basically turn

around so then we actually have to have a H1 tag

so let me just write this guys a slightly complicated code so I don't enjoy writing it so I will explain you

once I write

it so just format so you will see this is act

profile pick this is a user display name this is email address and this is actually the log out button it will

actually go to the au/ logout route if you just refresh now you will see that

so I think there is some slight mistake that I done let me copy this whole

file I hate writing HTML guys that's why it creates some problem now it is there

in the same screen so all the source code is given guys you can directly purchase it from my website Pro Cod

store with full documentation and directory structure and after you basically you need to Define this route

au/ logout so just go to your routes.php file and whenever you click this uh log

out button we will actually be having this

route so in this route guys what we need to

do we just need to paste this so it will actually call the log out function in the Au controller just make open Au

controller and here we need to uh Define the log out function which is pretty much very easy we need to destroy the

session so this session it contains a method to destroy the

session after destroying the session we will redirect user back to the

homepage like this that's all two lines of code for logging out so click on log out it will react back

to the homepage again if you click login with Google you will see that so now if

you close the browser once again open it it will automatically detect that you are already logged in Local Host

8080 you will see that so if you see the this information is already been

inserted in the database as well if you check O2 database we have created O2

login database so in the users table we have

currently one user logged in so if you try to log in a different user Local Host

8080 click on if you're doing it for the very first time then you need to select the account here you need to just do it

for the very first time and then a new account is inserted so this information is inserted

automatically this is a project guys fully flesh project in citer 4 and if you are interested please hit that like

button subscribe the channel as well and you can find out the full source code purchase it the link is given in

the description you will get this full directory structure with full documentation and support from me once you purchase it from my website proot

store.com you will get a zip file after you purchase it from Google Drive so thank you very much guys for watching

this video and I will be seeing you in the next video