register

email authentication

.gitignore

+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

App.js

+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import React, { useState,useEffect } from "react";
+import {firebase}from './config';
+
+import Login from './src/Login';
+import Registration from './src/Registration';
+import Home from './src/Home';
+import Header from './components/Header';
+
+
+
+
+
+const  Stack = createStackNavigator();
+
+function App () {
+    const [initializing,setInitializing]=useState(true);
+    const [user,setUser]=useState();
+
+    function onAuthStateChanged(user){
+        setUser(user);
+        if(initializing) setInitializing(false);
+    }
+
+    useEffect(() => {
+        const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
+        return subscriber;
+},[]);
+
+if (initializing) return null;
+
+if (!user) {
+    return (
+            <Stack.Navigator>
+                <Stack.Screen
+
+                    name="Login"
+                    component={Login}
+                    options={{
+                        headerTitle: () => <Header name='Login'/>,
+                        headerStyle: {
+                            height: 150,
+                            backgroundColor: '#FED36A',
+                            shadowColor: '#8caab9',
+                            elevation:20
+                            
+                        }
+                    }}
+                />
+
+        <Stack.Screen
+             name="Registration"
+            component={Registration}
+            options={{
+             headerTitle: () => <Header name='Register'/>,
+                  headerStyle: {
+                  height: 150,
+                  backgroundColor: '#FED36A',
+                  shadowColor: '#8caab9',
+                  elevation:20
+                }
+            }}
+       />
+        </Stack.Navigator>  
+            
+       );
+
+    }
+
+    return(
+        <Stack.Navigator>
+            <Stack.Screen
+                name="Home"
+                component={Home}
+                options={{
+                    headerTitle: () => <Header name='Home'/>,
+                    headerStyle: {
+                        height: 150,
+                        backgroundColor: '#FED36A',
+                        shadowColor: '#8caab9',
+                        elevation:25
+                        
+                    }
+                }}
+            />
+
+        </Stack.Navigator>
+    );
+}
+
+export default() => {
+    return (
+        <NavigationContainer>
+            <App />
+        </NavigationContainer>
+    );
+}

app.json

+{
+  "expo": {
+    "name": "mind-guru",
+    "slug": "mind-guru",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/Header.js

+import { View, Text  } from 'react-native'
+import React from 'react'
+
+const Header = (props) => {
+  return (
+    <View style={{marginLeft:10}}>
+
+      <Text style={{fontWeight:'bold' , fontSize:28}}>{props.name}</Text>
+    </View>
+  )
+}
+
+
+
+export default Header
\ No newline at end of file

config.js

+// fire base config key setup
+
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+import 'firebase/compat/firestore';
+
+// web app firebase configaration 
+const firebaseConfig ={
+    apiKey: "AIzaSyAQKtsGSe8-nADaB1pL9iSdY73DMu074e4",
+    authDomain: "mind-guru-74ca7.firebaseapp.com",
+    projectId: "mind-guru-74ca7",
+    storageBucket: "mind-guru-74ca7.appspot.com",
+    messagingSenderId: "213774517544",
+    appId: "1:213774517544:web:619b12ca84509a6f63bc1d",
+    measurementId: "G-635Z5VLN1E"
+  
+  }
+  
+  if (!firebase.apps.length){
+      firebase.initializeApp(firebaseConfig);
+  
+  }
+  
+  export{firebase};
\ No newline at end of file

package.json

+{
+  "name": "mind-guru",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^13.0.0",
+    "@react-native-firebase/app": "^18.8.0",
+    "@react-navigation/native": "^6.1.10",
+    "@react-navigation/stack": "^6.3.21",
+    "expo": "50.0.7",
+    "expo-image-picker": "^14.7.1",
+    "expo-status-bar": "~1.11.1",
+    "firebase": "^10.8.0",
+    "react": "18.2.0",
+    "react-native": "0.73.4",
+    "react-native-gesture-handler": "2.14.0",
+    "react-native-safe-area-context": "4.8.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

src/Home.js

+import { Text,StyleSheet,SafeAreaView,TouchableOpacity } from 'react-native'
+import React , {useState,useEffect} from 'react'
+  import {firebase} from '../config'
+
+const Home = () => {
+  const [name,setName] =useState('')
+
+  useEffect(() =>{
+    firebase.firestore().collection('users')
+    .doc(firebase.auth().currentUser.uid).get()
+    .then((snapshot) =>{
+      if(snapshot.exists) {
+       setName(snapshot.data())
+     }
+     else{
+       console.log('User does not exist')
+     }
+  })
+
+},[])
+
+return(
+  <SafeAreaView style={styles.container}>
+    <Text style={{fontSize:20,fontWeight:'bold'}}>
+      Hello {name.firstName}{name.lastName}
+    </Text>
+
+    <Text style={{fontSize:20,fontWeight:'bold',alignContent:'center'}}>
+      welcome to my mobile application
+    </Text>
+
+    <TouchableOpacity
+    onPress={() => {firebase.auth().signOut()}}
+    style={styles.button}
+    >
+
+       <Text style={{fontSize:22,fontWeight:'bold'}}>
+         Sign Out
+       </Text>
+    </TouchableOpacity>
+  </SafeAreaView>
+)
+
+}
+
+
+export default Home
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 100,
+
+  },
+  button: {
+    marginTop: 50, 
+    height:70,
+    width:250,
+    backgroundColor: '#026efd',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 50,
+  }
+})
\ No newline at end of file

