Best way to show user their repos and allow them to select one - Node.JS, Express, GitHub

, ,
1

Hi there!
I want a button that says, something like ‘Login With GitHub’, and then the user logs in and can select one of their repos, but I want it all on one ejs page as there is a form that the user is inputting. What would be the best way to do this? I usually use the Passport GitHub strategy, but I don’t think that would be the best way to do it here.

2

Hey @EddiesTech,

I’m not sure about login with GitHub with Passport.js, although without Passport.js gives you little more control. I’ve been reusing the same code that I once used, and I could make a Gist for you with all the necessary code.

It’ll require node-fetch, express-session and GitHub oAuth apps.

If you are willing to dig in to code and in a hurry, I suggest you take a look at routes.js in https://glitch.com/edit/#!/glitchypastepen, although I doubt you would be able to find anything in that mess (of server routes).

It’ll probably take 1 hour for me to create a Gist on mobile…so hang tight! :sweat_smile:

1 Like
3

  1. Once you copy this code, take a moment to read it and understand what the heck is happening.

  2. Create a GitHub oAuth App. Instructions for that at https://github.com/khalby786/GlitchyPastePen#remixing (step 3 to step 7)

  3. Fill in all the details according to your wish, but make sure to set callback URL as https://PROJECTNAME.glitch.me/login/github/callback

  4. You’ll get a client ID and client secret. Paste those values in your .env for

CLIENT_ID=
CLIENT_SECRET=
  1. Now to check if a user is logged in or not in any endpoint, use
if (req.session.loggedin === true) {

To get the username, use req.session.username.

And to get the user’s publicly available GitHub profile data, use req.session.github.

All the session values are available across endpoints in the request parameter.

Also, the endpoint to login is projectname.glitch.me/login/github.

The above code will allow you to edit and read a user’s profile and read public repo information (such as list of repos). Sometimes users might not want you to edit a user’s profile data, so it’s best not to use that scope. You can add or remove scopes in line 58 as the query parameters in the URL to GitHub’s API.

Right now the scope is scope=user%20public_repo which allows you to edit and read a user’s profile and read public repo information. I suggest you use scope=read:user%20public_repo as users might not want you to edit their GitHub profile info. You can read about adding/removing scopes and scopes you can add at https://docs.github.com/en/developers/apps/scopes-for-oauth-apps#available-scopes.

Hope this helps!

1 Like
4

@khalby786
Thanks for all the info! The only problem is that I don’t want the user to loose their progress on the form. E.g. I don’t want them to navigate away from the page and lose everything they typed in. Is there anyway to do this?

1 Like
5

Kind of like PayPal, where it opens up in a new window and the other window waits for you to finish the payment

image
image1600×900 212 KB

6

I don’t think so because all this oAuth code requires different endpoints (especially GET) and some of them needs to be navigated to GitHub’s page.

  1. You can trigger the login link in a new window (like <a href="/login/github" target="_blank">, although I don’t know how you could update the current page with all that data you get after logging in.

  2. You could store the form entries to localStorage, or even better, IndexedDB (@javaarchive :wink:).

3 Likes
7

FYI, it is possible to fetch a list of a user’s public repos without all this mess (you don’t even need a backend). Only disadvantage is that you might get a lower rate-limit per hour than when you are authorised.

1 Like
8

@khalby786
Ooh! Look what I found:

It was created for the exact same reason I need it:

The issue with this is that it requires the app to be reloaded in order to grab a token. This reload complicates your application and may result in lost work due to the app reloading.

I’m still trying to figure it out. It also has an npm package.

1 Like
9

My question is, would it work with EJS?

2 Likes
10

I assuming I can use the no framework example as a guide:
https://github.com/ricokahler/oauth2-popup-flow/tree/master/examples/vanilla

1 Like
11

@khalby786


I keep finding random GitHub stuff for this
1 Like
12

This looks useful too:


They have a passport-facebook example. I’ma try use this
1 Like
13

Nice :sparkles: x3

14

Hi @khalby786! It works! :partying_face:
Only problem is that one of my other passport strategies uses a session and for this one to work, I have to completely disable the session. Is there a way to make the session only apply to one Strategy?

1 Like
15

The answer for that - I do not know. :pleading_face:

1 Like
16

I’ll ask on Reddit. Stay tuned…

1 Like
17
1 Like
18

nvm, fixed it by checking if id was an objectid. If not, don’t seriliazeuser or whatever. It works! However, I added the public repos to scope, but they don’t show up. Where would they be?
Fixed myself using:

fetch(req.user._json.repos_url)
  .then(res => res.json())
    .then(json => res.end(popupTools.popupResponse(json)));

@khalby786

19

Wait, is it fixed or do you need help?

20

Fixed, but I couldn’t add a new post to explain because of 3 post limit, so i had to edit the other :slight_smile:

3 Likes