From 00e6c206d05c21475d57da9ad30327fe7630155f Mon Sep 17 00:00:00 2001 From: Yevhenii Lukashov <115802889+EuJinnLucaShow@users.noreply.github.com> Date: Fri, 25 Aug 2023 22:01:55 +0300 Subject: [PATCH] Persisting authentication state --- FirebaseConfig.js | 18 +- package-lock.json | 168 ++++++++++++------- package.json | 8 +- src/components/Main.js | 6 +- src/redux/auth/authOperations.js | 128 ++++++++++---- src/redux/auth/authReducer.js | 36 ++-- src/redux/store.js | 15 +- src/screens/auth/LoginScreen.js | 4 +- src/screens/auth/RegistrationScreen.js | 4 +- src/screens/mainScreens/CreatePostsScreen.js | 25 ++- src/screens/mainScreens/ProfileScreen.js | 4 +- 11 files changed, 279 insertions(+), 137 deletions(-) diff --git a/FirebaseConfig.js b/FirebaseConfig.js index d13a4a0..e241669 100644 --- a/FirebaseConfig.js +++ b/FirebaseConfig.js @@ -1,7 +1,8 @@ -import firebase from 'firebase/compat/app'; -import 'firebase/compat/auth'; -import 'firebase/compat/database'; -import 'firebase/compat/storage'; +import { initializeApp } from 'firebase/app'; +import { getFirestore } from 'firebase/firestore'; +import { getStorage } from 'firebase/storage'; +import { initializeAuth, getReactNativePersistence } from 'firebase/auth'; +import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage'; const firebaseConfig = { apiKey: 'AIzaSyBe9QUzhoIEVFB69Rqt8mMbjUwRxjO9KKg', @@ -12,6 +13,11 @@ const firebaseConfig = { appId: '1:868623960717:web:e1dfe1b9f383dc100db0c4', }; -firebase.initializeApp(firebaseConfig); +const app = initializeApp(firebaseConfig); -export default firebase; +export const auth = initializeAuth(app, { + persistence: getReactNativePersistence(ReactNativeAsyncStorage), +}); + +export const db = getFirestore(app); +export const storage = getStorage(app); diff --git a/package-lock.json b/package-lock.json index 613fe48..990f04d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "android-app", "version": "1.0.0", "dependencies": { - "@react-native-async-storage/async-storage": "1.18.2", + "@react-native-async-storage/async-storage": "^1.18.2", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", @@ -22,15 +22,17 @@ "expo-location": "~16.1.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", - "firebase": "^10.2.0", + "firebase": "^10.3.0", "react": "18.2.0", "react-native": "0.72.4", + "react-native-get-random-values": "^1.9.0", "react-native-maps": "^1.7.1", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-vector-icons": "^10.0.0", "react-redux": "^8.1.2", - "redux-persist": "^6.0.0" + "redux-persist": "^6.0.0", + "uuid": "^9.0.0" }, "devDependencies": { "@babel/core": "^7.20.0" @@ -3321,9 +3323,9 @@ "integrity": "sha512-iRP+QKI2+oz3UAh4nPEq14CsEjrjD6a5+fuypjScisAh9kXKFvdJOZJDwk7kikLvWVLGEs9+kIUS4LPQV7VZVw==" }, "node_modules/@firebase/app": { - "version": "0.9.16", - "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.16.tgz", - "integrity": "sha512-J6O8+khJpunlKITbcO1lKylPJp9nlyI5Ra/NlPcMHwP37uTJXJqz6sjmWp4MUfTWo/3T2N0lXUdf4UBXjrnleQ==", + "version": "0.9.17", + "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.17.tgz", + "integrity": "sha512-jBEGJ3km90M6sAc2O0baScDs0JAD1gGvZo7AniNVg06kvmaj+KEfGOaASwhlHNvIE2sYrOBqgobZADgaiYp5KQ==", "dependencies": { "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", @@ -3373,11 +3375,11 @@ "integrity": "sha512-uwSUj32Mlubybw7tedRzR24RP8M8JUVR3NPiMk3/Z4bCmgEKTlQBwMXrehDAZ2wF+TsBq0SN1c6ema71U/JPyQ==" }, "node_modules/@firebase/app-compat": { - "version": "0.2.16", - "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.16.tgz", - "integrity": "sha512-jCIJ5lGYLidM/cP25XqyTkg2caJRrnfjLkgk2ItJD9k2W3V1jB1TlmNYOAHtNsPZXB4/y5qBkS+/NxvFD3iJyA==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.17.tgz", + "integrity": "sha512-1vtnLdxe7lXN5jtv5hUpoKsHPvE56YUgelxmpY/OA1JELIH9ATBv/dsbDvSnsiaRkoQz/4F4B3iMma0JdxlIQA==", "dependencies": { - "@firebase/app": "0.9.16", + "@firebase/app": "0.9.17", "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", "@firebase/util": "1.9.3", @@ -3390,27 +3392,32 @@ "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==" }, "node_modules/@firebase/auth": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.2.0.tgz", - "integrity": "sha512-nRtpmVXGmUi6JuTNXp8XVQ9K52gjXJ4LK2mszAE1Wk/R+bQ/7a4ncSs7M8aqyYPZR/BhWAMJIcC/Q7EXV7vzIQ==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.3.0.tgz", + "integrity": "sha512-vjK4CHbY9aWdiVOrKi6mpa8z6uxeaf7LB/MZTHuZOiGHMcUoTGB6TeMbRShyqk1uaMrxhhZ5Ar/dR0965E1qyA==", "dependencies": { "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", "@firebase/util": "1.9.3", - "@react-native-async-storage/async-storage": "^1.18.1", "node-fetch": "2.6.7", "tslib": "^2.1.0" }, "peerDependencies": { - "@firebase/app": "0.x" + "@firebase/app": "0.x", + "@react-native-async-storage/async-storage": "^1.18.1" + }, + "peerDependenciesMeta": { + "@react-native-async-storage/async-storage": { + "optional": true + } } }, "node_modules/@firebase/auth-compat": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.4.5.tgz", - "integrity": "sha512-pCJiiCRrjlrjVYlw0NuZhT+P6jnl1J3hAgNr+74z9zh3k888pbhMRGYVxACGoAbmVnnU3w8locR1aUNGrIyCDA==", + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.4.6.tgz", + "integrity": "sha512-pKp1d4fSf+yoy1EBjTx9ISxlunqhW0vTICk0ByZ3e+Lp6ZIXThfUy4F1hAJlEafD/arM0oepRiAh7LXS1xn/BA==", "dependencies": { - "@firebase/auth": "1.2.0", + "@firebase/auth": "1.3.0", "@firebase/auth-types": "0.12.0", "@firebase/component": "0.6.4", "@firebase/util": "1.9.3", @@ -3518,14 +3525,14 @@ } }, "node_modules/@firebase/firestore": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.1.1.tgz", - "integrity": "sha512-PYTdHdQBE6nL+IoKnjV5rw18b06VxMbnYD1ToUf+1l5MUfAVJJgi8v8CdO2u+sUgwMu7uppYJhNLDNY5JMU8ow==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.1.2.tgz", + "integrity": "sha512-PZkXw2yfVcKgVvsd1rohOJ27bJz/p+TccwdraMgE701eDAj5xccGPmCVvMfFq0nz+BmQVuD5wUUVBBRMVCGOfw==", "dependencies": { "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", "@firebase/util": "1.9.3", - "@firebase/webchannel-wrapper": "0.10.1", + "@firebase/webchannel-wrapper": "0.10.2", "@grpc/grpc-js": "~1.8.17", "@grpc/proto-loader": "^0.7.8", "node-fetch": "2.6.7", @@ -3539,12 +3546,12 @@ } }, "node_modules/@firebase/firestore-compat": { - "version": "0.3.15", - "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.15.tgz", - "integrity": "sha512-MBi/t3QEuK6efNoYtx2e4rRvywzQi/xA4Lw7OA7knOKIKGl5QAj9oPdMY2KQ1dTS0ejtRpjO2a8iJ7v49vmJZQ==", + "version": "0.3.16", + "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.16.tgz", + "integrity": "sha512-+UsOsLLtFLIU1fGjFZE6BL3LzEwknkrzv/U3ZcNk/C6cKcThuGBu53yZ6gxW9S7o1GUFiIey86HQi8kwdcAVZA==", "dependencies": { "@firebase/component": "0.6.4", - "@firebase/firestore": "4.1.1", + "@firebase/firestore": "4.1.2", "@firebase/firestore-types": "3.0.0", "@firebase/util": "1.9.3", "tslib": "^2.1.0" @@ -3865,9 +3872,9 @@ } }, "node_modules/@firebase/webchannel-wrapper": { - "version": "0.10.1", - "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.1.tgz", - "integrity": "sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw==" + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.2.tgz", + "integrity": "sha512-xDxhD9++451HuCv3xKBEdSYaArX9NcokODXZYH/MxGw1XFFOz7OKkTRItZ5wf6npBN/inwp8dUZCP7SpAg46yQ==" }, "node_modules/@gar/promisify": { "version": "1.1.3", @@ -3895,13 +3902,12 @@ } }, "node_modules/@grpc/proto-loader": { - "version": "0.7.8", - "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.8.tgz", - "integrity": "sha512-GU12e2c8dmdXb7XUlOgYWZ2o2i+z9/VeACkxTA/zzAe2IjclC5PnVL0lpgjhrqfpDYHzM8B1TF6pqWegMYAzlA==", + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.9.tgz", + "integrity": "sha512-YJsOehVXzgurc+lLAxYnlSMc1p/Gu6VAvnfx0ATi2nzvr0YZcjhmZDeY8SeAKv1M7zE3aEJH0Xo9mK1iZ8GYoQ==", "dependencies": { - "@types/long": "^4.0.1", "lodash.camelcase": "^4.3.0", - "long": "^4.0.0", + "long": "^5.0.0", "protobufjs": "^7.2.4", "yargs": "^17.7.2" }, @@ -6818,11 +6824,6 @@ "@types/istanbul-lib-report": "*" } }, - "node_modules/@types/long": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz", - "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==" - }, "node_modules/@types/node": { "version": "20.4.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.9.tgz", @@ -8807,6 +8808,15 @@ "expo": "*" } }, + "node_modules/expo-constants/node_modules/uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", + "bin": { + "uuid": "bin/uuid" + } + }, "node_modules/expo-file-system": { "version": "15.4.3", "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.3.tgz", @@ -8818,6 +8828,15 @@ "expo": "*" } }, + "node_modules/expo-file-system/node_modules/uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", + "bin": { + "uuid": "bin/uuid" + } + }, "node_modules/expo-font": { "version": "11.4.0", "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-11.4.0.tgz", @@ -9002,6 +9021,20 @@ "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.6.0.tgz", "integrity": "sha512-e//Oi2WPdomMlMDD3skE4+1ZarKCJ/suvcB4Jo/nO427niKug5oppcPNYO+csR6y3ZglGuypS+3pp/hJ+Xp6fQ==" }, + "node_modules/expo/node_modules/uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", + "bin": { + "uuid": "bin/uuid" + } + }, + "node_modules/fast-base64-decode": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz", + "integrity": "sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q==" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -9211,23 +9244,23 @@ } }, "node_modules/firebase": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.2.0.tgz", - "integrity": "sha512-pmegHB73xrZFNR02nvBxLbxM5+9Z0njimf+7uCjjEDVW7ZNdhhTgFpB0qecqpJ5uGKy6Tkavzc8LfcGkNpPgjg==", + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.3.0.tgz", + "integrity": "sha512-1dy6KqAvGlnFUEFE+IaHQNygG/4v1OwB5KVIC/G1/qwbHEFws0FVHe3n/aRZ+Oo0tINO9s2Lim496p9wprMbNQ==", "dependencies": { "@firebase/analytics": "0.10.0", "@firebase/analytics-compat": "0.2.6", - "@firebase/app": "0.9.16", + "@firebase/app": "0.9.17", "@firebase/app-check": "0.8.0", "@firebase/app-check-compat": "0.3.7", - "@firebase/app-compat": "0.2.16", + "@firebase/app-compat": "0.2.17", "@firebase/app-types": "0.9.0", - "@firebase/auth": "1.2.0", - "@firebase/auth-compat": "0.4.5", + "@firebase/auth": "1.3.0", + "@firebase/auth-compat": "0.4.6", "@firebase/database": "1.0.1", "@firebase/database-compat": "1.0.1", - "@firebase/firestore": "4.1.1", - "@firebase/firestore-compat": "0.3.15", + "@firebase/firestore": "4.1.2", + "@firebase/firestore-compat": "0.3.16", "@firebase/functions": "0.10.0", "@firebase/functions-compat": "0.3.5", "@firebase/installations": "0.6.4", @@ -11276,9 +11309,9 @@ } }, "node_modules/long": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz", - "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==" + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz", + "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==" }, "node_modules/loose-envify": { "version": "1.4.0", @@ -13221,9 +13254,9 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/protobufjs": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.4.tgz", - "integrity": "sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==", + "version": "7.2.5", + "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.5.tgz", + "integrity": "sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==", "hasInstallScript": true, "dependencies": { "@protobufjs/aspromise": "^1.1.2", @@ -13243,11 +13276,6 @@ "node": ">=12.0.0" } }, - "node_modules/protobufjs/node_modules/long": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz", - "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==" - }, "node_modules/pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -13489,6 +13517,17 @@ "react-native": "*" } }, + "node_modules/react-native-get-random-values": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.9.0.tgz", + "integrity": "sha512-+29IR2oxzxNVeaRwCqGZ9ABadzMI8SLTBidrIDXPOkKnm5+kEmLt34QKM4JV+d2usPErvKyS85le0OmGTHnyWQ==", + "dependencies": { + "fast-base64-decode": "^1.0.0" + }, + "peerDependencies": { + "react-native": ">=0.56" + } + }, "node_modules/react-native-maps": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.7.1.tgz", @@ -15014,12 +15053,11 @@ } }, "node_modules/uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", - "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", "bin": { - "uuid": "bin/uuid" + "uuid": "dist/bin/uuid" } }, "node_modules/valid-url": { diff --git a/package.json b/package.json index c3b8ce1..d921e9a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "web": "expo start --web" }, "dependencies": { - "@react-native-async-storage/async-storage": "1.18.2", + "@react-native-async-storage/async-storage": "^1.18.2", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", @@ -23,15 +23,17 @@ "expo-location": "~16.1.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", - "firebase": "^10.2.0", + "firebase": "^10.3.0", "react": "18.2.0", "react-native": "0.72.4", + "react-native-get-random-values": "^1.9.0", "react-native-maps": "^1.7.1", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-vector-icons": "^10.0.0", "react-redux": "^8.1.2", - "redux-persist": "^6.0.0" + "redux-persist": "^6.0.0", + "uuid": "^9.0.0" }, "devDependencies": { "@babel/core": "^7.20.0" diff --git a/src/components/Main.js b/src/components/Main.js index 214544c..9d7042a 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -2,15 +2,15 @@ import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { NavigationContainer } from '@react-navigation/native'; import { UseRoute } from '../../router'; -import { authStateChange } from '../redux/auth/authOperations'; +import { authStateChangeUser } from '../redux/auth/authOperations'; const Main = () => { const { stateChange } = useSelector(state => state.auth); - console.log(stateChange); + const dispatch = useDispatch(); useEffect(() => { - dispatch(authStateChange()); + dispatch(authStateChangeUser()); }, []); const routing = UseRoute(stateChange); diff --git a/src/redux/auth/authOperations.js b/src/redux/auth/authOperations.js index 149d734..226cf7d 100644 --- a/src/redux/auth/authOperations.js +++ b/src/redux/auth/authOperations.js @@ -1,59 +1,119 @@ -import db from '../../../FirebaseConfig'; +import { Alert } from 'react-native'; +import { + createUserWithEmailAndPassword, + signInWithEmailAndPassword, + onAuthStateChanged, + updateProfile, + signOut, +} from 'firebase/auth'; + +import { auth } from '../../../FirebaseConfig'; import { authSlice } from './authReducer'; -const { updateUserProfile, authStateChangeUser, authSingOut } = +const { updateUserProfile, authStateChange, updateUserAvatar, authSignOut } = authSlice.actions; -export const authSingUp = - ({ login, email, password }) => +export const authSignUpUser = + ({ email, password, name, userAvatar }) => async (dispatch, getState) => { try { - await db.auth().createUserWithEmailAndPassword(email, password); - const user = await db.auth().currentUser; - - await user.updateProfile({ displayName: login }); + await createUserWithEmailAndPassword(auth, email, password); + const user = auth.currentUser; - const { uid, displayName } = await db.auth().currentUser; + await updateProfile(user, { displayName: name, photoURL: userAvatar }); - const userUpdateProfile = { - userId: uid, - login: displayName, - }; + const { uid, displayName, photoURL } = user; - dispatch(updateUserProfile(userUpdateProfile)); + dispatch( + updateUserProfile({ + userId: uid, + name: displayName, + email, + avatar: photoURL, + }) + ); } catch (error) { - console.log(error.message); + const errorCode = error.code; + + if (errorCode == 'auth/weak-password') { + Alert.alert('The password is too weak'); + } + if (errorCode == 'auth/email-already-in-use') { + Alert.alert('Already exists an account with the given email address'); + } + if (errorCode == 'auth/invalid-email') { + Alert.alert('Email address is not valid and it is required'); + } else { + throw error; + } } }; -export const authSingIn = +export const authSignInUser = ({ email, password }) => async (dispatch, getState) => { + console.log('credential: ', email, password); try { - const user = await db.auth().signInWithEmailAndPassword(email, password); - console.log(user); + await signInWithEmailAndPassword(auth, email, password); } catch (error) { - console.log(error.message); + const errorCode = error.code; + + if (errorCode === 'auth/wrong-password') { + Alert.alert('Password is invalid for the given email'); + } + if (errorCode === 'auth/user-not-found') { + Alert.alert('No user corresponding to the given email'); + } + if (errorCode === 'auth/user-disabled') { + Alert.alert('User corresponding to the given email has been disabled'); + } + if (errorCode === 'auth/invalid-email') { + Alert.alert('Email address is not valid and it`s required'); + } else { + throw error; + } } }; -export const authStateChange = () => async (dispatch, getState) => { - await db.auth().onAuthStateChanged(user => { - console.log(user); - if (user) { - const userUpdateProfile = { - userId: user.uid, - login: user.displayName, - }; - dispatch(updateUserProfile(userUpdateProfile)); - dispatch(authStateChangeUser({ stateChange: true })); - } else { - console.log('user is not logged in'); +export const authStateChangeUser = () => async dispatch => { + await onAuthStateChanged(auth, user => { + try { + if (user) { + const userUpdateProfile = { + userId: user.uid, + name: user.displayName, + email: user.email, + avatar: user.photoURL, + }; + + dispatch(authStateChange({ stateChange: true })); + dispatch(updateUserProfile(userUpdateProfile)); + } + } catch (error) { + signOut(auth); + dispatch(authSignOut()); + throw error; } }); }; -export const authSingOutUser = () => async (dispatch, getState) => { - await db.auth().signOut(); - dispatch(authSingOut()); +export const changeAvatarUser = newAvatarURL => async (dispatch, getState) => { + const user = auth.currentUser; + + if (user !== null) { + await updateProfile(user, { + photoURL: newAvatarURL, + }); + } + dispatch(updateUserAvatar({ avatar: newAvatarURL })); +}; + +export const authSignOutUser = () => async (dispatch, getState) => { + try { + await signOut(auth); + dispatch(authSignOut()); + } catch (error) { + Alert.alert(error.message); + throw error; + } }; diff --git a/src/redux/auth/authReducer.js b/src/redux/auth/authReducer.js index 1bad3e8..f319d7f 100644 --- a/src/redux/auth/authReducer.js +++ b/src/redux/auth/authReducer.js @@ -2,23 +2,33 @@ import { createSlice } from '@reduxjs/toolkit'; const state = { userId: null, - login: null, + name: null, + email: null, stateChange: false, + userAvatar: null, +}; + +const actions = { + updateUserProfile: (state, { payload }) => ({ + ...state, + userId: payload.userId, + name: payload.name, + email: payload.email, + userAvatar: payload.avatar, + }), + updateUserAvatar: (state, { payload }) => ({ + ...state, + userAvatar: payload.avatar, + }), + authStateChange: (state, { payload }) => ({ + ...state, + stateChange: payload.stateChange, + }), + authSignOut: () => state, }; export const authSlice = createSlice({ name: 'auth', initialState: state, - reducers: { - updateUserProfile: (state, { payload }) => ({ - ...state, - userId: payload.userId, - login: payload.login, - }), - authStateChangeUser: (state, { payload }) => ({ - ...state, - stateChange: payload.stateChange, - }), - authSingOut: () => state, - }, + reducers: actions, }); diff --git a/src/redux/store.js b/src/redux/store.js index 9e5a014..fd9cad9 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -1,6 +1,13 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit'; - import { authSlice } from './auth/authReducer'; +import { + FLUSH, + REHYDRATE, + PAUSE, + PERSIST, + PURGE, + REGISTER, +} from 'redux-persist'; const rootReducer = combineReducers({ [authSlice.name]: authSlice.reducer, @@ -8,4 +15,10 @@ const rootReducer = combineReducers({ export const store = configureStore({ reducer: rootReducer, + middleware: getDefaultMiddleware => + getDefaultMiddleware({ + serializableCheck: { + ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], + }, + }), }); diff --git a/src/screens/auth/LoginScreen.js b/src/screens/auth/LoginScreen.js index 5e035cb..ca1addb 100644 --- a/src/screens/auth/LoginScreen.js +++ b/src/screens/auth/LoginScreen.js @@ -14,7 +14,7 @@ import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; -import { authSingIn } from '../../redux/auth/authOperations'; +import { authSignInUser } from '../../redux/auth/authOperations'; const wallpaper = require('../../assets/images/wallpaper.png'); @@ -32,7 +32,7 @@ export default function LoginScreen({ navigation }) { const handleSubmit = () => { setIsShowKeybord(false); Keyboard.dismiss(); - dispatch(authSingIn(state)); + dispatch(authSignInUser(state)); setState(initialState); }; diff --git a/src/screens/auth/RegistrationScreen.js b/src/screens/auth/RegistrationScreen.js index 8eccce2..e212a3c 100644 --- a/src/screens/auth/RegistrationScreen.js +++ b/src/screens/auth/RegistrationScreen.js @@ -14,7 +14,7 @@ import { } from 'react-native'; import { useDispatch } from 'react-redux'; -import { authSingUp } from '../../redux/auth/authOperations'; +import { authSignInUser } from '../../redux/auth/authOperations'; const wallpaper = require('../../assets/images/wallpaper.png'); @@ -33,7 +33,7 @@ export default function RegistrationScreen({ navigation }) { const handleSubmit = () => { setIsShowKeyboard(false); Keyboard.dismiss(); - dispatch(authSingUp(state)); + dispatch(authSignInUser(state)); setState(initialState); }; diff --git a/src/screens/mainScreens/CreatePostsScreen.js b/src/screens/mainScreens/CreatePostsScreen.js index e24116f..8fc351b 100644 --- a/src/screens/mainScreens/CreatePostsScreen.js +++ b/src/screens/mainScreens/CreatePostsScreen.js @@ -14,6 +14,9 @@ import { Camera } from 'expo-camera'; import * as Location from 'expo-location'; import { FontAwesome, Feather, SimpleLineIcons } from '@expo/vector-icons'; +import { storage } from '../../../FirebaseConfig'; +import { getDownloadURL, ref, uploadBytes } from 'firebase/storage'; + export default function CreatePostsScreen({ navigation }) { const [camera, setCamera] = useState(null); const [photo, setPhoto] = useState(null); @@ -33,18 +36,28 @@ export default function CreatePostsScreen({ navigation }) { }; const sendPhoto = () => { + uploadPhotoToServer(); navigation.navigate('Posts', { photo, location }); clearData(); }; const uploadPhotoToServer = async () => { const response = await fetch(photo); - const blob = await response.blob(); - const ref = firebase - .storage() - .ref() - .child('images/' + photo); - return ref.put(blob); + const file = await response.blob(); + + const uniqueImageId = Date.now().toString(); + const path = `images/${uniqueImageId}.jpeg`; + + const storageRef = ref(storage, path); + + const metadata = { + contentType: 'image/jpeg', + }; + + await uploadBytes(storageRef, file, metadata); + + const downloadPhoto = await getDownloadURL(storageRef); + return downloadPhoto; }; useEffect(() => { diff --git a/src/screens/mainScreens/ProfileScreen.js b/src/screens/mainScreens/ProfileScreen.js index d03c090..4e776cb 100644 --- a/src/screens/mainScreens/ProfileScreen.js +++ b/src/screens/mainScreens/ProfileScreen.js @@ -10,12 +10,12 @@ import { import React from 'react'; import { useDispatch } from 'react-redux'; import { Feather, AntDesign } from '@expo/vector-icons'; -import { authSingOutUser } from '../../redux/auth/authOperations'; +import { authSignOutUser } from '../../redux/auth/authOperations'; export default function ProfileScreen() { const dispatch = useDispatch(); const singOut = () => { - dispatch(authSingOutUser()); + dispatch(authSignOutUser()); }; return (