feat: load allowed login methods from .env (#3264)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Akash K
GitHub
@@ -9,27 +9,12 @@
|
||||
<template #body>
|
||||
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithGitHub"
|
||||
:icon="IconGithub"
|
||||
:label="`${t('auth.continue_with_github')}`"
|
||||
@click="signInWithGithub"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithGoogle"
|
||||
:icon="IconGoogle"
|
||||
:label="`${t('auth.continue_with_google')}`"
|
||||
@click="signInWithGoogle"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithMicrosoft"
|
||||
:icon="IconMicrosoft"
|
||||
:label="`${t('auth.continue_with_microsoft')}`"
|
||||
@click="signInWithMicrosoft"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:icon="IconEmail"
|
||||
:label="`${t('auth.continue_with_email')}`"
|
||||
@click="mode = 'email'"
|
||||
v-for="provider in allowedAuthProviders"
|
||||
:key="provider.id"
|
||||
:loading="provider.isLoading.value"
|
||||
:icon="provider.icon"
|
||||
:label="provider.label"
|
||||
@click="provider.action"
|
||||
/>
|
||||
|
||||
<hr v-if="additonalLoginItems.length > 0" />
|
||||
@@ -123,132 +108,138 @@
|
||||
</HoppSmartModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from "vue"
|
||||
<script setup lang="ts">
|
||||
import { Ref, computed, onMounted, ref } from "vue"
|
||||
|
||||
import { useStreamSubscriber } from "@composables/stream"
|
||||
import { useToast } from "@composables/toast"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
|
||||
import { platform } from "~/platform"
|
||||
import { setLocalConfig } from "~/newstore/localpersistence"
|
||||
|
||||
import IconGithub from "~icons/auth/github"
|
||||
import IconGoogle from "~icons/auth/google"
|
||||
import IconEmail from "~icons/auth/email"
|
||||
import IconMicrosoft from "~icons/auth/microsoft"
|
||||
import IconArrowLeft from "~icons/lucide/arrow-left"
|
||||
import { setLocalConfig } from "~/newstore/localpersistence"
|
||||
import { useStreamSubscriber } from "@composables/stream"
|
||||
import { useToast } from "@composables/toast"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
|
||||
import { LoginItemDef } from "~/platform/auth"
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
show: Boolean,
|
||||
},
|
||||
emits: ["hide-modal"],
|
||||
setup() {
|
||||
const { subscribeToStream } = useStreamSubscriber()
|
||||
defineProps<{
|
||||
show: boolean
|
||||
}>()
|
||||
|
||||
const tosLink = import.meta.env.VITE_APP_TOS_LINK
|
||||
const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK
|
||||
const emit = defineEmits<{
|
||||
(e: "hide-modal"): void
|
||||
}>()
|
||||
|
||||
return {
|
||||
subscribeToStream,
|
||||
t: useI18n(),
|
||||
additonalLoginItems: computed(
|
||||
() => platform.auth.additionalLoginItems ?? []
|
||||
),
|
||||
toast: useToast(),
|
||||
IconGithub,
|
||||
IconGoogle,
|
||||
IconEmail,
|
||||
IconMicrosoft,
|
||||
IconArrowLeft,
|
||||
tosLink,
|
||||
privacyPolicyLink,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
email: "",
|
||||
},
|
||||
signingInWithGoogle: false,
|
||||
signingInWithGitHub: false,
|
||||
signingInWithMicrosoft: false,
|
||||
signingInWithEmail: false,
|
||||
mode: "sign-in",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const currentUser$ = platform.auth.getCurrentUserStream()
|
||||
const { subscribeToStream } = useStreamSubscriber()
|
||||
const t = useI18n()
|
||||
const toast = useToast()
|
||||
|
||||
this.subscribeToStream(currentUser$, (user) => {
|
||||
if (user) this.hideModal()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
async doAdditionalLoginItemClickAction(item: LoginItemDef) {
|
||||
await item.onClick()
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
showLoginSuccess() {
|
||||
this.toast.success(`${this.t("auth.login_success")}`)
|
||||
},
|
||||
async signInWithGoogle() {
|
||||
this.signingInWithGoogle = true
|
||||
const form = {
|
||||
email: "",
|
||||
}
|
||||
|
||||
try {
|
||||
await platform.auth.signInUserWithGoogle()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
/*
|
||||
const signingInWithGoogle = ref(false)
|
||||
const signingInWithGitHub = ref(false)
|
||||
const signingInWithMicrosoft = ref(false)
|
||||
const signingInWithEmail = ref(false)
|
||||
const mode = ref("sign-in")
|
||||
|
||||
const tosLink = import.meta.env.VITE_APP_TOS_LINK
|
||||
const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK
|
||||
|
||||
type AuthProviderItem = {
|
||||
id: string
|
||||
icon: typeof IconGithub
|
||||
label: string
|
||||
action: (...args: any[]) => any
|
||||
isLoading: Ref<boolean>
|
||||
}
|
||||
|
||||
const additonalLoginItems = computed(
|
||||
() => platform.auth.additionalLoginItems ?? []
|
||||
)
|
||||
|
||||
const doAdditionalLoginItemClickAction = async (item: LoginItemDef) => {
|
||||
await item.onClick()
|
||||
emit("hide-modal")
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const currentUser$ = platform.auth.getCurrentUserStream()
|
||||
|
||||
subscribeToStream(currentUser$, (user) => {
|
||||
if (user) hideModal()
|
||||
})
|
||||
})
|
||||
|
||||
const showLoginSuccess = () => {
|
||||
toast.success(`${t("auth.login_success")}`)
|
||||
}
|
||||
|
||||
const signInWithGoogle = async () => {
|
||||
signingInWithGoogle.value = true
|
||||
|
||||
try {
|
||||
await platform.auth.signInUserWithGoogle()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
/*
|
||||
A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
|
||||
Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
|
||||
*/
|
||||
this.toast.error(`${this.t("error.something_went_wrong")}`)
|
||||
}
|
||||
toast.error(`${t("error.something_went_wrong")}`)
|
||||
}
|
||||
|
||||
this.signingInWithGoogle = false
|
||||
},
|
||||
async signInWithGithub() {
|
||||
this.signingInWithGitHub = true
|
||||
signingInWithGoogle.value = false
|
||||
}
|
||||
|
||||
const result = await platform.auth.signInUserWithGithub()
|
||||
const signInWithGithub = async () => {
|
||||
signingInWithGitHub.value = true
|
||||
|
||||
if (!result) {
|
||||
this.signingInWithGitHub = false
|
||||
return
|
||||
}
|
||||
const result = await platform.auth.signInUserWithGithub()
|
||||
|
||||
if (result.type === "success") {
|
||||
// this.showLoginSuccess()
|
||||
} else if (result.type === "account-exists-with-different-cred") {
|
||||
this.toast.info(`${this.t("auth.account_exists")}`, {
|
||||
duration: 0,
|
||||
closeOnSwipe: false,
|
||||
action: {
|
||||
text: `${this.t("action.yes")}`,
|
||||
onClick: async (_, toastObject) => {
|
||||
await result.link()
|
||||
this.showLoginSuccess()
|
||||
if (!result) {
|
||||
signingInWithGitHub.value = false
|
||||
return
|
||||
}
|
||||
|
||||
toastObject.goAway(0)
|
||||
},
|
||||
},
|
||||
})
|
||||
} else {
|
||||
console.log("error logging into github", result.err)
|
||||
this.toast.error(`${this.t("error.something_went_wrong")}`)
|
||||
}
|
||||
if (result.type === "success") {
|
||||
// this.showLoginSuccess()
|
||||
} else if (result.type === "account-exists-with-different-cred") {
|
||||
toast.info(`${t("auth.account_exists")}`, {
|
||||
duration: 0,
|
||||
closeOnSwipe: false,
|
||||
action: {
|
||||
text: `${t("action.yes")}`,
|
||||
onClick: async (_, toastObject) => {
|
||||
await result.link()
|
||||
showLoginSuccess()
|
||||
|
||||
this.signingInWithGitHub = false
|
||||
},
|
||||
async signInWithMicrosoft() {
|
||||
this.signingInWithMicrosoft = true
|
||||
toastObject.goAway(0)
|
||||
},
|
||||
},
|
||||
})
|
||||
} else {
|
||||
console.log("error logging into github", result.err)
|
||||
toast.error(`${t("error.something_went_wrong")}`)
|
||||
}
|
||||
|
||||
try {
|
||||
await platform.auth.signInUserWithMicrosoft()
|
||||
// this.showLoginSuccess()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
/*
|
||||
signingInWithGitHub.value = false
|
||||
}
|
||||
|
||||
const signInWithMicrosoft = async () => {
|
||||
signingInWithMicrosoft.value = true
|
||||
|
||||
try {
|
||||
await platform.auth.signInUserWithMicrosoft()
|
||||
// this.showLoginSuccess()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
/*
|
||||
A auth/account-exists-with-different-credential Firebase error wont happen between MS with Google or Github
|
||||
If a Github account exists and user then logs in with MS email we get a "Something went wrong toast" and console errors and MS replaces GH as only provider.
|
||||
The error messages are as follows:
|
||||
@@ -256,34 +247,82 @@ export default defineComponent({
|
||||
@firebase/auth: Auth (9.6.11): INTERNAL ASSERTION FAILED: Pending promise was never set
|
||||
They may be related to https://github.com/firebase/firebaseui-web/issues/947
|
||||
*/
|
||||
this.toast.error(`${this.t("error.something_went_wrong")}`)
|
||||
}
|
||||
toast.error(`${t("error.something_went_wrong")}`)
|
||||
}
|
||||
|
||||
this.signingInWithMicrosoft = false
|
||||
},
|
||||
async signInWithEmail() {
|
||||
this.signingInWithEmail = true
|
||||
signingInWithMicrosoft.value = false
|
||||
}
|
||||
|
||||
await platform.auth
|
||||
.signInWithEmail(this.form.email)
|
||||
.then(() => {
|
||||
this.mode = "email-sent"
|
||||
setLocalConfig("emailForSignIn", this.form.email)
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e)
|
||||
this.toast.error(e.message)
|
||||
this.signingInWithEmail = false
|
||||
})
|
||||
.finally(() => {
|
||||
this.signingInWithEmail = false
|
||||
})
|
||||
},
|
||||
hideModal() {
|
||||
this.mode = "sign-in"
|
||||
this.toast.clear()
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
const signInWithEmail = async () => {
|
||||
signingInWithEmail.value = true
|
||||
|
||||
await platform.auth
|
||||
.signInWithEmail(form.email)
|
||||
.then(() => {
|
||||
mode.value = "email-sent"
|
||||
setLocalConfig("emailForSignIn", form.email)
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e)
|
||||
toast.error(e.message)
|
||||
signingInWithEmail.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
signingInWithEmail.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const hideModal = () => {
|
||||
mode.value = "sign-in"
|
||||
toast.clear()
|
||||
|
||||
emit("hide-modal")
|
||||
}
|
||||
|
||||
const authProviders: AuthProviderItem[] = [
|
||||
{
|
||||
id: "GITHUB",
|
||||
icon: IconGithub,
|
||||
label: t("auth.continue_with_github"),
|
||||
action: signInWithGithub,
|
||||
isLoading: signingInWithGitHub,
|
||||
},
|
||||
})
|
||||
{
|
||||
id: "GOOGLE",
|
||||
icon: IconGoogle,
|
||||
label: t("auth.continue_with_google"),
|
||||
action: signInWithGoogle,
|
||||
isLoading: signingInWithGoogle,
|
||||
},
|
||||
{
|
||||
id: "MICROSOFT",
|
||||
icon: IconMicrosoft,
|
||||
label: t("auth.continue_with_microsoft"),
|
||||
action: signInWithMicrosoft,
|
||||
isLoading: signingInWithMicrosoft,
|
||||
},
|
||||
{
|
||||
id: "EMAIL",
|
||||
icon: IconEmail,
|
||||
label: t("auth.continue_with_email"),
|
||||
action: () => {
|
||||
mode.value = "email"
|
||||
},
|
||||
isLoading: signingInWithEmail,
|
||||
},
|
||||
]
|
||||
|
||||
const allowedAuthProvidersIDsString: string | undefined = import.meta.env
|
||||
.VITE_ALLOWED_AUTH_PROVIDERS
|
||||
|
||||
const allowedAuthProvidersIDs = allowedAuthProvidersIDsString
|
||||
? allowedAuthProvidersIDsString.split(",")
|
||||
: []
|
||||
|
||||
const allowedAuthProviders =
|
||||
allowedAuthProvidersIDs.length > 0
|
||||
? authProviders.filter((provider) =>
|
||||
allowedAuthProvidersIDs.includes(provider.id)
|
||||
)
|
||||
: authProviders
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user