feature/add github signin function

[carmenkolohe]

• add firebaseui github signin btn
• github signin popup button functioning

Description

Using the firebaseui, I created a Sign in with GitHub button. This should use the built-in firebase GitHub authentication. Also, I added for the GitHub sign in to be a popup but, this can be easily removed and the default would be a redirect to GitHub sign in. It SEEMS to be functioning to some degree. My only concern is that I am not certain if it really is doing what I am telling it to be doing 😅. I don't have experience with the Auth emulators that are being implemented for this project. If anyone could please provide some more details about the Auth emulators or how I can bypass them to test this functionality with more confidence I would appreciate it!

Related Tickets and Documents

#309

What gif best describes this PR or how it makes you feel? (optional)

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @drewclem on Vercel.

@drewclem first needs to authorize it.

[carmenkolohe]

Fantastic news everyone! I was able to turn off the auth emulator and test the GitHub log-in! I can now say with confidence this functions correctly. 🥳

It will redirect with a popup to sign-in with GitHub and once you have chosen your account to authorize it will send you back to the app.

In order to test this, you must turn off the auth emulator in both firebase.json "auth": { "port": 9099 }, and utils/db/index.js auth.useEmulator('http://localhost:9099/') . You must also enable GitHub in your firebase authentication section and get the client id and secret from the GitHub OAuth Apps.

(If the auth emulator is on, it will generate fake GitHub log-in credentials and log you in. Hence why I was not 100% this was working, I knew it was logging me in but, I didn't trust it because I didn't see the proper redirect/popup GitHub sign-in.)

I will attach below instructions, documentation links and screenshots on how to get this working remotely and what is needed to be done for production.

Should I also create a new PR and add this to the README?

[carmenkolohe]

You can follow along to the instructions for the FirebaseUI

TL;DR

1. npm install firebaseui to install the firebaseui dependencies
2. In your Firebase console, go to Authentication section and enable GitHub
   
3. To get the Client Id and Client Secret go to your GitHub Settings

• You can follow along to the instructions Firebase offers Authenticate Using GitHub
  Or
• Go to your GitHub and go to Settings > Developer settings > OAuth Apps > New OAuth App
• The callback URL will be provided to you in the Firebase GitHub Authentication below where you input the Client ID and Client Secret (e.g. my-app-12345.firebaseapp.com/__/auth/handler)
  
• Register/Save it!

4. Disable the auth emulator. For testing purposes, (to see it in action!) please delete "auth": { "port": 9099 }, in firebase.json and comment out auth.useEmulator('http://localhost:9099/') in utils/db/index.js
5. Start up the project and try logging in! It should all work now!

If you do not disable the auth emulator, it will look like this. You can add a new account and it will auto-generate user information and sign you in.

If you do disable it, it will pop you over to the GitHub sign in and you can input your GitHub information, have you do the two factor authentication and then close that window and redirect you back to the Protege site all logged in!

If you do not enable GitHub in your Firebase Authentication settings this will show up when you click the sign in with GitHub button.

Please let me know if you have any issues or questions.

[clandau]

I'm curious as to the advantage of using firebaseui over attaching Firebase's Github signin method to the existing button? (hope that makes sense 🙂)

[carmenkolohe]

@clandau ya totally makes sense, but please let me know if I misunderstood!

FirebaseUI is a library built on top of the Firebase Authentication SDK that provides drop-in UI flows for use in your app. It is super easy to add multiple providers if we wanted to add twitter, google, etc.. without having to write multiple functions and button components it would be a quick addition into the

signInOptions: [ { provider: firebase.auth.GithubAuthProvider.PROVIDER_ID, signInMethod: firebase.auth.GithubAuthProvider.PROVIDER_ID, }, ],

I also, have just personally worked with the firebaseui and enjoyed the clean and reliable sign-in methods. And, I figured, since we are already using firebase why not? But, I am open to either option.

There are other benefits if you'd like to read more FirebaseUI Docs

If it is the button in particular that you would like to keep, I think there should be a way to customize the button that is the default for firebaseUI. I can look into that some more.

I hope I understood and answered your question! Let me know what you think.

[drewclem]

This looks fantastic @carmenkolohe! What would the UX flow be if went the route @clandau mentioned and just attach the GitHub sign in to our button?

If we can get control of firebaseui and tweak it to match our design system, then I'm all for it. I think there's too much contrast between it and our design system though.

It feels seamless from the speed and integration side, so let's go the extra step and match that with the visuals as well.

Also, sorry for the delay in reviewing this. The code looks solid!

[clandau]

not sure if @nickytonline is planning on continuing to pair with you on this, but I can certainly pair to help out if not. Looks like most of the work is done, just need to move some stuff around.

[carmenkolohe]

@drewclem no worries totally understand and will do my best to have it match your design system.

@clandau I would love to pair with you and work on this. Thank you for being open to work on this with me. Please let me know when you are available and the best way to reach you.

[clandau]

@drewclem no worries totally understand and will do my best to have it match your design system.

@clandau I would love to pair with you and work on this. Thank you for being open to work on this with me. Please let me know when you are available and the best way to reach you.

Great! Except I'm starting a new job right now, and not sure what my availability will be just yet. What days/times are good for you? What's your time zone? I could maybe do a weeknight after 6:30pm eastern this week.

[clandau]

@drewclem no worries totally understand and will do my best to have it match your design system.

@clandau I would love to pair with you and work on this. Thank you for being open to work on this with me. Please let me know when you are available and the best way to reach you.

forgot to add my email, feel free to reach me here: [email protected]

[carmenkolohe]

@clandau I sent you an email. Looking forward to collaborating!