custom auth

src/components/Auth.vue

@@ -2,10 +2,17 @@
 import firebase from 'firebase/compat/app'
 import 'firebase/compat/auth'
 import 'firebaseui/dist/firebaseui.css'
+import {
+  getAuth,
+  signInWithRedirect,
+  GoogleAuthProvider,
+  GithubAuthProvider,
+  OAuthProvider
+} from 'firebase/auth'
 
-const props = defineProps<{
+// const props = defineProps<{
-  authenticating?: boolean
+//   authenticating?: boolean
-}>()
+// }>()
 
 const emit = defineEmits<{
   signedIn: [authResult: any]
@@ -15,8 +22,8 @@ const ui: any = inject('firebaseAuthUI')
 
 const uiConfig = {
   signInOptions: [
-    firebase.auth.EmailAuthProvider.PROVIDER_ID,
+    firebase.auth.EmailAuthProvider.PROVIDER_ID
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID
+    // firebase.auth.GoogleAuthProvider.PROVIDER_ID
   ],
   // signInFlow: 'popup',
   signInFlow: 'redirect',
@@ -39,12 +46,52 @@ const uiConfig = {
   }
   // Other config options...
 }
-onMounted(() => ui.start('#auth', uiConfig))
+// onMounted(() => ui.start('#auth', uiConfig))
+
+type AuthProvider = 'google' | 'github' | 'microsoft'
+const providers: { [key in AuthProvider]: any | (() => any) } = {
+  google: new GoogleAuthProvider(),
+  github: () => {
+    const provider = new GithubAuthProvider()
+    provider.addScope('user:email')
+    return provider
+  },
+  microsoft: new OAuthProvider('microsoft.com')
+}
+
+const signIn = (providerName: AuthProvider) => {
+  const auth = getAuth()
+  const provider =
+    typeof providers[providerName] === 'function'
+      ? providers[providerName]()
+      : providers[providerName]
+  signInWithRedirect(auth, provider)
+}
+
+const authenticatingWithEmail = ref(false)
+const signInWithEmail = () => {
+  authenticatingWithEmail.value = true
+  ui.start('#auth', uiConfig)
+}
 </script>
 <template>
-  <div id="auth" v-show="!props.authenticating"></div>
+  <div class="flex flex-col items-center" v-if="!authenticatingWithEmail">
-  <progress
+    <UIButton class="mx-auto w-[200px] bg-red-500 text-center" @click="signIn('google')">
+      Sign in with Google
+    </UIButton>
+    <UIButton class="mx-auto w-[200px] bg-blue-300 text-center" @click="signIn('github')">
+      Sign in with Github
+    </UIButton>
+    <UIButton class="mx-auto w-[200px] bg-blue-300 text-center" @click="signIn('microsoft')">
+      Sign in with Microsoft
+    </UIButton>
+    <UIButton class="mx-auto w-[200px] bg-blue-300 text-center" @click="signInWithEmail">
+      Sign in with e-mail
+    </UIButton>
+  </div>
+  <div id="auth"></div>
+  <!-- <progress
     v-show="props.authenticating"
     class="dui-progress dui-progress-primary w-full"
-  ></progress>
+  ></progress> -->
 </template>

src/components/TopBar.vue

@@ -21,12 +21,13 @@ const emit = defineEmits<{
 
 const searchActive = ref<boolean>(false)
 
-const authUI: any = inject('firebaseAuthUI')
+// const authUI: any = inject('firebaseAuthUI')
-const authPending = ref<boolean>(authUI.isPendingRedirect())
+// const authPending = ref<boolean>(authUI.isPendingRedirect())
+// const authPending = ref(false)
 
 const handleSignIn = async (close: () => Promise<boolean>) => {
   await close()
-  authPending.value = false
+  // authPending.value = false
 }
 </script>
 <template>
@@ -50,7 +51,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
         />
       </div>
       <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
-        <template v-if="!loading || authPending">
+        <template v-if="!loading">
           <SearchBar @active="(active) => (searchActive = active)" />
           <UIButton
             size="sm"
@@ -60,7 +61,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
           >
             <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
           </UIButton>
-          <UIModal v-if="(initialized && !user) || authPending" :open="authPending">
+          <UIModal v-if="(initialized && !user)">
             <template #activator="{ open }">
               <UIButton
                 size="sm"
@@ -71,9 +72,9 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
                 Sign in
               </UIButton>
             </template>
-            <template #title>{{ authPending ? 'Signing in...' : 'Sign in' }}</template>
+            <template #title>{{ 'Sign in' }}</template>
             <template #default="{ close }">
-              <Auth @signedIn="handleSignIn(close)" :authenticating="authPending" />
+              <Auth @signedIn="handleSignIn(close)" />
             </template>
             <template #actions="{ close }">
               <UIButton size="sm" @click="close">Close</UIButton>

src/components/TopBar/Settings/AccountSettings.vue

@@ -13,6 +13,8 @@ const sendVerificationMail = () => {
   verificationEmailSent.value = true
 }
 
+console.log(user.value)
+
 const exportNotes = async () => {
   const zip = new JSZip()
   notes.value.forEach((note) => {
@@ -66,11 +68,11 @@ const toggleEncryption = async () => {
         <UICard>
           <template #title>Account</template>
           <template #default>
-            <div class="w-full flex-row sm:flex">
+            <div class="w-full flex-row sm:flex" v-if="user?.email">
               <div class="font-bold sm:w-4/12">E-mail address</div>
               <div>{{ user?.email }}</div>
             </div>
-            <div class="w-full flex-row sm:flex">
+            <div class="w-full flex-row sm:flex" v-if="user?.email">
               <div class="font-bold sm:w-4/12">Account status</div>
               <div class="col-auto">
                 <UIBadge :color="user?.emailVerified ? 'success' : 'warning'">

src/composables/useFirebase.ts

@@ -7,6 +7,7 @@ import {
   persistentMultipleTabManager
 } from 'firebase/firestore'
 import type { Firestore } from 'firebase/firestore'
+import { getAuth, getRedirectResult } from 'firebase/auth'
 
 // import { getAnalytics } from "firebase/analytics";
 // TODO: Add SDKs for Firebase products that you want to use
@@ -34,8 +35,37 @@ export const signOut = () => firebase.auth().signOut()
 export const db = ref<Firestore>()
 
 // Initialize Firebase
-export const initializeFirebase = () => {
+export const initializeFirebase = async () => {
   const app = firebase.initializeApp(firebaseConfig)
+  const auth = getAuth()
+  try {
+    const authRedirectResult = await getRedirectResult(auth)
+    console.log(authRedirectResult)
+    // user.value = result
+    // 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.
+    // const user = result.user
+    // IdP data available using getAdditionalUserInfo(result)
+    // ...
+  } catch (error: any) {
+    console.error(error)
+    // const errorCode = error.code
+    // // const errorMessage = error.message
+    // const email = error.customData.email
+
+    // Handle Errors here.
+    // const errorCode = error.code
+    // const errorMessage = error.message
+    // The email of the user's account used.
+    // const email = error.customData.email
+    // The AuthCredential type that was used.
+    // const credential = GoogleAuthProvider.credentialFromError(error)
+    // ...
+  }
+
   firebase.auth().onAuthStateChanged((firebaseUser) => {
     user.value = firebaseUser
   })