├── .gitignore
├── App.js
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── icon.png
    └── splash.png
├── babel.config.js
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 2 | 
 3 | # dependencies
 4 | node_modules/
 5 | 
 6 | # Expo
 7 | .expo/
 8 | dist/
 9 | web-build/
10 | 
11 | # Native
12 | *.orig.*
13 | *.jks
14 | *.p8
15 | *.p12
16 | *.key
17 | *.mobileprovision
18 | 
19 | # Metro
20 | .metro-health-check*
21 | 
22 | # debug
23 | npm-debug.*
24 | yarn-debug.*
25 | yarn-error.*
26 | 
27 | # macOS
28 | .DS_Store
29 | *.pem
30 | 
31 | # local env files
32 | .env*.local
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { View, Text, TextInput, Button, StyleSheet, ScrollView } from 'react-native';
  3 | import { initializeApp } from '@firebase/app';
  4 | import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut } from '@firebase/auth';
  5 | 
  6 | 
  7 | const firebaseConfig = {
  8 |   apiKey: "YOUR - apiKey",
  9 |   authDomain: "YOUR - authDomain",
 10 |   projectId: "YOUR - projectId",
 11 |   storageBucket: "YOUR - storageBucket",
 12 |   messagingSenderId: "YOUR - messagingSenderId",
 13 |   appId: "YOUR - appId",
 14 |   measurementId: "YOUR - measurementId"
 15 | };
 16 | 
 17 | const app = initializeApp(firebaseConfig);
 18 | 
 19 | const AuthScreen = ({ email, setEmail, password, setPassword, isLogin, setIsLogin, handleAuthentication }) => {
 20 |   return (
 21 |     <View style={styles.authContainer}>
 22 |        <Text style={styles.title}>{isLogin ? 'Sign In' : 'Sign Up'}</Text>
 23 | 
 24 |        <TextInput
 25 |         style={styles.input}
 26 |         value={email}
 27 |         onChangeText={setEmail}
 28 |         placeholder="Email"
 29 |         autoCapitalize="none"
 30 |       />
 31 |       <TextInput
 32 |         style={styles.input}
 33 |         value={password}
 34 |         onChangeText={setPassword}
 35 |         placeholder="Password"
 36 |         secureTextEntry
 37 |       />
 38 |       <View style={styles.buttonContainer}>
 39 |         <Button title={isLogin ? 'Sign In' : 'Sign Up'} onPress={handleAuthentication} color="#3498db" />
 40 |       </View>
 41 | 
 42 |       <View style={styles.bottomContainer}>
 43 |         <Text style={styles.toggleText} onPress={() => setIsLogin(!isLogin)}>
 44 |           {isLogin ? 'Need an account? Sign Up' : 'Already have an account? Sign In'}
 45 |         </Text>
 46 |       </View>
 47 |     </View>
 48 |   );
 49 | }
 50 | 
 51 | 
 52 | const AuthenticatedScreen = ({ user, handleAuthentication }) => {
 53 |   return (
 54 |     <View style={styles.authContainer}>
 55 |       <Text style={styles.title}>Welcome</Text>
 56 |       <Text style={styles.emailText}>{user.email}</Text>
 57 |       <Button title="Logout" onPress={handleAuthentication} color="#e74c3c" />
 58 |     </View>
 59 |   );
 60 | };
 61 | export default App = () => {
 62 |   const [email, setEmail] = useState('');
 63 |   const [password, setPassword] = useState('');
 64 |   const [user, setUser] = useState(null); // Track user authentication state
 65 |   const [isLogin, setIsLogin] = useState(true);
 66 | 
 67 |   const auth = getAuth(app);
 68 |   useEffect(() => {
 69 |     const unsubscribe = onAuthStateChanged(auth, (user) => {
 70 |       setUser(user);
 71 |     });
 72 | 
 73 |     return () => unsubscribe();
 74 |   }, [auth]);
 75 | 
 76 |   
 77 |   const handleAuthentication = async () => {
 78 |     try {
 79 |       if (user) {
 80 |         // If user is already authenticated, log out
 81 |         console.log('User logged out successfully!');
 82 |         await signOut(auth);
 83 |       } else {
 84 |         // Sign in or sign up
 85 |         if (isLogin) {
 86 |           // Sign in
 87 |           await signInWithEmailAndPassword(auth, email, password);
 88 |           console.log('User signed in successfully!');
 89 |         } else {
 90 |           // Sign up
 91 |           await createUserWithEmailAndPassword(auth, email, password);
 92 |           console.log('User created successfully!');
 93 |         }
 94 |       }
 95 |     } catch (error) {
 96 |       console.error('Authentication error:', error.message);
 97 |     }
 98 |   };
 99 | 
100 |   return (
101 |     <ScrollView contentContainerStyle={styles.container}>
102 |       {user ? (
103 |         // Show user's email if user is authenticated
104 |         <AuthenticatedScreen user={user} handleAuthentication={handleAuthentication} />
105 |       ) : (
106 |         // Show sign-in or sign-up form if user is not authenticated
107 |         <AuthScreen
108 |           email={email}
109 |           setEmail={setEmail}
110 |           password={password}
111 |           setPassword={setPassword}
112 |           isLogin={isLogin}
113 |           setIsLogin={setIsLogin}
114 |           handleAuthentication={handleAuthentication}
115 |         />
116 |       )}
117 |     </ScrollView>
118 |   );
119 | }
120 | const styles = StyleSheet.create({
121 |   container: {
122 |     flexGrow: 1,
123 |     justifyContent: 'center',
124 |     alignItems: 'center',
125 |     padding: 16,
126 |     backgroundColor: '#f0f0f0',
127 |   },
128 |   authContainer: {
129 |     width: '80%',
130 |     maxWidth: 400,
131 |     backgroundColor: '#fff',
132 |     padding: 16,
133 |     borderRadius: 8,
134 |     elevation: 3,
135 |   },
136 |   title: {
137 |     fontSize: 24,
138 |     marginBottom: 16,
139 |     textAlign: 'center',
140 |   },
141 |   input: {
142 |     height: 40,
143 |     borderColor: '#ddd',
144 |     borderWidth: 1,
145 |     marginBottom: 16,
146 |     padding: 8,
147 |     borderRadius: 4,
148 |   },
149 |   buttonContainer: {
150 |     marginBottom: 16,
151 |   },
152 |   toggleText: {
153 |     color: '#3498db',
154 |     textAlign: 'center',
155 |   },
156 |   bottomContainer: {
157 |     marginTop: 20,
158 |   },
159 |   emailText: {
160 |     fontSize: 18,
161 |     textAlign: 'center',
162 |     marginBottom: 20,
163 |   },
164 | });


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "firebase_auth_tutorial",
 4 |     "slug": "firebase_auth_tutorial",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "assetBundlePatterns": [
15 |       "**/*"
16 |     ],
17 |     "ios": {
18 |       "supportsTablet": true
19 |     },
20 |     "android": {
21 |       "adaptiveIcon": {
22 |         "foregroundImage": "./assets/adaptive-icon.png",
23 |         "backgroundColor": "#ffffff"
24 |       }
25 |     },
26 |     "web": {
27 |       "favicon": "./assets/favicon.png"
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cebraiil/firebase_auth_tutorial/859b1b0e6d9502635bd589e7ff700ef941ca1fe5/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cebraiil/firebase_auth_tutorial/859b1b0e6d9502635bd589e7ff700ef941ca1fe5/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cebraiil/firebase_auth_tutorial/859b1b0e6d9502635bd589e7ff700ef941ca1fe5/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Cebraiil/firebase_auth_tutorial/859b1b0e6d9502635bd589e7ff700ef941ca1fe5/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "firebase_auth_tutorial",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web"
10 |   },
11 |   "dependencies": {
12 |     "@react-native-firebase/app": "^18.7.3",
13 |     "@react-native-firebase/auth": "^18.7.3",
14 |     "expo": "~49.0.15",
15 |     "expo-status-bar": "~1.6.0",
16 |     "firebase": "^10.7.1",
17 |     "react": "18.2.0",
18 |     "react-native": "0.72.6"
19 |   },
20 |   "devDependencies": {
21 |     "@babel/core": "^7.20.0"
22 |   },
23 |   "private": true
24 | }
25 | 


--------------------------------------------------------------------------------