Open carmenkolohe opened 3 years ago
Someone is attempting to deploy a commit to a Personal Account owned by @drewclem on Vercel.
@drewclem first needs to authorize it.
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?
You can follow along to the instructions for the FirebaseUI
TL;DR
npm install firebaseui
to install the firebaseui dependencies(e.g. my-app-12345.firebaseapp.com/__/auth/handler)
"auth": { "port": 9099 },
in firebase.json and comment out auth.useEmulator('http://localhost:9099/')
in utils/db/index.js 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.
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 🙂)
@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.
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!
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.
@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.
@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.
@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: celandau@gmail.com
@clandau I sent you an email. Looking forward to collaborating!
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)