Google OAuth2 authentication with Spring Boot and Angular 2 CLI

Question

I need to integrate social login to my webapplication. I use Spring Boot for my backend and Angular 2 as frontend technology. I followed this tutorial for setting up my project.

This works perfectly and Spring Boot is running on http:/localhost:8080 and Angular 2 on http:/localhost:4200. The reason for this, is that I use the Angular-cli for the live reload development server functionalities.

Because of Cross Origin policies the angular project needs to use a proxy. As mentioned in the previous tutorial you need to configure a proxy.conf.json file:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

If you do this you can acces the Spring API as followed: http:/localhost:4200/api/users for example (every '/api' request will be forwarded to the Spring server).

All the above things are working perfectly. Now I need to use Oauth2 with google login. I tried many tutorials like this one but i can't seem to manage to work this out.

If i try to implement this and navigate to http:/localhost:8080 (from Spring Boot address) i get redirected to the google login page, however when try the same thing, for example http:/localhost:4200/api/authenticate i just always redirect to http:/localhost:4200/login immediatly without redirecting me to the login page.

I looked evrywhere online but can't seem to find this particular problem. Can anybody help me to understand or what i'm doing wrong, maybe someone has example code that would be great!

Answer 1

I found a solution to my problem. First i had a login link with 'href=/api/authenticate' but this did NOT work!

NOTE: @EnableOAuth2Sso standard secures every path on the server so you just need to acces the API on a path that is secured to be redirected to the login page

For some reason http:/4200/api/authenticate did nothing but redirect me immediatly to http:/4200/login (I guess this must be standard behavior of @EnableOAuth2Sso if the authentication failed or if you were not authenticated?)

So I changed my href to 'href=http:/localhost:8080/api/authenticate'. This works perfectly and redirected me to the google login page.

Another problem i faced was the redirect url. I tried setting the redirect url straight to 'http:/localhost:4200/profile, to navigate after loging in to the users profile, but for some wierd reason again this did not work.

After some testing i figured out you NEED TO redirect first back to you api domain (no idea why).

So i set the the redirect url to http:/localhost:8080/callback where i then redirected to the profile page on port 4200.

@GetMapping("/callback")
void redirect(HttpServletResponse response) throws IOException {
    response.sendRedirect("http://localhost:4200/profile");
}

After searching and testing for way to long, i feel this was not documented anywhere.