React/Redux + Soundcloud API

Question

UPDATE

See the working example here: Favesound-Redux

Tutorial: http://www.robinwieruch.de/the-soundcloud-client-in-react-redux

Question

Recently I discovered and got inspired by Sound Redux which shows how to use the Soundcloud API within a React + Redux app. The Soundcloud API requires you to setup a callback.html page. The Sound Redux app solves this by serving the callback.html from a Go Lang Server. I don't want to use any server side technology for this. Thats why I was wondering if it is possible to serve the callback.html as a react component. My setup already pops up the authentication modal for Soundcloud, but after entering my credentials nothing happens and the modal gets blank.

In my root component I setup the route for the Callback component and my app component.

const routes = <Route component={App}>
  <Route path="/callback" component={Callback} />
  <Route path="/app" component={SoundContainer} />
</Route>;

ReactDOM.render(
  <Provider store={store}>
     <Router>{routes}</Router>
  </Provider>,
  document.getElementById('app')
);

When I fire the authentication request action from within my SoundContainer, the action creator looks like the following:

export function auth() {
  return dispatch => {
    SC.initialize({
      client_id: MY_CLIENT_ID,
      redirect_uri:`${window.location.protocol}//${window.location.host}/#/callback`
    });

    SC.connect(function (response) {
      console.log('connect'); // This does not appear in the console
      SC.get('/me', function(data) {
        console.log(data);
        dispatch(doAuth(data));
      })
    });
  }
}

Like I said, after entering my credentials in the modal the modal gets blank and nothing happens.

When I output ${window.location.protocol}//${window.location.host}/#/callback it is the same as my Redirect Uri in my Soundcloud Account: http://localhost:8080/#/callback

My Callback component looks like this:

export default React.createClass({
  render: function() {
    return <html>
      <head>
        <title>Callback</title>
      </head>
      <body onload="window.setTimeout(opener.SC.connectCallback, 1);">
        <p>
          This page should close soon
        </p>
      </body>
    </html>
  }
});

hazardous · Accepted Answer · 2016-01-09T03:24:04.373

Firstly, neat idea.

As your are using hashes, the callback would only be a fragment, not a complete page. The callback code shouldn't have <html> in it. Could you try this instead?

export default React.createClass({
  componentDidMount:function(){
    window.setTimeout(opener.SC.connectCallback, 1);
  },
  render: function() {
    return (
      <div>
          <p>
            This page should close soon
          </p>
      </div>
    );
  }
});

UPDATES

OK, so oAuth2 doesn't like fragments in return callback urls, probably that's why the code isn't working. However you can have your express server serve the spa back on the callback route. This technique is documented in detail in react-router createBrowserHistory docs. So the callback URL will serve your spa page and the login will complete.

Unfortunately it still doesn't work. I can login in the modal, but then it gets blank and no request is send :( — Robin Wieruch, Jan 04 '16 at 21:32
Could you put this up somewhere? At this point it's hard to guess without some debugging... — hazardous, Jan 05 '16 at 02:36

score 1 · Answer 2 · answered Jan 07 '16 at 14:57

1

Yeah, I initially tried to do the same thing. I'm fairly certain that it has to do with the hash. Perhaps it has to do with the source and callback page being essentially the same url (if you ignore hashes). After tearing my hair out for a good hour or so, trying to get it to work, i just gave up and served /callback on the server side :)

answered Jan 07 '16 at 14:57

Andrew Nguyen

59
3

Hmm, did you try with the non-hash history? That should be doable with react-router and will not need hash to work. – hazardous Jan 08 '16 at 11:24

React/Redux + Soundcloud API

2 Answers2