From 8ad8a74abe3e2badacad7d93c56b30ca6a22e791 Mon Sep 17 00:00:00 2001 From: simon bailly Date: Fri, 26 Jul 2024 09:43:56 +0400 Subject: [PATCH 1/2] Firebase Auth with GitHub --- src/components/AppHeader.vue | 31 +++++++++------------- src/components/AuthComponent.vue | 41 +++++++++++++++++++++++------- src/components/LogoutComponent.vue | 11 +++++--- src/components/MapDetails.vue | 1 + 4 files changed, 52 insertions(+), 32 deletions(-) diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 802351b..83ce976 100644 --- a/src/components/AppHeader.vue +++ b/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,42 +30,37 @@ 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); // ... }); @@ -117,10 +110,10 @@ getRedirectResult(auth) - + - + diff --git a/src/components/AuthComponent.vue b/src/components/AuthComponent.vue index aaaf10c..c23c302 100644 --- a/src/components/AuthComponent.vue +++ b/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() { - Se connecter avec Google - Se connecter avec Google + Continuer avec Google + Continuer avec Google + + + +
+
+ + diff --git a/src/components/LogoutComponent.vue b/src/components/LogoutComponent.vue index 24bb946..5a8bbc5 100644 --- a/src/components/LogoutComponent.vue +++ b/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; + // ... }); } diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue index 809cb75..9699624 100644 --- a/src/components/MapDetails.vue +++ b/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 From 4466f3e93ae33d11e6698c47d4c036c86930b53b Mon Sep 17 00:00:00 2001 From: simon bailly Date: Fri, 26 Jul 2024 09:44:33 +0400 Subject: [PATCH 2/2] Firebase Auth Error Message GetRedirectResult --- src/components/AppHeader.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 83ce976..49c69b8 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -62,6 +62,7 @@ getRedirectResult(auth) const errorCode = error.code; const errorMessage = error.message; // ... + alert(error.message) }); onMounted(async () => {