src/Login.js

+import { View, Text,TouchableOpacity,TextInput,StyleSheet,Image} from 'react-native'
+import React,{useState} from 'react'
+import { useNavigation } from '@react-navigation/native'
+import { firebase} from '../config'
+
+const Login = () => {
+  const navigation = useNavigation();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+
+ // Placeholder for login
+  loginUser = async (email,password) => {
+    try{
+      await firebase.auth().signInWithEmailAndPassword(email,password);
+      navigation.navigate('Home');// Navigate to the Profile screen after login
+    }catch(error){
+         alert(error.message);
+    }
+  }
+  // forget password
+  const forgetPassword = () => {
+
+    firebase.auth().sendPasswordResetEmail(email)
+  .then(() => {
+       alert('Password reset link sent to your email')
+     })
+  .catch((error) =>{
+       alert(error.message)
+     })
+  }
+
+  return (
+    <View style={styles.container}>
+     <Image
+        source={require("../assets/logo.jpg")} // Replace with the actual path to your logo
+        style={{ width: 200, height: 200 ,borderRadius:50 }}
+      />
+      <Text style={styles.separat}>Welcome !</Text>
+      
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          placeholderTextColor="#FFF"
+          autoCorrect={false}
+          onChangeText={(email) => setEmail(email)}
+          keyboardType="email-address"
+          autoCapitalize="none"
+        />
+        </View>
+
+        <View style={styles.inputContainer}>
+     
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        placeholderTextColor="#FFF"
+        value={password}
+        onChangeText={(password) => setPassword(password)}
+        secureTextEntry
+        autoCapitalize="none"
+      />
+      </View>
+        
+      <TouchableOpacity  // forgetPassword
+       onPress={() => {forgetPassword()}}
+       style={{marginTop:20}}
+      >
+        <Text style={{fontWeight: 'bold', fontSize:16,marginBottom: 20,}}>
+          Forget Password?
+        </Text>
+      </TouchableOpacity>
+     
+
+     <TouchableOpacity 
+     style={styles.button} onPress={() => loginUser(email, password)}>
+        <Text style={styles.buttonText}>Log In</Text>
+      </TouchableOpacity>
+     
+      <TouchableOpacity onPress={() => navigation.navigate("Registration")}>
+        <Text style={styles.signUpText}>Don’t have an account?Register Now</Text>
+      </TouchableOpacity>
+    </View>
+  
+  );
+
+};
+
+export default Login
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#8caab9",
+    alignItems: "center",
+    justifyContent: "center",
+    
+  },
+  separat: {
+    color: "#FFF",
+    fontSize: 30,
+    fontWeight: "bold",
+    marginBottom: 20,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  icon: {
+    marginRight: 5,
+  },
+
+
+
+  profileImage: {
+    width: 50, // Adjust the size as needed
+    height: 100,
+    borderRadius: 100, // Half of width/height to make it round
+    marginBottom: 20,
+  },
+  logo: {
+    width: 200, // Set the width of your logo
+    height: 100, // Set the height of your logo
+    resizeMode: "contain", // This will ensure that your logo maintains its aspect ratio
+    marginBottom: 30,
+  },
+  input: {
+    height: 50,
+    width: "90%",
+    backgroundColor: "#1b3f51",
+    color: "#FFF",
+    borderRadius: 5,
+    borderWidth: 1,
+    padding: 10,
+    marginBottom: 10,
+  },
+  button: {
+    height: 50,
+    width: "90%",
+    backgroundColor: "yellow",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: "#1b3f51",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  separator: {
+    color: "#FFF",
+    marginVertical: 20,
+  },
+  
+  
+  signUpText: {
+    color: "#FFF",
+    fontSize: 16,
+  },
+});

