Firebase Authentication

Create firebase.js File

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "***************************",
  authDomain:"***************************",
  projectId: "***************************",
  storageBucket: "***************************",
  messagingSenderId: "***************************",
  appId: "***************************",
  measurementId: "*************",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { app, db };

Create useAuthentication.js

import React, { useEffect, useState } from "react";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { app } from "../config/Firebase";

const auth = getAuth(app);

const useAuthentication = () => {
  const [user, setUser] = useState();

  useEffect(() => {
    const unsubscribeFromAuthStatuChanged = onAuthStateChanged(auth, (user) => {
      if (user) {
        setUser(user);
        console.log(user);
      } else {
        setUser();
      }
    });
    return unsubscribeFromAuthStatuChanged;
  }, []);

  return user;
};

export default useAuthentication;

App.js

import React from "react";
import { NativeBaseProvider, extendTheme } from "native-base";
import { NavigationContainer } from "@react-navigation/native";

import AuthNavigator from "./src/navigation/AuthNavigator";
import useAuthentication from "./src/api/useAuthentication";
import AppNavigator from "./src/navigation/AppNavigator";

// Define the config
const config = {
  useSystemColorMode: false,
  initialColorMode: "dark",
};

// extend the theme
export const theme = extendTheme({ config });

export default function App() {
  const user = useAuthentication();
  return (
    <NativeBaseProvider>
      <NavigationContainer>
        {!user ? <AuthNavigator /> : <AppNavigator />}
      </NavigationContainer>
    </NativeBaseProvider>
  );
}

AuthNavigator.jsx

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import LoginScreen from "../screen/LoginScreen";
import SignupScreen from "../screen/SignupScreen";
import WelcomeScreen from "../screen/WelcomeScreen";

const Stack = createNativeStackNavigator();

const AuthNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Welcome"
      component={WelcomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen name="Login" component={LoginScreen} />
    <Stack.Screen name="Register" component={SignupScreen} />
  </Stack.Navigator>
);

export default AuthNavigator;

LoginScreen.js

import React, { useState } from "react";
import { Box, Button, Center, Input, Text } from "native-base";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
import { app } from "../config/Firebase";

const auth = getAuth(app);

const LoginScreen = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = async () => {
    try {
      const result = await signInWithEmailAndPassword(auth, email, password);
      if (result) console.log("SUCCESS");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Box>
      <Center>
        <Text>Login Screen</Text>
        <Input
          width={200}
          placeholder="email"
          onChangeText={(text) => setEmail(text)}
        />
        <Input
          width={200}
          placeholder="password"
          type="password"
          onChangeText={(text) => setPassword(text)}
        />
        <Button m="2" maxW={200} onPress={() => handleLogin()}>
          Login
        </Button>
      </Center>
    </Box>
  );
};

export default LoginScreen;