Login Route

In notebook:
Building Modern Web Apps
Created at:
2016-01-23
Updated:
2016-01-23
Tags:
React libraries JavaScript
It's important that all the app will be bundled as a static asset, so the app key has to be stored somewhere.

Solution is to run a microservice 

That will manage the secret key

First the login route

1. Add the login route to router

In router.js 
  // **** router.js ****
import ...
// ++++ 4. import qs (see below)
import qs from 'qs'

export default Router.extend({
    ...
    routes: {
        '':'public',
        'repos': 'repos',
        // ++++ 1. add login route
        'login': 'login'
    },
    public () {
        React.render(<PublicPage/>, document.body)
    },
    repos () {
        React.render(<ReposPage/>, document.body)
    },
    // ++++ 2. redirect to Github
    login () {
        // documentation is at
        // developer.github.com/v3/oauth/#web-application-flow
        // get the url and parameters from there
        window.location = 'https://github.com/login/oauth/authorize?' +
        // +++ 3. Add the extra parameters
        // (use qs module to serialise an object)
        qs.stringify({
            client_id: 'clientid_see_below',
            redirect_uri: window.location.origin + '/auth/callback',
            scope: 'user, repo'
        })
    }
})
The ​client_id​ parameter:
Github, facebook etc will give you one when you register. On your profile page (for Github) > settings > Applications > Developers Applications TAB 
Here you can register your application
Here you have a callback URL. For now he uses localhost. In prod you put your address. This is the ​redirect_uri​ parameter above

A this step we're sending Jimmy to the godfaher and he'll get enough information
At first run, the user will be sent to the Github authorisation page where he can authorise the app. On other runs it will remember to user and authorisation.