From d793a4260cf94e2b69e80168d4a29a19c34db90f Mon Sep 17 00:00:00 2001 From: Marco Crapts Date: Tue, 6 Jun 2023 19:33:43 +0200 Subject: [PATCH] capacitor firebase auth --- android/app/capacitor.build.gradle | 1 + android/capacitor.settings.gradle | 3 + android/variables.gradle | 3 +- capacitor.config.ts | 4 + ios/App/Podfile | 14 ++++ package-lock.json | 45 +++++++++-- package.json | 3 +- src/App.vue | 9 +-- src/components/Auth.vue | 80 +++++++++++++++++-- src/components/TopBar.vue | 14 ++-- .../TopBar/Settings/AccountSettings.vue | 50 ++++++------ 11 files changed, 174 insertions(+), 52 deletions(-) diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle index 58325bb..4a56c42 100644 --- a/android/app/capacitor.build.gradle +++ b/android/app/capacitor.build.gradle @@ -9,6 +9,7 @@ android { apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle" dependencies { + implementation project(':capacitor-firebase-authentication') implementation project(':capacitor-dialog') implementation project(':capacitor-haptics') implementation project(':capacitor-keyboard') diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle index 91b7735..0c6ebfd 100644 --- a/android/capacitor.settings.gradle +++ b/android/capacitor.settings.gradle @@ -2,6 +2,9 @@ include ':capacitor-android' project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor') +include ':capacitor-firebase-authentication' +project(':capacitor-firebase-authentication').projectDir = new File('../node_modules/@capacitor-firebase/authentication/android') + include ':capacitor-dialog' project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android') diff --git a/android/variables.gradle b/android/variables.gradle index 5946ada..eb8f302 100644 --- a/android/variables.gradle +++ b/android/variables.gradle @@ -13,4 +13,5 @@ ext { androidxJunitVersion = '1.1.5' androidxEspressoCoreVersion = '3.5.1' cordovaAndroidVersion = '10.1.1' -} \ No newline at end of file + rgcfaIncludeGoogle = true +} diff --git a/capacitor.config.ts b/capacitor.config.ts index c5baa19..861ee68 100644 --- a/capacitor.config.ts +++ b/capacitor.config.ts @@ -10,6 +10,10 @@ const config: CapacitorConfig = { plugins: { Keyboard: { resize: 'native' + }, + FirebaseAuthentication: { + skipNativeAuth: false, + providers: ['google.com'] } } } diff --git a/ios/App/Podfile b/ios/App/Podfile index 7caff07..80db1e6 100644 --- a/ios/App/Podfile +++ b/ios/App/Podfile @@ -11,6 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true def capacitor_pods pod 'Capacitor', :path => '../../node_modules/@capacitor/ios' pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios' + pod 'CapacitorFirebaseAuthentication', :path => '../../node_modules/@capacitor-firebase/authentication' pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog' pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics' pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard' @@ -20,8 +21,21 @@ end target 'App' do capacitor_pods # Add your Pods here + pod 'CapacitorFirebaseAuthentication/Google', :path => '../../node_modules/@capacitor-firebase/authentication' end post_install do |installer| assertDeploymentTarget(installer) end + +post_install do |installer| + installer.pods_project.targets.each do |target| + target.build_configurations.each do |config| + if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle" + target.build_configurations.each do |config| + config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO' + end + end + end + end +end diff --git a/package-lock.json b/package-lock.json index 79fda0d..569df51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "contexted-v3", "version": "0.1.0", "dependencies": { + "@capacitor-firebase/authentication": "^5.0.0", "@capacitor/android": "^5.0.4", "@capacitor/core": "^5.0.4", "@capacitor/dialog": "^5.0.2", @@ -33,7 +34,7 @@ "@vueuse/core": "^10.1.2", "crypto-js": "^4.1.1", "cytoscape": "^3.25.0", - "daisyui": "^3.0.2", + "daisyui": "^3.0.3", "date-fns": "^2.29.3", "dompurify": "^3.0.2", "file-saver": "^2.0.5", @@ -124,6 +125,30 @@ "node": ">=6.0.0" } }, + "node_modules/@capacitor-firebase/authentication": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@capacitor-firebase/authentication/-/authentication-5.0.0.tgz", + "integrity": "sha512-Dj41lzpMyvB5IzoGxrs7RCi8JZUblTZSzs8c/LdF34V7OVq1SqIX4kejtW6DawUJRbZE43xAe3DMNtusYxLaCg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/capawesome-team/" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/capawesome" + } + ], + "peerDependencies": { + "@capacitor/core": "^5.0.0", + "firebase": "^9.0.0" + }, + "peerDependenciesMeta": { + "firebase": { + "optional": true + } + } + }, "node_modules/@capacitor/android": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-5.0.4.tgz", @@ -4812,9 +4837,9 @@ } }, "node_modules/daisyui": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.2.tgz", - "integrity": "sha512-0X+0PkgTIWevt5m4AZCCgvqI5pKRormTEhdfmc31dwfLNq6uY4wENCXAtcXzZMKt7JBKcVTWlj/uDrOjj6XpUQ==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.3.tgz", + "integrity": "sha512-RSbXsEBj2LonvjOKEI0I64F5xFJrFrthPgxRNeAZKmACQ3NoIoP45lO6UXLW3bm8PVOUGpKf1Br2SWwc1NqnHQ==", "dependencies": { "colord": "^2.9", "css-selector-tokenizer": "^0.8", @@ -13278,6 +13303,12 @@ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz", "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==" }, + "@capacitor-firebase/authentication": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@capacitor-firebase/authentication/-/authentication-5.0.0.tgz", + "integrity": "sha512-Dj41lzpMyvB5IzoGxrs7RCi8JZUblTZSzs8c/LdF34V7OVq1SqIX4kejtW6DawUJRbZE43xAe3DMNtusYxLaCg==", + "requires": {} + }, "@capacitor/android": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-5.0.4.tgz", @@ -16776,9 +16807,9 @@ } }, "daisyui": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.2.tgz", - "integrity": "sha512-0X+0PkgTIWevt5m4AZCCgvqI5pKRormTEhdfmc31dwfLNq6uY4wENCXAtcXzZMKt7JBKcVTWlj/uDrOjj6XpUQ==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.3.tgz", + "integrity": "sha512-RSbXsEBj2LonvjOKEI0I64F5xFJrFrthPgxRNeAZKmACQ3NoIoP45lO6UXLW3bm8PVOUGpKf1Br2SWwc1NqnHQ==", "requires": { "colord": "^2.9", "css-selector-tokenizer": "^0.8", diff --git a/package.json b/package.json index a9b3276..80d299c 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "deploy": "npm run build && firebase deploy --only hosting:contexted-v3" }, "dependencies": { + "@capacitor-firebase/authentication": "^5.0.0", "@capacitor/android": "^5.0.4", "@capacitor/core": "^5.0.4", "@capacitor/dialog": "^5.0.2", @@ -40,7 +41,7 @@ "@vueuse/core": "^10.1.2", "crypto-js": "^4.1.1", "cytoscape": "^3.25.0", - "daisyui": "^3.0.2", + "daisyui": "^3.0.3", "date-fns": "^2.29.3", "dompurify": "^3.0.2", "file-saver": "^2.0.5", diff --git a/src/App.vue b/src/App.vue index c437639..2048f4e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,8 +11,7 @@ import { import { initializeSettings } from '@/composables/useSettings' import { windowIsMobile } from '@/utils/helpers' import SideBar from '@/components/SideBar.vue' -import firebase from 'firebase/compat/app' -import * as firebaseui from 'firebaseui' +// import firebase from 'firebase/compat/app' import { useWindowSize } from '@vueuse/core' initializeSettings() @@ -26,9 +25,9 @@ watch(width, () => (sideBarCollapsed.value = windowIsMobile())) // const ListView = defineAsyncComponent(() => import('@/components/ViewModes/ListView.vue')) // const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindmap.vue')) -const firebaseAuthUI = - firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth()) -provide('firebaseAuthUI', firebaseAuthUI) +// const firebaseAuthUI = +// firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth()) +// provide('firebaseAuthUI', firebaseAuthUI) watch( [activeNotesSource, encryptionKey], diff --git a/src/components/Auth.vue b/src/components/Auth.vue index 402c634..4183f85 100644 --- a/src/components/Auth.vue +++ b/src/components/Auth.vue @@ -2,6 +2,13 @@ import firebase from 'firebase/compat/app' import 'firebase/compat/auth' import 'firebaseui/dist/firebaseui.css' +import * as firebaseui from 'firebaseui' +import { + FirebaseAuthentication, + type SignInOptions, + type SignInResult, + type SignInWithOAuthOptions +} from '@capacitor-firebase/authentication' const props = defineProps<{ authenticating?: boolean @@ -11,12 +18,16 @@ const emit = defineEmits<{ signedIn: [authResult: any] }>() -const ui: any = inject('firebaseAuthUI') +// const ui: any = inject('firebaseAuthUI') +const firebaseAuthUI = + firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth()) + + const uiConfig = { signInOptions: [ - firebase.auth.EmailAuthProvider.PROVIDER_ID, - firebase.auth.GoogleAuthProvider.PROVIDER_ID + firebase.auth.EmailAuthProvider.PROVIDER_ID + // firebase.auth.GoogleAuthProvider.PROVIDER_ID ], // signInFlow: 'popup', signInFlow: 'redirect', @@ -39,12 +50,67 @@ const uiConfig = { } // Other config options... } -onMounted(() => ui.start('#auth', uiConfig)) +// onMounted(() => ui.start('#auth', uiConfig)) + +interface Provider { + name: 'google' | 'microsoft' | 'github' + icon: string + auth: (options?: SignInOptions) => Promise +} + +const providers: Provider[] = [ + { + name: 'google', + icon: 'fa-brands fa-google', + auth: FirebaseAuthentication.signInWithGoogle + }, + { + name: 'microsoft', + icon: 'fa-brands fa-microsoft', + auth: FirebaseAuthentication.signInWithMicrosoft + }, + { + name: 'github', + icon: 'fa-brands fa-github', + auth: FirebaseAuthentication.signInWithGithub + } +] +// type Provider = (typeof providers)[number] +const signInWithProvider = async (provider: Provider) => { + const signInOptions: SignInWithOAuthOptions = { + mode: 'redirect' + } + await provider.auth(signInOptions) +} + +const signingInWithEmail = ref(false) +const signInWithEmail = () => { + firebaseAuthUI.start('#auth', uiConfig) + signingInWithEmail.value = true +} diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue index 8842dfd..cb70a71 100644 --- a/src/components/TopBar.vue +++ b/src/components/TopBar.vue @@ -21,12 +21,12 @@ const emit = defineEmits<{ const searchActive = ref(false) -const authUI: any = inject('firebaseAuthUI') -const authPending = ref(authUI.isPendingRedirect()) +// const authUI: any = inject('firebaseAuthUI') +// const authPending = ref(authUI.isPendingRedirect()) const handleSignIn = async (close: () => Promise) => { await close() - authPending.value = false + // authPending.value = false }