forked from NdoleStudio/httpsms
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathFirebaseAuth.vue
More file actions
92 lines (84 loc) · 2.71 KB
/
FirebaseAuth.vue
File metadata and controls
92 lines (84 loc) · 2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
<div>
<div id="firebaseui-auth-container" ref="authContainer"></div>
<v-progress-circular
v-if="!firebaseUIInitialized"
class="mx-auto d-block my-16"
:size="80"
:width="5"
color="primary"
indeterminate
></v-progress-circular>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { ProviderId } from 'firebase/auth'
import firebaseui from 'firebaseui'
import firebase from 'firebase/compat'
import { NotificationRequest } from '~/store'
@Component
export default class FirebaseAuth extends Vue {
ui: firebaseui.auth.AuthUI | null = null
firebaseUIInitialized = false
@Prop({ required: false, type: String, default: '/' }) to!: string
beforeDestroy(): void {
if (this.ui) {
this.ui.delete()
}
}
mounted(): void {
if (process.browser) {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const firebaseui = require('firebaseui')
require('firebaseui/dist/firebaseui.css')
this.ui = new firebaseui.auth.AuthUI(this.$fire.auth)
this.ui?.start('#firebaseui-auth-container', this.uiConfig())
}
}
uiConfig(): any {
return {
callbacks: {
signInSuccessWithAuthResult: (
authResult: firebase.auth.UserCredential,
) => {
this.$store.dispatch('addNotification', {
message: 'Login successfull!',
type: 'success',
} as NotificationRequest)
this.$store.dispatch('onAuthStateChanged', {
authUser: authResult.user,
})
this.$router.push({ path: this.to })
return false
},
uiShown: () => {
// The widget is rendered.
// Hide the loader.
this.firebaseUIInitialized = true
const container = this.$refs.authContainer as HTMLElement
Array.from(
container.getElementsByClassName('firebaseui-idp-text-long'),
).forEach((item: Element) => {
item.textContent =
item.textContent?.replace('Sign in with', 'Continue with') || null
})
},
},
// Will use popup for IDP Providers sign-in flow instead of the default, redirect.
signInFlow: 'popup',
signInSuccessUrl: window.location.href,
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
ProviderId.GOOGLE,
ProviderId.GITHUB,
ProviderId.PASSWORD,
],
// Terms of service url.
tosUrl: this.$store.getters.getAppData.url + '/terms-and-conditions',
// Privacy policy url.
privacyPolicyUrl: this.$store.getters.getAppData.url + '/privacy-policy',
}
}
}
</script>