Google OAuth Login Application Using Java Spring Boot and ReactJS in Less Than 15 Minutes

By the end of this video you will know how to setup Google OAuth login for an application and a general idea of the source code used to create this Spring Boot with React App.

Setting up Gmail Login

Source Code:

Docker, MongoDB, and Java Spring Data Quick Start

Quickstart Docker, PostgreSQL, and DBeaver:

MongoDB Docker Image:

Spring Data MongoDB Documentation:

Docker Installation

Windows Installation and Hyper-V (Virtualization) Details

#react #java #oauth

[farawayskies]

There's actually an incredible amount of information to digest here. Pretty sure most the courses that build this sort of application are 3+ hours long. I would pay to watch you build this application from scratch and talk about every line of code. As I learn Spring Boot, one of the biggest things I don't understand when looking at other people's projects is what lines of code were required per some documentation, and what lines of code were written by the developer to implement a feature from scratch. I feel very overwhelmed and all I'm trying to do is provide an OAuth2 login to my back-end and start gaining access to user data on front-end react site. You've done a whole lot of that process in this video, but I'd rather not just copy/paste code...I need to understand what I'm looking at.

[ignaciobriones]

Man, thank you, I was feeling so bad, cuz I couldn't understand how connect the both sides, and I was watching a lot of videos too long, and I felt so frustrated, however with this video you help me a lot, thank you a lot dude, cheers From Chile (South america)

[glaze]

In case you just have arrived here as spring boot oauth2 docs say, the redirect uri has changed to /login/oauth2/code/{your provider here} in this case the redirect uri is /login/oauth2/code/google

[Nioxs]

Why do you have a full setup spring boot project, after 5 minutes without showing what you added or did there... (" in Less Than 15 Minutes" - you basically did everything before you started the "tutorial"...)

[FernandoRibeiro-vlud]

Hi Ryan. I would like to thank you for your video and project template. With a bit of debugging and reading other sites explaining spring security oauth2 flow I was able to implement my own Oauth2 stateless login using my company oauth2 provider. I spent about 5 days learning and testing but it all went well! Maybe next time you can try going through each step of the oauth login flow debugging so we can have a better understanding of what it's going on. Regards.

[CuongLeChannel]

thank you for the video. i'm currently also build a reactjs and spring boot app for authen, but still stuck on oauth2 google sign in (CORS issue when backend redirect google sign in to frontend). Gonna take time to read your code.

[croydonH]

Nice. I will try this, but I know I need to tweak this as I am embedding react inside boot

[dandendrasingh]

Thanks for video just if fonts was bigger then it was good to follow on mobile as well.

[bluex]

Thanks a lot! This looks like what I've been really trying to implement for my portfolio project s so I can start applying soon.. I have 1 doubt if you have time:

1. How on earth does sending an HTTP request to the "GOOGLE_AUTH_URL" (which is actually context root of Spring backend / login URL of Gmail's OAuth2 Authorization server) become a URL that is accessible via the frontend? In other words, the redirection by default happens on the Spring Boot backend, I don't see how the redirection done via the Oauth2 Client dependency on backend directs the frontend React app to said URL, because the front and backend apps are different applications possibly under different domains even, so a redirect on the backend is not visible to the frontend?


2. Similarly, for the "redirect_uri", I have pretty much the same confusion. The redirect happens on the Spring Boot backend but yet the frontend React app is different application

[kushalappaca]

How do i hit an API from react application? Its giving me 302 found error. Something related to redirect URL.

[longtruongngoc]

Hi, I ran your code using my own Google API account, but the URIs is exactly the same. However, after I logged in with a Google account, it did not redirect back to the page, and caused a "Timed out after 30000 ms ..." alert. Can you kindly check your code if it is still working? Many thanks!

[hugofernandez]

Honestly I'm not sure why you're generating the jwt tokens by youself, shouldn't this be taken care by the Authorization server?

[mdmahmudhasan]

Thank you. How can we use API server for mobile apps? In-app webview is not working

[David-wfcc]

I've created this exactly as in the github, and configured the uri urls in google, but for some reason I get unauthorized redirect uri error, any idea why this might be?

[howang]

Hi, may I ask in the application.yml, where do you store the value of {baseUrl} and {registrationId}? why don't you need a dollar sign in front like "${variableHere}" ? Thank you for this great tutorial.

[xuaniennguyen]

Thanks for your video.Can I use this tutorial to do the same with Facebook, Github, ... login?

[dlysele]

Hi, is there a method where a JWT token would be able to call for a CSRF token within Java? Or would just JWT authentication be sufficient?

[shaunpx]

You have a video that shows a SSO springboot react front end and postgress db and how to deploy the app from github

[noobhah]

Maybe I'm too late to the party but I'm trying to implement this exact thing but I just don't understand how to validade the authentication from the frontend. I already have a spring boot app with jwt authentication. oauth2 implementation would be simple if I wanted to use the spring boot app as frontend, which is not the case. I want to have a react server just like your example. I managed to implement most of the things but now when I login with oauth2, right after logging, it redirects me to the as expected but there is no token? I'm confused, is oauth2 suposed to generate a jwt?

[christopherreif]

Just curious, what is the typical redirect uri, and is it universal to all oauth2 services?