This is an example web app which uses your OAuth app for authentication.
Here is a description about the OAuth Web application flow.
- Serve the index.html over http(s)
- Create a new OAuth app
- Deploy an OAuth server
- Adapt index.html
Clone the repository (or alternatively download the ZIP file)
git clone https://github.com/gr2m/github-oauth-login.git
cd github-oauth-login
Start a server in the current folder. For example, if you have python installed, you can just run
python -m SimpleHTTPServer
This will start a server at http://localhost:8000
.
You can create an OAuth app with your account or with a GitHub organization. Give the app a name and a homepage (neither matter). Set the Authorization callback URL to the URL from step 1, e.g. http://localhost:8000
.
You need to deploy a small server which keeps the OAuth app’s secret safe, as it cannot be shared in the browser.
The simplest way to do that is @HenrikJoreteg’s github-secret-keeper. You can deploy it easily to https://glitch.com/. Press on "New Project" on the top right, then press the "Clone from Git Repo" button and paste in https://github.com/HenrikJoreteg/github-secret-keeper.git
After the project is imported, edit the package.json
file and add
"scripts": {
"start": "node server.js"
}
Then create a new file called .env
and enter the following
<client id>=<client secret>
Replace <client id>
with your OAuth app’s clientid, and the same with <client secret>
. At the end it will look something like this
af35402964c3be2ada1c=3a919e462c79397ebf89dbe0338e112d25e94c1c
Finally, edit the index.html
.
Replace const CLIENT_ID = "af3540296c43be2ada1c";
with your app’s client ID. Replace https://henrikjoreteg-github-secret-keeper.glitch.me/:client_id/:code
with your Glitch app’s URL.