Clarification on OAuth Flow

[mikeover]

I'm using this with a Rails 5 API and a separate React/Redux app using https://github.com/kylecorbelli/redux-token-auth.

I have it mounted at /api/v1:

   1 │ Rails.application.routes.draw do
   2 │   namespace :api do
   3 │     scope :v1 do
   4 │       mount_devise_token_auth_for 'User', at: 'auth', controllers: { omniauth_callbacks: 'omniauth_callbacks' }
   5 │     end
   6 │   end
   7 │ end

Here's what I have happening right now:

1. In React frontend, user clicks link to sign in with Twitter
2. User gets redirected to /api/v1/auth/twitter (which is handled in the backend Rails app)
3. User gets redirected to twitter.com to login
4. User gets redirected to the callback URL, which is /api/v1/auth/twitter/callback
5. Oauth is successful, user info gets added to users table
6. Then nothing happens. A blank page is shown with the URL still showing the backend Rails app URL with path /api/v1/auth/twitter/callback

What I need is for the user to get back to the React frontend app and be authenticated with the token for the new user that was just created.

What am I doing wrong? Am I wrong to initially redirect to the backend API which handles the oauth flow? I've seen some comments about doing this in a new window but I don't see any documentation on how to do it besides using the jQuery library (which I don't want to do).

Any help appreciated!

[zachfeldman]

Hey @mikeover , it's been noted in several other issues that this gem doesn't play nice with Rails 5 API and Omniauth....you probably need regular ol' Rails 5. I'm thinking that the view that has JavaScript to close the oauth window and go back to your original window isn't loading though. Please search the issue queue for more info

[mikeover]

I've pretty much read every open and closed issue twice. If you have an idea of why it doesn't work with Rails 5 API and Omniauth, I'd be happy to look into it and try to submit a PR. Just need some initial suggestions on where to start.

[zachfeldman]

Have you tried looking at the view that omniauth uses for the, "login window" that isn't closing?

[mikeover]

That's not the issue I'm most concerned with. What I need is for the token that gets created for the new user to make it back to the frontend React app. It just goes one direction now from React -> backend -> twitter.com -> backend. It needs to go full circle back to React with the new token.

[zachfeldman]

Yup, and that backend to frontend connection at the end usually happens on that page.

Twitter.com returns to your backend, which returns this view that I'm talking about which has Javascript to close the window and send the token back to your application.

Something like this:
https://github.com/omniauth/omniauth/blob/ef7f7c2349e5cc2da5eda8ab1b1308a46685a5f5/lib/omniauth/strategy.rb#L461

[mikeover]

Is that different than just doing a redirect from within omniauth_callbacks_controller.rb?

[zachfeldman]

I'm just trying to explain how that last step is done. I'd recommend doing a bit more research on how the window is closed.

[mikeover]

That's fine, but again I'm less concerned with closing the window (I can just do it in the same window if it's causing a problem) as I am with figuring out how the React front end will get access to the token for the user.

[zachfeldman]

Yup, and what I'm trying to say is, I'm pretty sure around the time the window is closed, other JavaScript code is sending that token back. Just a theory though. Good luck!

[mikeover]

@zachfeldman One more question if you don't mind. I'm overriding omniauth_callbacks_controller and if, in there, I redirect back to the URL of the front end app and pass the tokens as query parameters, could I theoretically use those and then call the verify_credentials endpoint with them?

In omniauth_access there's a @auth_params. If I pass this along to my frontend, is that enough info to auth the user? Any idea if this would work and what it might look like?

Something like within omniauth_success:

redirect_to "http://localhost:3002/auth/twitter/callback?#{CGI.unescape(@auth_params.to_query)}"

[zachfeldman]

Hey, that sounds like it might work! You should try it

[alea12]

@mikeover Sorry to ping you from such an old issue. I've tried your snippet, and it seems to work in my environment, too.
I'm also using Rails API mode alongside OmniAuth. Have you solved this issue with this approach?
To be clear, was localhost:3002 the frontend, and you've stored the auth params to localStorage or whatever?

[mikeover]

@alea12 I'm no longer working on this project and haven't been for a few years, but I believe this worked for me to the best of my recollection. localhost:3002 was my React SPA, yes, and then I pulled the auth params from the query string and stored them locally (probably localStorage).

[alea12]

@mikeover Thank you for your remarks!