Google Authentication / Full Stack Development

Google Authentication
by Tomas Trescak· Authentication and Authorisation

0 / 1750 XP

Why does this matter? In today’s world, almost every app integrates with services like Google’s. Whether it’s for login, analytics, or storing files, credentials are the key to unlocking these features. But here’s a fun question: have you ever wondered how apps magically know who you are when you click “Sign in with Google”? It’s not magic—it’s credentials! Let’s dive in and demystify this process. And don’t worry if you think it’s just “copy-pasting some keys”—there’s more to it, and I’ll show you why cutting corners can lead to headaches.

Section 1: Busting Myths and Setting the Stage

Let’s start with a common misconception: “I’ll just grab some keys from Google, plug them into my app, and I’m done.” Sounds simple, right? Not quite! If you don’t set up your credentials properly, your app might not work, or worse, it could expose sensitive data. Another myth: “This is only for big projects.” Nope! Even our small blogging app needs this setup to let users log in or let admins upload images to Google Cloud Storage.

Here’s a counterexample to shake things up: Imagine you skip creating credentials and hardcode your personal Google account details into the app. It might work for you, but when you share it with others—bam, security disaster! The right way is to use the Google Cloud Console to generate secure, app-specific credentials. Let’s explore how to do this step-by-step, using our blogging app as the example.

Section 2: Step-by-Step Setup in the Google Cloud Console

Now, let’s get hands-on. We’re building a blogging app, and we want users to sign in with Google. To do that, we need an OAuth 2.0 credential. Here’s how we set it up in the Google Cloud Console.

Step 1: Create a Project

First, head to the Google Cloud Console (console.cloud.google.com). You’ll need a Google account—any will do. Once you’re in, click the project dropdown at the top and hit “New Project.” Name it something like “BlogApp.” This project is like a container for all the Google services your app will use.

Why? Every app needs its own project to keep credentials and settings separate. Imagine if your blogging app shared credentials with a random game app—chaos!
Details: Give it a unique name and hit “Create.” It takes a few seconds, and then you’ll see “BlogApp” in the dropdown.

Step 2: Enable APIs

Next, we need to tell Google what services our app will use. For our blogging app, we want the “Google+ API” or “People API” for login (Google+ is older but still referenced in some docs). From the left menu, go to “APIs & Services” > “Library,” search for “People API,” and click “Enable.”

How it works: Enabling an API is like flipping a switch to let your app access that feature. Without this, your credentials won’t know what they’re for.
Example growth: Later, if admins need to upload images, you’d enable the “Cloud Storage API” too. Start simple, then expand.

Step 3: Create OAuth Credentials

Now, the fun part—creating the credentials! Go to “APIs & Services” > “Credentials” and click “Create Credentials” > “OAuth 2.0 Client IDs.” Here’s where our blogging app comes to life:

Application Type: Choose “Web application” since our app runs in a browser.
Name: Call it “BlogApp Login.”
Authorized JavaScript Origins: Add your app’s URL, like http://localhost:3000 for development.
Authorized Redirect URIs: Add http://localhost:3000/api/auth/callback/google—this is where Google sends users after login.

Hit “Create,” and you’ll get a Client ID and Client Secret. Save these—they’re the keys to your app’s Google connection!

