Enable Any Frontend App with Login using Google & SpringBoot

Name: Enable Any Frontend App with Login using Google & SpringBoot
Rating: 4.4 (77 reviews)

Enable Login with Google on your Frontend application using Google Oauth2 and SpringBoot by Implementing it end to end

Created byRanjan Pandey

Last updated 6/2023

English

English [Auto],

What you'll learn

You will learn about Oauth2 and Spring security
You will learn about creating REST endpoint using Springboot
You will learn about Google Oauth2 and Springboot integration
You will learn to create a frontend and connect it with Login with Google

Course content

4 sections • 23 lectures • 1h 7m total length

Course Overview2:29
Demonstrates authenticating a frontend app with Google login against a Spring Boot backend, then displays user data after sign-in, illustrating a framework-agnostic login flow across Angular, Vue, Flutter, or Ionic.
About your Instructor0:18
Software Installation3:34
Install essential tools for the course: Java development kit, an editor, Postman, Maven, Git, and the described databases with maya script, plus environment variables setup.

Overall Project Workflow and Architecture3:29
Explore building a social login with Google for a Spring Boot app, using Google authentication to authorize users while separating authentication from application data.
Create Google Console Project & Update consent screen3:33
Create a Google Cloud Console project, configure the external consent screen, and prepare credentials to allow your app to access user Google account data.
Creating Client Id and Client Credentials2:29
Create credentials for your Google login integration by selecting the application type, naming your app, and configuring localhost:9000 as the redirect, then copy the client id and client secret.

Generating Springboot Project from Spring Initializer2:16
Generate a new Spring Boot project from Spring Initializr, select the latest version, name the app, and add Spring Web, Spring Data JPA, and Google login dependencies for database integration.
Import project to intellij0:59
Import the extracted social spring project into IntelliJ, run a clean Maven install to download dependencies, reload imports, and prepare to implement a social logging endpoint in the next video.
Implementing Controller with Greeting Endpoint2:04
Implement a Spring Boot controller with a class-level request mapping and a simple get endpoint that returns a welcome message, forming the foundation for Google login integration.
Spring security configuration for clientId and clientSecret1:54
Configure Spring security for Google login by adding clientId and clientSecret to the application properties. Paste the Google console values into the config and run the server to enable authentication.
Implementing Spring Security Config class3:41
Create a security config that forces all requests to be authenticated by redirecting users to Google for login, using the Google console client id and client secret.
Test Log-in with Valid Google Account2:27
Test login with a valid Google account by starting the app, authenticating, and observing the redirect to home; learn how to obtain the authenticated user info for the database.
Getting LoggedIn user profile information in our application3:35
Use the authenticated principal to fetch the user data map, then call the current user details endpoint to obtain email, full name, and profile picture from Google login.

Downloading Visual Studio Code0:57
Download Visual Studio Code, install it, open the editor, and start building a front-end that calls the backend springboard API, handles Google login, and displays user info in the browser.
Setting up Frontend2:02
Set up a frontend page with index.html, run it on a live server, and connect any framework—React, Angular, Vue.js, Flutter, Ionic, or React Native—to the built back end API.
Integrating Bootstrap52:05
Explore integrating bootstrap 5 to style a frontend app, applying container, margin, and text classes, and building a simple responsive layout for a social app.
Add Login with Google Link2:57
Add a Google login link using Bootstrap grid, create a login button that redirects to Google authentication, and implement post-login redirection to the front end homepage.
Redirect User to Frontend Index page2:48
Demonstrates redirecting a user to the frontend index after login by styling a bootstrap button and configuring a redirect view, then testing the flow.
Fetch API call to Get Current User Data5:19
After login, this lecture demonstrates a fetch API call to get current user data from localhost:9000 and display it on the home page using JavaScript.
Solve the CORS issue5:21
Resolve cors by serving frontend assets from the same domain as the backend and redirecting login to the home page after Google authentication. Build with mvn clean install.
Understanding the complete google authentication flow4:53
Understand the complete Google authentication flow in a frontend app with Spring Boot, from index access to Google authentication, redirects, and displaying user information on the homepage.
Designing Our Homepage for User Profile5:00
Design and implement a user profile on the homepage by displaying the profile picture, full name, and email, populated from user data via JavaScript.
End to End testing with multiple google user login3:28
Perform end-to-end testing of a frontend app with multiple Google user logins to validate Google login integration and profile information.

Requirements

Basic Knowledge of HTML, Java

Description

In this course you will learn to create a frontend application using HTML, CSS, JavaSCript and Bootstrap.

Then we will learn to create a Springboot application. After that, we will move on to create few REST API endpoints in our Springboot Application.

Next we will move on to configure google console dashbaord to register our Springboot application.

Then we will make a connection from our Springboot application with Google console.

After that we will configure Spring Security in our Springboot application in such a way that only allowed endpoints will not need authentication. But for other endpoints user will be redirected to Google Authentication page.

On Google Authentication page user will fill out its google credentials. If entered credentials are the correct user will be redricted to our Springboot Application.

Now its time for us to create our frontend application and we will connect this frontend with our Springboot application.

So user will now come to our Frontend, then he will login with google.

On successful login we will fetch user information from google and show it to user on the next page.

With Login with Google functionality we don't have to keep a seperate user database with us rather we can ask google to authenticate our user on our application's behalf. If successfully authenticated then google will give us all the profile information of the user.

Using this information we can do further operation in our application.

Who this course is for:

Anyone who wants to integrate social login with google in their web application

Enable Any Frontend App with Login using Google & SpringBoot

What you'll learn

Explore related topics

Course content

Introduction & Installation Setup3 lectures • 6min

Google Console Setup & Architecture3 lectures • 10min

Working with SpringBoot & Security7 lectures • 17min

Developing Frontend & Integrating with Backend10 lectures • 35min

Requirements

Description

Who this course is for: