OAuth authentication with callback URL and SPA that posts on users' behalf

[Mrskoje]

Hi,

First of all, it might be that I didn’t properly understand something, but I spent already a few hours trying to figure out everything there is to this.

There’s a Single Page Application I am currently working on for a client. It’s built on Angular 4 (now 5), but it could be anything else … React.js of Vue.js for example, since the problem I am having is generally tied to SPA principles.

As I already found out, if my app wants to post on Twitter, on users’ behalf, it has to be done from the app’s backend. Basically, the OAuth authentication also has to be done from the server, because I must keep Client secrets on the server.

1. When Users selects a Twitter channel from the app, the fronted part of my app is going to make a request to its backend, which in turn is going to craft a URL with a client secret, a request token and a callback URL, and send them back as a resposnse to the frontend part of my app.
2. My app (frontend part) now sends the request to Twitter app, in a modal window, to ask a User to click on “Authorize this app to read and write” button.
3. Now, If I understand clearly this part, the Twitter is now going to send access tokens to a Callback URL that my app provided and I won’t have any notification if it’s done and when it’s done (unless I poll my backend and see if did process those tokens while listending for them on that Callback URL). Is there any other way it should be done? Could I tell Twitter API somehow that it shouldn’t send access tokens to the Callback URL, but instead to send them back to the Frontend App that made the request? Or could I intercept them somehow?

Again, I wanted to ask for all of this upfront. It might be that I didn’t understand clearly what happens at the 3rd step that I described, but I couldn’t find enough of information and I didn’t want to run in developing all of that if I had to rewrite everything in case that I neglected something.

Thanks!

[Mrskoje]

Bump?

I came back to this, because I have to make it work now.
How come everyone got at least some response for questions in this community except me? I feel rejected

Ok, maybe I wasn’t clear enough.

I have a web app, which has to obtain access rights at one step, before the User can continue further.

At one point, my app requests Facebook and Linkedin authorizations and the User authorizes them. During that time, there’s a spinning circle indicating the progress. Everything happens in small popups and everything is processed in async callbacks. Thus, my app knows when it’s all finished and can continue to the next route (notice it’s a SPA).

Regarding the Twitter OAuth, there’s a little catch.
The callback url.
For example, in Android/iOS apps, you can provide scheme://host as a callback URL, and the Twitter OAuth API will call back an app with oauth_verifer ( scheme://host?oauth_token=1xx&oauth_verifer=1234 ). Android/iOS apps can then catch it and make another request to obtain the access_token. The whole time, there’s a chain of callbacks going on.

In the case of web apps, I cannot provide such things as the scheme:://host callback URL. I can only provide a real URL which may or may not process the oauth_verifier right away. What happens next is that my app has to listen if the popup window is closed, and then check the database if there’s a valid access_token stored for my User, or simply poll the database during the whole process and checking everytime if there’s a freshly generated access_token.

Here, I found that one guy is actually doing the same thing - http://clarkdave.net/2012/10/2012-10-30-twitter-oauth-authorisation-in-a-popup/ - He polls the popup window in a setInterval and checks if it’s closed or not. Later he also polls his own backend and checks if the database has a record of a valid access_token for a user.

Is this the only way of doing it in a modern web SPA? Anyone?