In a previous tutorial, we implemented Google Login using pure PHP. This time we are going to implement Google login with JavaScript instead — a simpler approach that requires no client secret and gives you access to Google’s predesigned sign in buttons.
This approach is simpler, requires no client secret, and gives you access to Google’s pre‑designed sign‑in buttons. You can still send the retrieved user data to PHP later if you want to store it in a database, but that’s optional and outside the scope of this guide.
Let’s get started.
Google Login with JavaScript and PHP: Google Cloud Console OAuth Setup
Before setting up Google OAuth with JavaScript on the frontend, you must tell Google which domain is allowed to use your OAuth credentials.
In your Google Cloud Console:
- Open your OAuth 2.0 Client ID
- Scroll to Authorized JavaScript origins
- Add the domain where your google login page will run
Since we’re testing locally, add:
http://localhost
Here’s what that screen looks like:
Then, we have to add the Google API library for JavaScript by adding this code into head.php.
The meta tag works as an identifier for your Google ID and the script tag links to the library. You’ll notice there are async and defer attributes in the script tag. They basically tells your page to not wait until the script is fully loaded and just continue to load the rest of the code. Note : replace Client ID with your own Client ID
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts Manager</title>
<!-- Google library -->
<meta name="google-signin-client_id" content="Client ID">
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
Then, go to login.php and add this code below “Google Login”.
You’ll notice there are two main parts to this code, HTML and JavaScript.
The HTML part renders the Google Sign In button — one of the biggest advantages of this method is that you get access to Google’s officially predesigned button styles without any extra CSS. One advantage of this method is that you can get options of predesigned buttons. There are 2 divs here, the upper div is for the credentials and what the button will do while the lower div is for how the button will look. You can actually combine them into 1 div, but for readablility, it’s better to divide them.
The attributes are selfi describing, but for full explanation and full opstions of what attributes can be used, refer to the Google Identitiy’s HTML API documentation and experiment with the attributes.
The JavaScript part of the code handles what will happen after the button is clicked. We prepare a function that will handle the response when the button is clicked. Keep in mind that the response is a JWT token, so we decode JWT in JavaScript first using the decodeJwtResponse function, then redirect to save-to-db.php passing the data we need as GET parameters. You can console.log the decoded response to check what data is available and use the ones you need or you can check the documentation for complete information.
<!-- HTML -->
<p>Google login with JS</p>
<div id="g_id_onload"
data-client_id="Client ID"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
<!-- JavaScript -->
<script>
function handleCredentialResponse(response) {
const decodedResponse = decodeJwtResponse(response.credential);
window.location="save-to-db.php?given_name="+decodedResponse.given_name+"&family_name="+decodedResponse. family_name+"&email="+decodedResponse.email;
}
//decode JWT
function decodeJwtResponse(data){
var tokens = data.split(".");
return JSON.parse(atob(tokens[1]));
}
</script>
Conclusion
Now that we have the user data from Google, we need to save Google login data to the database using PHP. We create save-to-db.php which receives the data through GET parameters and stores it just like the pure PHP method. The JavaScript passes the retrieved data to be processed in another page. So, we create save-to-db.php and write the code below. This code recieives the data and save it just like if we log in with Google using pure PHP. The code are very similar, but instead of retrieving through API, we get the data we need through $_GET parameters.
<?php
session_start();
include 'connect.php';
// Get user profile data from GET parameters
$username = $_GET['given_name'].$_GET['family_name']; // Creating username from fullname
$email = $_GET['email'];
// Retrieve from database to check if a user with this email address already exists
$sql = "SELECT id FROM users WHERE email=?";
$row = $connection->prepare($sql);
$row->execute([$email]);
$user = $row->fetch();
// If no user exists with this email address, register with google account
if(empty($user)){
$sql = "INSERT INTO users(username, email) VALUES(?,?)";
$row = $connection->prepare($sql);
$row->execute([$username, $email]);
$user_id = $connection->lastInsertId();
}else{
$user_id = $user['id'];
}
$_SESSION['user_id'] = $user_id;
echo '<script> alert("Logged In"); window.location="index.php" </script>';
That’s how you do google login using JavaScript API instead of PHP. Both methods are very similar, the difference is on the way to retrieve the data. Adavntages of the JavaScript method includes predesigned buttons and no need of client secret. Use whichever method suits you best. For complete information, refer to the documentation.