Merge pull request #33 from baillysi/develop

src/components/AppHeader.vue

@@ -15,8 +15,6 @@ const auth = useFirebaseAuth()
 const isLoggedIn = ref(false)
 const isAuthLoading = ref(false)
 
-// const googleUser = ref('')
-
 // native vuefire watcher to check whether user logged or not
 onAuthStateChanged(auth, (user) => {
   if (user) {
@@ -32,43 +30,39 @@ async function showAuth() {
   myModal.show();
 }
 
+// hideAuth never used due to Redirect methods
+
 async function showLogout() {
   let myModal = Modal.getOrCreateInstance(document.getElementById('#logout'));
   myModal.show();
 }
 
-async function hideAuth() {
-  let myModal = Modal.getOrCreateInstance(document.getElementById('#auth'));
-  myModal.hide();
-}
-
 async function hideLogout() {
   let myModal = Modal.getOrCreateInstance(document.getElementById('#logout'));
   myModal.hide();
 }
 
+// In most cases, getRedirectResult is not needed. onAuthStateChanged is sufficient for successful flows
+// but a developer may want to get the results (OAuth credentials, additional user info, etc)
+// or recover from certain errors (email already exists, linking is required, etc) 
+// or show error message to the user (account disabled, etc). They can call this API to get that information.
+
+// How to handle several providers ?
+
 getRedirectResult(auth) 
 
   .then((result) => {
     isAuthLoading.value = false 
-    // This gives you a Google Access Token. You can use it to access Google APIs.
-    const credential = GoogleAuthProvider.credentialFromResult(result);
-    const token = credential.accessToken;
-
-    // The signed-in user info.
-    // googleUser.value = result.user;
     console.log('Successfully logged in !')
 
   })
   .catch((error) => {
+    isAuthLoading.value = false
     // Handle Errors here.
     const errorCode = error.code;
     const errorMessage = error.message;
-    // The email of the user's account used.
-    const email = error.email;
-    // The AuthCredential type that was used.
-    const credential = GoogleAuthProvider.credentialFromError(error);
     // ...
+    alert(error.message)
   });
 
   onMounted(async () => {
@@ -117,10 +111,10 @@ getRedirectResult(auth)
   </div>
 
   <!-- Auth -->
-  <AuthComponent :isLoggedIn="isLoggedIn" :currentUser="auth.currentUser" @exit="hideAuth()"></AuthComponent>
+  <AuthComponent :isLoggedIn="isLoggedIn" :currentUser="auth.currentUser"></AuthComponent>
 
   <!-- Logout -->
-  <LogoutComponent @exit="hideLogout()"></LogoutComponent>
+  <LogoutComponent @close="hideLogout()"></LogoutComponent>
 
 
 </template>

src/components/AuthComponent.vue

@@ -5,33 +5,42 @@ import { ref } from 'vue'
 import AlertComponent from './AlertComponent.vue';
 
 import { useFirebaseAuth } from 'vuefire'
-import { GoogleAuthProvider, signInWithRedirect, signInAnonymously } from 'firebase/auth'
+import { GoogleAuthProvider, GithubAuthProvider, signInWithRedirect, signInAnonymously } from 'firebase/auth'
 
-const emit = defineEmits(['exit', 'close'])
 const props = defineProps({
   isLoggedIn: Boolean,
   currentUser: Object,
 })
 
-const isAuthLoading = ref(false)
-
 const auth = useFirebaseAuth()
-const provider = new GoogleAuthProvider();
+const isAuthLoading = ref(false)
+const googleProvider = new GoogleAuthProvider()
+const githubProvider = new GithubAuthProvider()
 
+// Google provider. Check GetRedirectResult in AppHeader Component to get results.
 async function signInWithGoogle() {
   isAuthLoading.value = true
-  await signInWithRedirect(auth, provider)
+  await signInWithRedirect(auth, googleProvider)
 }
 
+// GitHub provider. Check GetRedirectResult in AppHeader Component to get results.
+async function signInWithGitHub() {
+  isAuthLoading.value = true
+  await signInWithRedirect(auth, githubProvider)
+}
+
+// Guest Anonymous Login
 async function signInAsGuest() {
   isAuthLoading.value = true
   signInAnonymously(auth)
     .then(() => {
-      // Signed in..
+      // Signed in.
       isAuthLoading.value = false
       console.log('Successfully logged in as guest !')
     })
     .catch((error) => {
+      // Handle Errors here.
+      isAuthLoading.value = false
       const errorCode = error.code;
       const errorMessage = error.message;
       // ...
@@ -74,8 +83,22 @@ async function signInAsGuest() {
                 <path fill="none" d="M0 0h48v48H0z"></path>
               </svg>
             </div>
-            <span class="gsi-material-button-contents">Se connecter avec Google</span>
-            <span style="display: none;">Se connecter avec Google</span>
+            <span class="gsi-material-button-contents">Continuer avec Google</span>
+            <span style="display: none;">Continuer avec Google</span>
+          </div>
+        </button>
+
+        <br/>
+        <br/>
+
+        <button class="gsi-material-button" @click="signInWithGitHub()">
+          <div class="gsi-material-button-state"></div>
+          <div class="gsi-material-button-content-wrapper">
+            <div class="gsi-material-button-icon">
+              <i class="pi pi-github" style="color:black; font-size: 1.3rem"></i>
+            </div>
+            <span class="gsi-material-button-contents">Continuer avec GitHub</span>
+            <span style="display: none;">Continuer avec GitHub</span>
           </div>
         </button>
 

src/components/LogoutComponent.vue

@@ -3,18 +3,21 @@
 import { useFirebaseAuth } from 'vuefire'
 import { signOut } from 'firebase/auth'
 
-const emit = defineEmits(['exit'])
+const emit = defineEmits(['close'])
 
 const auth = useFirebaseAuth()
 
+// SignOut
 async function signout() {
   signOut(auth).then((data) => {
       console.log('Successfully logged out!');
-      emit('exit')
+      emit('close')
     })
     .catch(error => {
-      console.log(error.code)
-      alert(error.message);
+      // Handle Errors here.
+      const errorCode = error.code;
+      const errorMessage = error.message;
+      // ...
     });
 }
 

src/components/MapDetails.vue

@@ -45,6 +45,7 @@ const auth = useFirebaseAuth()
 const isLoggedIn = ref(false)
 
 // native vuefire watcher to check whether user logged or not
+// custom features available if logged in
 onAuthStateChanged(auth, (user) => {
   if (user) {
     isLoggedIn.value = true