Auth-Callback Route

In notebook:
Building Modern Web Apps
Created at:
2016-01-23
Updated:
2016-06-12
Tags:
React libraries JavaScript
Now we have to create a route for the auth callback in router.js 
  // **** router.js ****
import ...


export default Router.extend({
    ...
    routes: {
        '':'public',
        'repos': 'repos',
        'login': 'login',
        // ++++ 1. add login route
        // we can add dynamic routes
        // we extract only the query string
        // from the url
        // we set 'auth/callback' for the 
        // redirect uri previously
        'auth/callback?:query': 'authCallback'
    },
    public () { ... },
    repos () { ... },

    login () {
        window.location = 'https://github.com/login/oauth/authorize?' + qs.stringify({
            client_id: 'see_previous_note',
            redirect_uri: window.location.origin + '/auth/callback',
            scope: 'user, repo'
        })
    },
    
    // ++++ 2. Define the route handler
    authCallback (query) {
        query = qs.parse(query)
        console.log(query);
    }
    
})
At this point we have the authorisation code from the user, but we still have to give the app id (​client_secret​). We should not give this to the browser (as static asset).
For this we need a little microservice that would pass the app secret id.

He proposes to use the gatekeeper service
github.com/prose/gatekeeper
It gives you a deploy to Heroku button, to add it to your heroku apps.
It's a very simple nodejs server
It exposes a single route. We pass it our app secret and client authorisation code as a GET request, it will post it to github, and give us back the authorisation token.
Again "no magic"...

Do an ajax request to our gatekeeper service

  // **** router.js ****
import ...
// ++++ 1. add an XHR module
// follows the same pattern as
// 'request' on nodejs
import xhr from 'xhr'

export default Router.extend({
    ...
    routes: { ...  },
    public () { ... },
    repos () { ... },

    login () { ... },
    
    
    authCallback (query) {
        query = qs.parse(query)
        console.log(query);
        // ++++ 2. do the ajax request for the token
        xhr({
            url: 'https://the-heroku-labelr-service-url' + query.code,
            json: true
        }, (err, req, body) => {
            console.log(body)
        })
    }
    
})
Then in he console we get he authorisation token from github.Talks more about the Heroku setup...