How it works: The Client ID identifies your app to Google, and the Client Secret proves it’s really you. Together, they let users sign in securely.
Advantages: This setup scales easily. Add more redirect URIs for production later (e.g., https://myblogapp.com/auth/callback).
Disadvantages: If someone steals your Client Secret, they could impersonate your app. Never hardcode it in your code—use environment variables instead

My setting for Google (do not add skillpies settings only localhost)

Step 4: Test It Out

Let’s expand our example. In your blogging app’s code (say, a TypeScript frontend), you’d use a library like google-auth-library to handle login. You’d send the Client ID to Google, get an access token back, and use it to fetch the user’s profile. For now, just know the credentials you made are the foundation.

Simple Example: User clicks “Sign in with Google,” sees a popup, and logs in.
Advanced Example: Admin logs in, and you use the same credentials to let them upload a post’s featured image to Google Cloud Storage.

Section 3: Potential Pitfalls and Best Practices

This process isn’t flawless. If you misconfigure the redirect URI, users will see errors like “Redirect URI mismatch.” Or if you expose your Client Secret, hackers could misuse it. Here’s how to avoid trouble:

Double-check URLs in the console match your app exactly.
Store credentials securely (e.g., in a .env file, not in Git).
Test locally first, then update for production.

On the flip side, the advantages are huge: secure logins, scalable services, and a professional user experience. Our blogging app now feels like a real product!

Conclusion

Let’s wrap up. Today, we learned how to set up Google credentials in the Cloud Console for our blogging app. Key takeaways:

Create a project and enable the right APIs.
Generate OAuth credentials with proper URLs.
Use them to unlock features like login or storage.

Best practices? Secure your secrets, test thoroughly, and don’t skip steps thinking it’s “just keys.” A common pitfall to avoid: rushing through without understanding why each step matters. Next time, we’ll integrate these credentials into our app’s code—get ready to see it in action! For now, go play around in the Console and make your own project. You’ve got this!

magine you’re building a blogging application where users can log in with their Google accounts, view posts filtered by tags or dates, and admins can manage content seamlessly. To make this happen, you need to connect your app to Google’s services—like authentication or cloud storage. That’s where setting up Google credentials in the Google Cloud Console comes in. This process is essential because it allows your app to securely talk to Google’s systems, ensuring your users’ data stays safe while giving them a smooth experience. Why does this matter? In today’s world, almost every app integrates with services like Google’s. Whether it’s for login, analytics, or storing files, credentials are the key to unlocking these features. But here’s a fun question: have you ever wondered how apps magically know who you are when you click “Sign in with Google”? It’s not magic—it’s credentials! Let’s dive in and demystify this process. And don’t worry if you think it’s just “copy-pasting some keys”—there’s more to it, and I’ll show you why cutting corners can lead to headaches. SECTION 1: BUSTING MYTHS AND SETTING THE STAGE Let’s start with a common misconception: “I’ll just grab some keys from Google, plug them into my app, and I’m done.” Sounds simple, right? Not quite! If you don’t set up your credentials properly, your app might not work, or worse, it could expose sensitive data. Another myth: “This is only for big projects.” Nope! Even our small blogging app needs this setup to let users log in or let admins upload images to Google Cloud Storage. Here’s a counterexample to shake things up: Imagine you skip creating credentials and hardcode your personal Google account details into the app. It might work for you, but when you share it with others—bam, security disaster! The right way is to use the Google Cloud Console to generate secure, app-specific credentials. Let’s explore how to do this step-by-step, using our blogging app as the example. SECTION 2: STEP-BY-STEP SETUP IN THE GOOGLE CLOUD CONSOLE Now, let’s get hands-on. We’re building a blogging app, and we want users to sign in with Google. To do that, we need an OAuth 2.0 credential. Here’s how we set it up in the Google Cloud Console. STEP 1: CREATE A PROJECT First, head to the Google Cloud Console (console.cloud.google.com). You’ll need a Google account—any will do. Once you’re in, click the project dropdown at the top and hit “New Project.” Name it something like “BlogApp.” This project is like a container for all the Google services your app will use. * Why? Every app needs its own project to keep credentials and settings separate. Imagine if your blogging app shared credentials with a random game app—chaos! * Details: Give it a unique name and hit “Create.” It takes a few seconds, and then you’ll see “BlogApp” in the dropdown. * [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/full-stack-development-comp3036-2025/sections/google-authentication-in-authentication-and-authorisation/create-google-cloud-project.png] STEP 2: ENABLE APIS Next, we need to tell Google what services our app will use. For our blogging app, we want the “Google+ API” or “People API” for login (Google+ is older but still referenced in some docs). From the left menu, go to “APIs & Services” > “Library,” search for “People API,” and click “Enable.” * How it works: Enabling an API is like flipping a switch to let your app access that feature. Without this, your credentials won’t know what they’re for. * Example growth: Later, if admins need to upload images, you’d enable the “Cloud Storage API” too. Start simple, then expand. STEP 3: CREATE OAUTH CREDENTIALS Now, the fun part—creating the credentials! Go to “APIs & Services” > “Credentials” and click “Create Credentials” > “OAuth 2.0 Client IDs.” Here’s where our blogging app comes to life: * Application Type: Choose “Web application” since our app runs in a browser. * Name: Call it “BlogApp Login.” * Authorized JavaScript Origins: Add your app’s URL, like http://localhost:3000 for development. * Authorized Redirect URIs: Add http://localhost:3000/api/auth/callback/google—this is where Google sends users after login. Hit “Create,” and you’ll get a Client ID and Client Secret. Save these—they’re the keys to your app’s Google connection! * How it works: The Client ID identifies your app to Google, and the Client Secret proves it’s really you. Together, they let users sign in securely. * Advantages: This setup scales easily. Add more redirect URIs for production later (e.g., https://myblogapp.com/auth/callback). * Disadvantages: If someone steals your Client Secret, they could impersonate your app. Never hardcode it in your code—use environment variables instead [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/full-stack-development-comp3036-2025/sections/google-authentication-in-authentication-and-authorisation/image.png]My setting for Google (do not add skillpies settings only localhost) STEP 4: TEST IT OUT Let’s expand our example. In your blogging app’s code (say, a TypeScript frontend), you’d use a library like google-auth-library to handle login. You’d send the Client ID to Google, get an access token back, and use it to fetch the user’s profile. For now, just know the credentials you made are the foundation. * Simple Example: User clicks “Sign in with Google,” sees a popup, and logs in. * Advanced Example: Admin logs in, and you use the same credentials to let them upload a post’s featured image to Google Cloud Storage. SECTION 3: POTENTIAL PITFALLS AND BEST PRACTICES This process isn’t flawless. If you misconfigure the redirect URI, users will see errors like “Redirect URI mismatch.” Or if you expose your Client Secret, hackers could misuse it. Here’s how to avoid trouble: * Double-check URLs in the console match your app exactly. * Store credentials securely (e.g., in a .env file, not in Git). * Test locally first, then update for production. On the flip side, the advantages are huge: secure logins, scalable services, and a professional user experience. Our blogging app now feels like a real product! CONCLUSION Let’s wrap up. Today, we learned how to set up Google credentials in the Cloud Console for our blogging app. Key takeaways: * Create a project and enable the right APIs. * Generate OAuth credentials with proper URLs. * Use them to unlock features like login or storage. Best practices? Secure your secrets, test thoroughly, and don’t skip steps thinking it’s “just keys.” A common pitfall to avoid: rushing through without understanding why each step matters. Next time, we’ll integrate these credentials into our app’s code—get ready to see it in action! For now, go play around in the Console and make your own project. You’ve got this!

Discuss with Maggie
Use the power of generative AI to interact with course content

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners

Github Authentication Exercise: Social Logins

Google Authenticationby Tomas Trescak· Authentication and Authorisation