src/Registration.js

+import { View, Text ,TouchableOpacity,TextInput,StyleSheet,Alert,Image,} from 'react-native'
+import React,{useState} from 'react'
+import {firebase} from '../config'
+
+
+const Registration = () => {
+  const [email,setEmail]=useState('')
+  const [password,setPassword]=useState('')
+  const [firstName,setFirstName]=useState('')
+  const [lastName,setLastName]=useState('')
+  
+
+  registerUser= async (email,password,firstName,lastName) => {
+    await firebase.auth().createUserWithEmailAndPassword(email,password)
+    .then(() => {
+        firebase.auth().currentUser.sendEmailVerification({
+          handleCodeInApp: true,
+          url:"https://mind-guru-74ca7.firebaseapp.com",
+       })
+       .then(() => {
+           Alert('Verification link sent to your email')
+       }).catch((error) =>{
+        Alert(error.message)
+       })
+       .then(() => {
+        firebase.firestore().collection('users')
+        .doc(firebase.auth().currentUser.uid)
+        .set({
+            email,
+            firstName,
+            lastName,
+        })
+       })
+       .catch(error => {
+        Alert(error.message)
+       })
+    })
+    .catch(error => {
+        Alert(error.message)
+    })
+  
+}
+return (
+
+  <View style={styles.container}>
+
+<Image
+        source={require("../assets/logo.jpg")} // Replace with the actual path to your logo
+        style={styles.logo}
+      />
+
+      <Text style={{fontWeight:'bold','fontSize':23}}>
+        Register Here!
+      </Text>
+      
+      <Text style={styles.title}>Create Your Account</Text>
+
+        <TextInput
+         style={styles.textInput}
+         placeholder="First Name"
+         placeholderTextColor="#FFF"
+         onChangeText={(firstName) => setFirstName(firstName)}
+         autoCapitalize="words"
+         autoCorrect={false}
+/>
+<TextInput
+        style={styles.textInput}
+        placeholder="Last Name"
+        placeholderTextColor="#FFF"
+        onChangeText={(lastName) => setLastName(lastName)}
+        autoCapitalize="words"
+        autoCorrect={false}
+      />
+
+<TextInput
+        style={styles.textInput}
+        placeholder="Email"
+        placeholderTextColor="#FFF"
+        onChangeText={(email) => setEmail(email)}
+        autoCapitalize="none"
+        keyboardType="email-address"
+        autoCorrect={false}
+      />
+
+      <TextInput
+        style={styles.textInput}
+        placeholder="Password"
+        placeholderTextColor="#FFF"
+        value={password}
+        onChangeText={(password) => setPassword(password)}
+        secureTextEntry
+        autoCapitalize="none"
+      />
+
+      <TouchableOpacity 
+      style={styles.button} 
+      onPress={() => registerUser(email,password,firstName,lastName)}
+        >
+         <Text style={styles.buttonText}>Register</Text>
+      </TouchableOpacity>
+
+   </View>
+)
+}
+
+export default Registration
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#8caab9",
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 5,
+  },
+  textInput: {
+    height: 50,
+    width: "90%",
+    backgroundColor: "#1b3f51",
+    color: "#FFF",
+    borderRadius: 5,
+    borderWidth: 1,
+    padding: 10,
+    marginBottom: 10,
+
+  },
+  button: {
+    height: 50,
+    width: "90%",
+    backgroundColor: "yellow",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5,
+  },
+
+  logo: {
+    width: 200, // Set the width of your logo
+    height: 100, // Set the height of your logo
+    resizeMode: "contain", // This will ensure that your logo maintains its aspect ratio
+    marginBottom: 20,
+  }
+})
\ No newline at end of file