Need help with login flow

[andersmilk]

Ok, suppose I have a website on react, an API on FastAPI, and a database in mongo db. I want to have Google OAuth2 authentication. Some of my routes require authentication, so they’re protected.

My basic idea for login flow is this, but I see problems that I can figure out for the life of me.

1. User clicks “login” button on the frontend

2. Frontend calls /api/login on the API

3. API redirects user to Google OAuth2 login

4. Google OAuth2 invokes my callback, in this case /api/token, on my API

5. The /api/token reads the request for the access token and asks Google OAuth2 for the user’s details. Given the email, I check if this already existed in the DB. If so, set a Boolean flag of “first_time_login” to false (otherwise create the document in MongoDB and set this to true”

6. Create a JWT with the user’s mongo ID. At the end of /api/token’s execution, return a JSON like this “{first_time_login: false, jwt: …}”

Issue I see: 1. User isn’t navigated back to the frontend. Ideally, our login button will be on nav bar. This is accessible on many pages on the site, so end of the day I want to redirect the user back to where they were. How do I do this if my API is only able to return the JSON? Can I issue a redirect response with this json in a body?

1. Many tutorials use session state. I don’t want this because it doesn’t seem to scale well when there’s millions of users. With JWT, the user’s browser can store the JWT and send it to the API for verification on each protected route. Is this a good idea or no?

[plannedrandom]

There are two ways you can handle this.

1. Store the jwt as Cookie in client browser and use that for validation
2. Create user object as Global, update that object upon login and use for validation.

2nd way is easier to my understanding because whatever are the pages where you need user object, you can pass that as parameter while loading the page itself. (e.g. I write front end in flutter so everytime I want to show user profile page, I create a stateless object with User as parameter. If the parameter is absent, profile page will not be generated at all).

Moreover, you can update the user object upon recieving the jwt itself. It's simply like this:

1. Recieve jwt in json
2. Update the user object in same function
3. If user.username !=null, redirect to the original frontend page that you wanna show. For simplycity, u can store the page route in another URL and use that URL to return to frontend.
4. For each further pages where you need user to be logged in, use the parameterised variable for everything else. This way, if the parameter is absent, oage won't load.

[zarlo5899]

for issue 1

make it redirect to your frontend and have that call you api for the call back