131 lines
4.0 KiB
Vue
131 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import firebase from 'firebase/compat/app'
|
|
import 'firebase/compat/auth'
|
|
import 'firebaseui/dist/firebaseui.css'
|
|
import * as firebaseui from 'firebaseui'
|
|
import { FirebaseAuthentication } from '@capacitor-firebase/authentication'
|
|
import { getAuth, GoogleAuthProvider, signInWithCredential } from 'firebase/auth'
|
|
|
|
const emit = defineEmits<{
|
|
signedIn: [authResult: any]
|
|
}>()
|
|
|
|
// const ui: any = inject('firebaseAuthUI')
|
|
const auth = getAuth()
|
|
const firebaseAuthUI = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth)
|
|
|
|
const uiConfig = {
|
|
signInOptions: [
|
|
firebase.auth.EmailAuthProvider.PROVIDER_ID
|
|
// firebase.auth.GoogleAuthProvider.PROVIDER_ID
|
|
],
|
|
// signInFlow: 'popup',
|
|
signInFlow: 'redirect',
|
|
callbacks: {
|
|
signInSuccessWithAuthResult(authResult: any) {
|
|
// var user = authResult.user
|
|
// var credential = authResult.credential
|
|
// var isNewUser = authResult.additionalUserInfo.isNewUser
|
|
// var providerId = authResult.additionalUserInfo.providerId
|
|
// var operationType = authResult.operationType
|
|
// Do something with the returned AuthResult.
|
|
// Return type determines whether we continue the redirect
|
|
// automatically or whether we leave that to developer to handle.
|
|
emit('signedIn', authResult)
|
|
return false
|
|
},
|
|
signInFailure(error: any) {
|
|
console.error('Error signing in', error)
|
|
}
|
|
}
|
|
// Other config options...
|
|
}
|
|
// onMounted(() => ui.start('#auth', uiConfig))
|
|
|
|
interface Provider {
|
|
name: 'google' | 'microsoft' | 'github'
|
|
icon: string
|
|
signin: () => Promise<void>
|
|
// (options?: SignInOptions) => Promise<SignInResult>
|
|
}
|
|
|
|
const providers: Provider[] = [
|
|
{
|
|
name: 'google',
|
|
icon: 'fa-brands fa-google',
|
|
signin: async () => {
|
|
const result = await FirebaseAuthentication.signInWithGoogle({
|
|
mode: 'redirect'
|
|
})
|
|
const credential = GoogleAuthProvider.credential(result.credential?.idToken)
|
|
await signInWithCredential(auth, credential)
|
|
}
|
|
}
|
|
// {
|
|
// name: 'microsoft',
|
|
// icon: 'fa-brands fa-microsoft',
|
|
// signin: async () => {
|
|
// const result = await FirebaseAuthentication.signInWithMicrosoft({
|
|
// mode: 'redirect'
|
|
// })
|
|
// const provider = new OAuthProvider('microsoft.com')
|
|
// const credential = provider.credential({
|
|
// idToken: result.credential?.idToken,
|
|
// rawNonce: result.credential?.nonce
|
|
// })
|
|
// await signInWithCredential(auth, credential)
|
|
// }
|
|
// },
|
|
// {
|
|
// name: 'github',
|
|
// icon: 'fa-brands fa-github',
|
|
// signin: async () => {
|
|
// const result = await FirebaseAuthentication.signInWithGithub({
|
|
// mode: 'redirect'
|
|
// })
|
|
// const provider = new OAuthProvider('github.com')
|
|
// const credential = provider.credential({
|
|
// idToken: result.credential?.idToken,
|
|
// rawNonce: result.credential?.nonce
|
|
// })
|
|
// await signInWithCredential(auth, credential)
|
|
// }
|
|
// }
|
|
]
|
|
// type Provider = (typeof providers)[number]
|
|
const signInWithProvider = async (provider: Provider) => {
|
|
provider.signin()
|
|
}
|
|
|
|
const signingInWithEmail = ref(false)
|
|
const signInWithEmail = () => {
|
|
firebaseAuthUI.start('#auth', uiConfig)
|
|
signingInWithEmail.value = true
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="space-y-2">
|
|
<template v-if="!signingInWithEmail">
|
|
<UIButton
|
|
class="mx-auto !block w-[225px] max-sm:w-full"
|
|
size="sm"
|
|
@click="signInWithProvider(provider)"
|
|
v-for="provider in providers"
|
|
:key="provider.name"
|
|
>
|
|
<i class="fa-fw mr-2" :class="provider.icon"></i>
|
|
Sign in with {{ provider.name }}
|
|
</UIButton>
|
|
<UIButton class="mx-auto !block w-[225px] max-sm:w-full" size="sm" @click="signInWithEmail">
|
|
<i class="fa-fw fa-regular fa-envelope mr-2"></i>
|
|
Sign in with email
|
|
</UIButton>
|
|
</template>
|
|
<div id="auth"></div>
|
|
<!-- <progress
|
|
v-show="props.authenticating"
|
|
class="dui-progress dui-progress-primary w-full"
|
|
></progress> -->
|
|
</div>
|
|
</template>
|