Am I understanding OAuth2 correctly and is what I am trying to achieve possible?

Question

I am creating a web application which has three distinct components as far as I understand. A Nuxt frontend, and Spring Boot backend and Google OAuth2 for authentication using OpenID Connect. Nuxt can be extended with Nuxt-Auth which has support for OAuth2. I just need to give it my Google OAuth2 Client ID and two endpoints for getting a token and user information.

My frontend will not be served use server-side rendering. The REST backend will be a datastore to the frontend via secured CRUD endpoints. This is why I would like to use Google's OAuth2.

The main trouble I'm having with implementing this is finding resources about how everything works together. It seems like I've come up with a very niche use case however, it seems very common all over the internet, so I'm not sure what gives.

I've included a sequence diagram of how I understand the system should work.

First the user attempts to login with Google. They are redirected to the Google OAuth consent screen where they agree to their data being used by the application. This redirects the user back to my frontend with a code. (After this happens, I want the user to be able to browse on the webapp normally without having to re-authenticate each time they invoke a new request to the backend.)

I need to take that code and pass it to my backend because that contains my Google OAuth Client Secret which I must use to get a token. The token will enable me to get data about the user such as their name, email and whatever else is permitted by Google's OIDC scope.

Everything past this point is a grey area. I'm not sure what should happen.

Answer 1

I would do it the following way:

... Steps until client sends Token ID to the backend stays the same.

1. Lookup the data on google.
2. Check for that email in the database:

2.1 if user is not yet in the database, create him and return him

2.2 if user with that email is in the database, return him (step 2 is basically getOrCreateUser(googleData))

3. Create JWT token with user data from the database (email, user id, etc.)

4. Send the token to the front end and use it to make requests to your back end.

This way you can have multiple login methods without having to change your user schema. You don't want to store any tokens in the database. You don't even need to store the password (you could still do it later, if you wanted to give the option to user to login with username and password at some point), because you can get user ID (email or whatever else identifies the user) from Google/Facebook/...

This way the user can login with some other OAuth provider (not sure if that is the exact name, but the whole terminology around OAuth is overly complex anyway...) like Facebook and they would still be logged in the same account if the email matches. You would simply have getOrCreateUser(facebookData) which would do the same thing as getOrCreateUser(googleData), but from different data.

You could also map the data beforehand, but I think this is too much of an implementation detail at this point.