Signing out of a profile using Firebase methods

FirebaseConfig.js

@@ -0,0 +1,15 @@
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyBe9QUzhoIEVFB69Rqt8mMbjUwRxjO9KKg',
+  authDomain: 'web-app-b581f.firebaseapp.com',
+  projectId: 'web-app-b581f',
+  storageBucket: 'web-app-b581f.appspot.com',
+  messagingSenderId: '868623960717',
+  appId: '1:868623960717:web:e1dfe1b9f383dc100db0c4',
+};
+
+firebase.initializeApp(firebaseConfig);
+
+export default firebase;

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('@expo/metro-config');
+
+const defaultConfig = getDefaultConfig(__dirname);
+defaultConfig.resolver.assetExts.push('cjs');
+
+module.exports = defaultConfig;

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@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",
@@ -24,12 +25,13 @@
     "expo-status-bar": "~1.6.0",
     "firebase": "^10.2.0",
     "react": "18.2.0",
-    "react-native": "0.72.3",
+    "react-native": "0.72.4",
     "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"
+    "react-redux": "^8.1.2",
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

router.js

@@ -27,6 +27,7 @@ export const UseRoute = isAuth => {
       </AuthStack.Navigator>
     );
   }
+
   return (
     <MainTab.Navigator
       screenOptions={{

src/components/Main.js

@@ -6,7 +6,7 @@ import { authStateChange } from '../redux/auth/authOperations';
 
 const Main = () => {
   const { stateChange } = useSelector(state => state.auth);
-
+  console.log(stateChange);
   const dispatch = useDispatch();
 
   useEffect(() => {

src/redux/auth/authOperations.js

@@ -1,6 +1,9 @@
-import db from '../../firebase/config';
+import db from '../../../FirebaseConfig';
 import { authSlice } from './authReducer';
 
+const { updateUserProfile, authStateChangeUser, authSingOut } =
+  authSlice.actions;
+
 export const authSingUp =
   ({ login, email, password }) =>
   async (dispatch, getState) => {
@@ -17,7 +20,7 @@ export const authSingUp =
         login: displayName,
       };
 
-      dispatch(authSlice.actions.updateUserProfile(userUpdateProfile));
+      dispatch(updateUserProfile(userUpdateProfile));
     } catch (error) {
       console.log(error.message);
     }
@@ -42,12 +45,15 @@ export const authStateChange = () => async (dispatch, getState) => {
         userId: user.uid,
         login: user.displayName,
       };
-      dispatch(authSlice.actions.updateUserProfile(userUpdateProfile));
-      dispatch(authSlice.actions.authStateChange({ stateChange: true }));
+      dispatch(updateUserProfile(userUpdateProfile));
+      dispatch(authStateChangeUser({ stateChange: true }));
     } else {
       console.log('user is not logged in');
     }
   });
 };
 
-const authSingOut = () => async (dispatch, getState) => {};
+export const authSingOutUser = () => async (dispatch, getState) => {
+  await db.auth().signOut();
+  dispatch(authSingOut());
+};

src/redux/auth/authReducer.js

@@ -1,21 +1,24 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+const state = {
+  userId: null,
+  login: null,
+  stateChange: false,
+};
+
 export const authSlice = createSlice({
   name: 'auth',
-  initialState: {
-    userId: null,
-    login: null,
-    stateChange: null,
-  },
+  initialState: state,
   reducers: {
     updateUserProfile: (state, { payload }) => ({
       ...state,
       userId: payload.userId,
       login: payload.login,
     }),
-    authStateChange: (state, { payload }) => ({
+    authStateChangeUser: (state, { payload }) => ({
       ...state,
       stateChange: payload.stateChange,
     }),
+    authSingOut: () => state,
   },
 });

src/screens/mainScreens/ProfileScreen.js

@@ -8,9 +8,16 @@ import {
   Image,
 } from 'react-native';
 import React from 'react';
+import { useDispatch } from 'react-redux';
 import { Feather, AntDesign } from '@expo/vector-icons';
+import { authSingOutUser } from '../../redux/auth/authOperations';
 
 export default function ProfileScreen() {
+  const dispatch = useDispatch();
+  const singOut = () => {
+    dispatch(authSingOutUser());
+  };
+
   return (
     <ImageBackground style={styles.imageBackground}>
       <View style={styles.container}>
@@ -21,7 +28,11 @@ export default function ProfileScreen() {
           </TouchableOpacity>
         </View>
         <Text style={styles.title}>Natali Romanova</Text>
-        <TouchableOpacity style={styles.logoutButton} activeOpacity={0.5}>
+        <TouchableOpacity
+          style={styles.logoutButton}
+          activeOpacity={0.5}
+          onPress={singOut}
+        >
           <Feather name="log-out" size={25} color="gray" />
         </TouchableOpacity>