How to handle an External OAuth2 auth with Spring Boot + Angular

You need to give your frontend code some OAuth love. E.g this is a good library (I use it), but YMMW.

Now, the long answer:

OAuth spec defines several different "flows", and the one commonly used for client-side applications is the implicit flow. What that means is, if you wanna go vanilla, implement this yourself, you need to do something like this:

1. On page load: check for the URL state. If a token & data are found, store them in sessionStorage.
2. If no token in the URL, check for sessionStorage for tokens.
3. Every HTTP request to your backend, you append the accessToken in the headers.
4. For log in/log out, you need to redirect the user to OAuth server with a specifically crafted URL and params.

Now the longer answer:

1. On page load, check if you have some state in, say, sessionStorage. Like, a saved accessToken or something like that. (Not exactly, but read on).
2. If yes, you may want to validate this token at the OAuth server (sometimes you'd also save the expiration timestamp in storage, you can check that one too).
3. On any Http request to backend, you append this token (accessToken or sometimes id_token, or it may be a jwt, bearer, whatever, let's just say token) to the headers of every request. Usually it's something like a Authentication header, with the value Bearer ${ token }.
   • Backend can now check this token, and if valid, return your data, if invalid or missing, it returns 401. (It can also do a redirect to the auth server, but please don't do that).
4. If there is no token on page load, you might indicate this to the user. Like, ask them to log in.
5. This login button would redirect the user to OAuth login page. They go away from your page. It's a specially crafted URL, giving your app data, like http://server/auth/your-app-name?clientId=your-client-id&redirectUrl=http://your-angular-page/where-you-wanna-land. How exactly this looks like, depends from server to server, implementation to implementation.
   • Now the user landed on their login page, gives his username/password/permissions etc (or if they're already logged in there, mgiht redirect back right away). After they log in and give your app permission, the auth server redirects the user back.
6. Now you're back at step 1. But instead of checking for sessionStorage, you first want to check the URL. Because the url will look like: http://your-angular-page/your-route?accessToken=<some_token>&... and other similar things. Now you read the accessToken and store it locally and you're done.