Sending the token to a separate frontend application from Phoenix api-only app

[ghoshnirmalya]

How are we supposed to send the token to the frontend application since the frontend application will have to open a new window for Google authentication to work properly. So, when we send the token to the frontend from the new window, only the token will be rendered in the window as json.

For example, in my backend application, I ping localhost:4000/api/v1/auth/google to get the token. But when I ping it from my frontend application, which is running on localhost:3000, I get something like the following:

I'm guessing this happens because I'm not requesting it from a new window! But, if I request it from a new window, how will the token be sent to the parent window?

[hassox]

Are you using the code or the token flow from google?

Also can you please show your auth controller (where you have the Ueberauth plug) and your ueberauth config / routes (no secrets please!)

[ghoshnirmalya]

This is the repo (https://github.com/ghoshnirmalya/social_app_api) in which I'm using this library. Link to my auth_controller: https://github.com/ghoshnirmalya/social_app_api/blob/master/web/controllers/auth_controller.ex.

[hassox]

This case statement isn't doing anything: https://github.com/ghoshnirmalya/social_app_api/blob/master/web/controllers/auth_controller.ex#L34 (remember... immutable data!)

I don't think that you're actually getting a signed in connnection (you generate the token but the conn is lost)

Can you explain how you're using the 'fetch' api here?

The usual flow for the code flow would be:

1. request login for google from your server
2. your server redirects your browser to a new window (google)
3. google redirects back to your server (the callback action)
4. You confirm (with the auth struct) and sign into guardian
5. You redirect back to your application

If you're wanting to oauth to an SPA you need to use the token auth (client side oauth). Unfortunately Ueberauth google doesn't yet support this but this PR #35 will bring it in. I haven't had a chance to properly review it yet but will do soon.

[ghoshnirmalya]

I can confirm that I'm getting a signed in connection since if I pass the token sent after signing in, all the other routes work. Whereas, if I don't send the token, the routes doesn't work.

Also, my major problem while handling authentication on the frontend is I don't know which api to ping for the authentication to work. When I ping it from my frontend application, which is running on localhost:3000, I get something like the following:

N.B.
It doesn't open in a new popup. Maybe that's why the errors are coming. But again, I'm unsure how to do that yet! Also, I'm using a SPA in the frontend.

[ghoshnirmalya]

If I use a client-side oauth like react-google-login, it will send me a token after authenticating with Google but I'm unsure how I can validate that token with ueberauth_google.

[ghoshnirmalya]

Currently, this is the way I'm handling logging a user in:

1. I'm pinging Google api using react-google-login
2. It returns me a token if the authentication is successful
3. Then, I'm pinging the ueberauth route in my api app (something like /api/v1/auth/google)
4. I'm encoding a new token and then sending a Guardian token to the frontend application

I'm unsure if this is the correct way to do this.

[rhysldavis]

Hey I'm having this very issue. Has a better solution been found then two separate auth steps?

[gary-menzel]

Exactly the same problem - but with an Ember app (will also need it to work for a React app).

I have a PoC showing Ueberauth can authenticate against Google, Microsoft, Okta, etc with an API based Phoenix backend but the callback stage has to ultimately result in a redirect back to the separately hosted front-end.

[in fact - I based it off the work from @ghoshnirmalya to get the Phoenix part working]

[benonymus]

Hey so there a better solution for this? or could someone explain the second step?
how can i send the token from the client to my auth/google and have ueberauth use it?