ADD GitHub signin/sign up functionlity to Migration/next

src/lib/firebase.ts

@@ -18,7 +18,6 @@ if (!firebase.apps.length) {
   firebase.initializeApp(firebaseConfig)
 }
 
-export const githubProvider = new firebase.auth.GithubAuthProvider()
 export const auth = firebase.auth()
 export const firestore = firebase.firestore()
 export const storage = firebase.storage()

src/pages/signin.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import {useForm} from 'react-hook-form'
 import {useSignInWithEmailAndPassword} from 'react-firebase-hooks/auth'
+import firebase from 'firebase/app'
 import VisuallyHidden from '@reach/visually-hidden'
 import {auth} from '@/lib/firebase'
 
@@ -18,12 +19,29 @@ const SignIn = () => {
     signInWithEmailAndPassword(email, password)
   }
 
+  const onGithubSubmit = () => {
+    const githubProvider = new firebase.auth.GithubAuthProvider()            
+    auth.signInWithPopup(githubProvider).catch(error => {
+      console.log(error)
+    })
+  }
+
   if (user) {
-    // TODO: redirect to dashboard
+    // TODO: redirect to dashboard    
+    return (
+      <div>
+        <p>Signed In User</p>
+      </div>
+    );
   }
 
   if (error) {
     // TODO: Handle error in notification
+    return (
+      <div>
+        <p>Error: {error.message}</p>
+      </div>
+    );
   }
 
   return (
@@ -36,7 +54,7 @@ const SignIn = () => {
           Franklin
         </p>
       </header>
-      <section>
+      <section>        
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="flex flex-col w-full space-y-4">
             <div className="flex flex-col space-y-4">
@@ -79,6 +97,7 @@ const SignIn = () => {
                     type="button"
                     disabled={loading}
                     className="px-4 py-2 text-white bg-black rounded-md"
+                    onClick={onGithubSubmit}
                   >
                     Sign in with GitHub
                   </button>

src/pages/signup.tsx

@@ -1,9 +1,17 @@
 import Link from 'next/link'
+import {useState} from 'react'
 import {useForm} from 'react-hook-form'
 import {useCreateUserWithEmailAndPassword} from 'react-firebase-hooks/auth'
 import VisuallyHidden from '@reach/visually-hidden'
+import firebase from 'firebase/app'
 import {auth} from '@/lib/firebase'
 
+interface CredentialProps {
+  credential?: any;
+  email?: string;
+  password?: string;
+}
+
 const SignUp = () => {
   const {
     handleSubmit,
@@ -14,6 +22,7 @@ const SignUp = () => {
   const [createUserWithEmailAndPassword, user, loading, error] = useCreateUserWithEmailAndPassword(
     auth
   )
+  const [tempCredentials, setTempCredentials] = useState<CredentialProps>({});
 
   const onSubmit = (values: {
     email: string
@@ -26,10 +35,76 @@ const SignUp = () => {
     createUserWithEmailAndPassword(email, password)
   }
 
+  const onGithubSubmit = async () => {
+    const githubProvider = new firebase.auth.GithubAuthProvider()
+
+    const authUser = await auth
+      .signInWithPopup(githubProvider)
+      .catch(error => {
+        // In the event that an account with this email already exists (because they signed up with email)
+        // Store the existing credential and email conflict, and then ask the user to input the password for their email account
+        // Otherwise... handleErrors()
+        if (error.code === 'auth/account-exists-with-different-credential') {
+          // Store the pending Github credential and conflicting email          
+          setTempCredentials({
+            credential: error.credential,
+            email: error.email,
+            password: null,
+          });
+          // TODO: Open the modal to ask for a password
+          console.log('credential error')   
+        } else {
+          console.log(error)
+        }
+    })
+
+    if (authUser) {
+      // TODO: If we're creating an account for the first time, we need to store some information about the user
+      // see https://github.com/OpenMined/openmined/blob/dev/apps/courses/src/components/forms/users/SignUp.tsx      
+      let firstName = ''
+      let lastName = ''
+
+      if (authUser.user.displayName && authUser.user.displayName !== '') {
+        const splitName = authUser.user.displayName.split(' ');
+
+        firstName = splitName.length >= 1 ? splitName[0] : authUser.user.displayName;
+        lastName = splitName.length >= 2 ? splitName.slice(1).join(' ') : ''
+      }
+
+      const profile = authUser.additionalUserInfo.profile as any
+
+      authUser.user.updateProfile({
+        first_name: firstName,
+        last_name: lastName,
+        notification_preferences: ['project_reviews'],
+        description: profile.bio,
+        github: profile.login,
+        twitter: profile.twitter_username,
+        website: profile.blog,
+        photoURL: profile.avatar_url,
+      }).then(() => {
+        // Update successful.
+        // TODO: change to trigger dashboard redirect here
+        console.log('user profile update success')
+      }).catch(error => {
+        // An error happened.
+        console.log(error)
+      })
+    }
+
+
+  }  
+
   if (user) {
-    // redirect to dashboard
+    // TODO: redirect to dashboard
+    return (
+      <p>user created</p>
+    )
   }
 
+  if (error) {
+    // TODO: error handling
+  }
   // TODO: if error, notify user -- use a notification component from OMUI
 
   return (
@@ -122,6 +197,7 @@ const SignUp = () => {
                   type="button"
                   disabled={loading}
                   className="px-4 py-2 text-white bg-black rounded-md"
+                  onClick={onGithubSubmit}
                 >
                   Sign up with GitHub
                 </button>