GitHub login for static websites hosted on GitHub pages

[gr2m]

🎯⛳ The goal

We have ideas for several simple web applications that will work directly against the GitHub API. The goal is to hide away complex workflows like sending a pull request to publish a blog post from editorial contributors, and instead create a web application that shows a nice web form instead. Basically the overarching goal is to make our community more accessible to contributors of design, documentation and editorial work (and more!) but still taking advantage of the tooling that GitHub provides us today :)

🐶 ❓ The Motivation

In order to do anything on GitHub one has to be authenticated. On github.com you do that by signing in, a 3rd party application can use OAuth for that. Our friend Henrik created a ready-to-use application for exactly that purpose: https://github.com/HenrikJoreteg/github-secret-keeper

Once we have the login figured out on the example of a small app, others can use it as a template and create super useful applications with only HTML, CSS and JavaScript.

💡💥 The example app

To keep things as simple as possible, the app would only show a single button "sign in with GitHub". When you press the button, you get redirected to GitHub where you get asked to give this app access to your profile. When you get redirected, a token gets passed that you can store in local store and use for authentication from then one. Using that token, load the current users Profile data, show their Avatar, name and say something nice :) Add a sign out button that will simple delete the token and show the long button again

👩‍🏫🙋‍♂️ What you will need to know

You should understand Node.js and now how to setup a node.js application locally as well as how to deploy it to now.

You also need to have some basic understanding of GitHub’s OAuth flow as well as GitHub’s API in order to load the user’s profile.

📋 Step by Step

• 🙋 Claim this issue: @dristybutola and @May-8, supported by @gr2m

• 👌 Accept our invitation to this repository. Once accepted, assign yourself to this repository

• 👓 Please review our Code of Conduct
  This is important to us, please read it carefully 😊

• Register a new OAuth application. In "Homepage URL" and "Authorization callback URL", enter "http://localhost:9080. Note the Client ID and Client Secret

• Clone HenrikJoreteg/github-secret-keeper and set it up locally. Create the env.json file as instructed in the readme and start the server with npm start

• create a new folder (outside of another git repository) for your test app, e.g. in your home directory

  ```
  cd ~
  mkdir hoodie-welcome
  cd hoodie-welcome
  ```
  

• In your test folder, create an index.html file with a link ("Login with GitHub) to GitHub’s authorize URL (it looks like this: https://github.com/login/oauth/authorize?client_id=<your app’s client code here>) and a button "load profile"

• Install static-server with npm install --global static-server and run it in the current folder. It should show you your index.html file. Press the "Login with GitHub" button. You have to authorize the app, then you get redirected to a URL that looks something like this: http://localhost:9080/?code=1234567890abcdef

• Add an event listener to the "load profile" button. When you click it, get the access token via the github-secret-keeper (e.g. fetch('http://localhost:5000/{your app id}/{code from URL above}')). Use the access token to load your profile information, See GitHub’s Get authenticated user API

• from the response, show the user’s name and avatar

That’s most of it :) Once you have the basic setup, you can save the token with localStorage so it persists page reloades. You can check that way if a user is signed in or not. After login (or if user is already signed in), hide the login button and directly load the user profile instead and render it nicely on the page using some CSS.

Now create a repository (on your own account, we can move it later) for the hoodie-welcome app you created locally and push it’s code to github. Make sure that you did not commit any tokens or app secrets to the source code :) Go to your GitHub repository’s setting and set GitHub Pages Source to master. If you open https://<your github username.github.io/hoodie-welcome, you should now see your app. Copy that URL.

Once we have that, Register another OAuth application, this will be the one that we will use online for everyone. Call it "Hoodie Welcome" and enter the URL from above into the website and callback URLs. Wwrite down the client ID and secert. Then deploy the github-secret-keeper to now and pass in the client ID and secret using environment variables. Alias the now subdomain to something like hoodie-welcome.now.sh.

In your hoodie-welcome app, update the "login with GitHub" url to use the URL you deployed to at now.

I think that’s it :) Enjoy!

🤔❓ Questions

Ping us in the Hoodie Chat or on Twitter

[dristibutola]

@gr2m I think the local host should be http://localhost:4200 as per the readme file

[gr2m]

http://localhost:9080 is the default of static-server so I’d suggest to set this. We can change things later. This is independent of the hoodie.camp app

[dristibutola]

So now its sorted , i understood!!

[gr2m]

yes that looks good 👍

[gr2m]

are you done with it? Can you upload your code somewhere?

[dristibutola]

Yeah almost there , I have pushed my code here https://github.com/dristybutola/hoodie-welcome

[dristibutola]

Right now I am caught up with my exams , would follow up by the end of week:)

[gr2m]

good luck with your exams :) Let me know when you are ready, happy to review then!

[dristibutola]

Thanks a lot !!
Although I think the code, https://github.com/dristybutola/hoodie-welcome
is almost done, but I need to test it properly on my machine as we have 2 different code
versions.Will update soon.

[dristibutola]

I think the code is ready for review, The repository link is --
https://github.com/dristybutola/hoodie-welcome
Also we are suppose to load just the user data at '' https://api.github.com/user?access_token=...''
on Load Profile click event?

[gr2m]

@dristybutola could you add instructions and a "How it works" section to the repository’s README.md?

[dristibutola]

Ofcourse, I am on it.What exactly am I supposed to write in instructions should I write all starting from
making a local clone of github-secret keeper too?