handle oauth in front end

[wkyltlab]

Hi everyone :)

I followed the guide in Oauth2.
and everything is working great. but how would I capture the jwt returned from google sign in in the front-end?

thanks

[frankie567]

Hi @wkyltlab!

This part is up-to-you to determine and implement :) After a successful OAuth2 authentication, you'll have the token available in the oauth_accounts table. You can easily retrieve it given a user.

My suggestion is to keep it the OAuth token safe on the backend side and implement API routes in your application that will do what you need: call the relevant Google API, process the information and return it in your response.

[lfaggianellitt]

Same issue here @frankie567 @wkyltlab did you find a nice flow to solve it?

[mo-cmyk]

How did you guys solve this ?

[rosethorn999]

It's my approach and works for me. I'm not sure it answer your question.

1. I set the callback url (google console) to front-end 127.0.0.1:4000/oauth
2. front-end send a request to back-end 127.0.0.1:8000/auth/authorize to get oauth page url
3. redirect page to google oauth page url(step2) to in front-end
4. user login in
5. google redirect url to 127.0.0.1:4000/oauth (step1)
6. front-end send a request (with querystrings from url given by google) to back-end 127.0.0.1:8000/auth/callback.
7. get access_token and token_type in front-end

In the end, I can get token in front-end. After that. the following steps are similar to traditional account/password login.

[jd-solanki]

@rosethorn999 Thanks for the process. How can you get the user data along with token when you make req to /auth/callback?

[rosethorn999]

@jd-solanki No, I just do another request since I had the access_token in step 7. So that I can call /users/me to get user.
You can see my steps in my practice:

btw, I suppose there is a way to inject/modify /auth/callback function to retrieve user. But I just don't want to mix it up.

[diegocgaona]

@wkyltlab and @frankie567 in my case I have some doubts how to handle the front/back flow too.
I want to make the auth on the back and only return the access_token (like the example response in the @frankie567 above) to the front.

I want to put a button in the front which would go to the back (in an endpoint like /front-oauth for example), in the back the user will be redirected (open a new tab I think) to the authorization_url received from /auth/google/authorize, will make the login with Google, then it would give the response back to /front-oauth with the access_token.

What I'm struggling is:
If I call from my front the GET /authorize, I will receive the authorization_url, but then if I go to the url by the front, is a Google url, which will answer to my GET /callback in the back (and save to the DB), and my front will not receive the access_token.

It is possible to create an endpoint or modify the GET /authorize, to in the back redirect to the authorization_url,, the it will call the GET /callback, record the data to the DB, and then return the response to the GET /authorize (or the endpoint called in first place by the front) so the front will receive the access_token and token_type`?

Thanks in advance