There are three or more parts:
- a server-side middleware that handles part of the OAuth 2-step process (this is unavoidable I'm afraid, see explanation below)
- an implementation of a server that runs that middleware and only that middleware that you can instantly host using
now
- a browser-side JavaScript client library that handles logging in with Github and the server
- a Vue component that implements a "Login With Github" button that uses the browser-side client library
If you're building a single page app (like I am) this is a fact - you need a server-side component. This is because you application secret, which proves that the login request is legitimately coming from your application and not a cross-site request attack, must be kept secret from the browser. But fear not! I have an easy solution for you, and it's free!
This is a Vue component you can embed in your application
Node usage:
oauth = require('.')
app.post('/authenticate', oauth({
client_secret:
authorization_url:
})
Browser usage:
<script src="js/GithubLogin.umd.js"></script>
Browserify / Webpack usage:
GithubLogin = require('.')
Rollup usage:
import GithubLogin from '.'
- http://github.com/prose/gatekeeper pretty much what I wanted, except I thought I'd rewrite it without the PHP for fun
- https://github.com/vjeux/GithubLogin http://blog.vjeux.com/2012/javascript/github-oauth-login-browser-side.html I never would have figured out how to do this if not for this article
- https://zeit.co/now which I had been looking for a project to use with, and Github OAuth server struck me as a brilliant use.
NOTE: uses vbuild