DEV Community: Balogh Botond

Facebook Authentication with Firebase in React Native (Android)

Balogh Botond — Wed, 17 Jan 2024 12:36:45 +0000

This guide provides a comprehensive walkthrough for integrating Facebook Login with Firebase in an Android React Native application.

Prerequisites
Introduction
Installing the Facebook SDK
Configuring Firebase
Configuring Facebook
Facebook SDK Configuration
Coding the Authentication Process
Logging Out
Conclusion

Prerequisites

To follow this guide, you should have:

Basic knowledge of React and React Native
A React Native environment set up
Firebase project and Facebook Developer account

Introduction

Facebook Login integration provides a convenient and secure way for users to log into your app. It not only streamlines the user experience but also leverages the robust security infrastructure of Facebook. This guide will help you set it up step-by-step.

Installing the Facebook SDK

To integrate Facebook authentication in your React Native application, the first step is to install the Facebook SDK. This SDK provides the necessary tools and functions to facilitate Facebook Login in your app. To install the SDK, run the following command in your project's root directory:



npm install react-native-fbsdk-next

It is a React Native wrapper around the Facebook SDK. It simplifies integrating Facebook services into your application. After installation, you can use the various functionalities provided by the SDK, including Facebook Login.

For more details about this package check the npm site.

Configuring Firebase

To enable Facebook authentication in your React Native application, you need to configure your Firebase project to support Facebook login. Follow these steps:

Go to the Firebase Console: Navigate to the Firebase Console and select your project.
Access Authentication Settings: From the Firebase project dashboard, go to Authentication > Sign-in method.
Add New Provider: Click on Add new provider and select Facebook from the list of available providers.
Enable Facebook Authentication: Enable Facebook as a sign-in provider and input the App ID and App Secret.
- The App ID and App Secret are obtained from your Facebook Developer account, associated with the Facebook app you've set up for authentication. See the next step!

Configuring Facebook

For integrating Facebook Login, you need to set up an app in your Facebook Developer account. Follow these guidelines:

Create a Facebook Developer Account: If you don't have one already, create a Facebook Developer account at Facebook Developers.
Create a New App: Go to Facebook Apps, and create a new app. Select the appropriate use case, typically Authenticate and request data from users with Facebook.
Configure Your App: Copy and paste the App Id, and App Secret to the Firebase console as mentioned in the Configuring Firebase part and copy and paste the OAuth Redirect URIs to the Facebook dashboard.
- Find the App ID in the top right corner of the dashboard.
- Obtain the App Secret from App Settings > Basic.
- Configure OAuth Redirect URIs in the Facebook Login settings under Use cases > Customize > Settings. You can add the necessary permission at the Use cases > Customize like email or user profile. It depends on the need of your application to know what permissions to request.
Save the Changes: save changes on both platforms, Facebook and Firebase.

Facebook SDK Configuration

This section of the guide will walk you through the necessary steps to update your Facebook SDK Configuration effectively.

Steps 1,3,4,5,6 needed to be taken. Step 2 is managed by the react-native-fbsdk-next node package and the rest is not related to this. Step 7 allows the user to log into the app by pressing a push notification which is not relevant now.

Step 1: Select an app or create a new app
By now you should have the app in the Facebook dashboard, so just select the one in which you want to implement Facebook authentication.

Step 3: Integrate the Facebook SDK

Updating build.gradle (Project Level)
It's essential to make sure your project's build.gradle file includes mavenCentral() in the repositories section. This is usually included by default, but it's always good to check.



buildscript {
    repositories {
        // other repositories
        mavenCentral() // Ensure this is included
    }
    // rest of the buildscript
}

Updating build.gradle (Module: app)
Next, you need to add the Facebook login dependency to your app module's build.gradle file.



dependencies {
    // other dependencies
    implementation 'com.facebook.android:facebook-login:latest.release'
}

Step 4: Edit Your Resources and Manifest
Update your strings.xml file with the necessary Facebook credentials. These are crucial for the SDK to function correctly. If facebookAppId is 12345 then the fbLoginProtocolScheme is fb12345.



<string name="facebook_app_id">yourFacebookAppId</string>
<string name="fb_login_protocol_scheme">fbYourFacebookAppId</string>
<string name="facebook_client_token">yourFacebookClientToken</string>

The AndroidManifest.xml requires internet permission and specific meta-data about ApplicationId and ClientToken for Facebook integration. Finally, add the specific activities as provided in the example.



<uses-permission android:name="android.permission.INTERNET"/>

<application android:label="@string/app_name" ...>
    <!-- other meta-data -->
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
    <!-- other activities -->
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>
</application>

Step 5: Associate Your Package Name and Default Class with Your App
React Native doesn't include the package name in the default AndroidManifest.xml. However, you can find it in the build.gradle(app) file as applicationId "com.codeplayground". For the Default Activity Class Name, use thepackagename.MainActivity. You'll find the MainActivity file at android/app/src/main/java/com/yourAppName/MainActivity.kt, but no further action is required with this file for now.

Step 6: Provide Development and Release Key Hashes for Your App
Generating key hashes for your app. Follow the detailed instructions provided in the Facebook documentation. Once you have created the hashes, paste them into the Key Hashes field in your Facebook Developer account and save the changes.

Coding the Authentication Process

To set up the authentication process, follow these steps:

Install React Native Firebase SDK:



   npm install @react-native-firebase/app
   npm install @react-native-firebase/auth

Create firebase.js:
In your project root, create a file named firebase.js:



   import firebase from '@react-native-firebase/app';

   // Basic Firebase configuration
   const firebaseConfig = {
     apiKey: process.env.API_KEY,
     authDomain: process.env.AUTH_DOMAIN,
     projectId: process.env.PROJECT_ID,
     storageBucket: process.env.STORAGE_BUCKET,
     messagingSenderId: process.env.MESSAGING_SENDER_ID,
     appId: process.env.APP_ID,
     measurementId: process.env.MEASUREMENT_ID
   };

   // Initialize Firebase
   if (!firebase.apps.length) {
       await firebase.initializeApp(firebaseConfig);
   }

Configure Build Settings:
In build.gradle (app), add:



   apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

   defaultConfig {
       // ...
       resValue "string", "facebook_app_id", project.env.get("FACEBOOK_APP_ID")
       resValue "string", "fb_login_protocol_scheme", project.env.get("FB_LOGIN_PROTOCOL_SCHEME")
       resValue "string", "facebook_client_token", project.env.get("FACEBOOK_CLIENT_TOKEN")
   }

   dependencies {
       // ...
       implementation 'com.facebook.android:facebook-login:latest.release'
   }

Register App with Firebase:
Follow the steps to register your app with Firebase:
Firebase App Registration Guide

Create Facebook Login Button:
Create a custom component FacebookLoginButton:



   import React from 'react';
import { LoginButton, AccessToken } from 'react-native-fbsdk-next';
import auth from '@react-native-firebase/auth';
import { useNavigation } from '@react-navigation/native';

const FacebookLoginButton = () => {
  const navigation = useNavigation();

  const handleFacebookLogin = async () => {
    try {
        // Once signed in, get the user AccessToken
        const data = await AccessToken.getCurrentAccessToken();

        if (!data) {
            throw 'Something went wrong obtaining access token';
        }

        // Create a Firebase credential with the AccessToken
        const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);
        const userCredential = await auth().signInWithCredential(facebookCredential);
        console.log('User signed in with Facebook!', userCredential.user);
        navigation.navigate('Home');
    } catch (error) {
        console.log('Facebook login or Firebase credential failed:', error);
    }
  };

  return (
    <LoginButton
      onLoginFinished={handleFacebookLogin}
      onLogoutFinished={() => console.log("logout.")}/>
  );
};

export default FacebookLoginButton;

Add FacebookLoginButton to the Login page.



import FacebookLoginButton from '../components/FacebookLoginButton';

...
  return (
    <View>
      ...
      <FacebookLoginButton />
    </View>
  );

Start your application on your device or simulator and try it out. Pressing the Facebook button should navigate to Facebook authentication and back after successful authentication. It is up to you how to handle the successful login. In my case, the app navigates to the Home.js, but to improve a useLayoutEffect could be used for more smooth animation.
Source: Firebase Authentication with Social Providers

Logging Out

After logging in you want the user to be able to log out as well. Besides logging out the user by the Firebase signOut function, also Facebook logout must be implemented by the LoginManager::



import auth from '@react-native-firebase/auth';
import { LoginManager } from 'react-native-fbsdk-next';

const handleLogout = () => {
  auth().signOut().then(() => {
    // Log out from Facebook
    LoginManager.logOut();
  }).catch((error) => {
    Alert.alert('Logout Failed', error.message);
  });
};

Facebook authentication in Hungarian

The user is logged in by Facebook.

Conclusion

By following these steps, users can seamlessly log in and log out using Facebook in your React Native Android application. In the Facebook developer dashboard, you can customize what information to ask for from the user while logging in with Facebook.

Check out the final code here.
The IOS version is coming soon. Let me know your thoughts on this article. Which third party do you prefer for authentication?

Thank you for reading.
More about the author at LUNitECH

The article was written with the help of existing documentation, ChatGPT, Grammarly, and other human beings.

Cleaning Your Git History: Safely Removing Sensitive Data

Balogh Botond — Tue, 19 Dec 2023 19:23:01 +0000

Introduction
Understanding git filter-branch
Step-by-Step Guide

Introduction

While working on integrating third-party API into my project, I made a critical mistake in software development. I accidentally committed my API keys directly in a configuration file, rather than using a .env file that is part of the .gitignore. My repository was still private, but with plans to go public, I needed to remove this information from the git history.

How to remove the commits containing the sensitive information from my history? After some research, I decided to use the git filter-branch command. In the end, it worked as it was expected. I did not lose anything else from my git history only the commits related to the certain config file and the config file itself which I had to recreate with the help of a backup branch.

Whether you're a seasoned developer or new to the realm of version control, this guide will provide a clear, step-by-step approach to ensure to remove safely commits from a branch that are related to a specific file.

Git filter-branch

About git filter-branch, it is a powerful and yet dangerous tool of git. It allows you to modify your commit history in various ways, such as changing commit messages, author details, or, as in my case, removing commits that contain sensitive information like API keys. It works by filtering the entire branch history, committing anew based on the changes you specify.

Please use it with caution. It can lead to data loss or discrepancies in your project's history. It's recommended to use this tool in a controlled environment (like a private repository) and ensure you have complete backups of your data before proceeding. Furthermore, if you're working in a team, coordinating with your colleagues is essential to avoid conflicts or data inconsistencies once the history is altered. Check the documentation and especially safety information before using it. Git filter-branch documentation

Step-by-Step Guide

The branch I was working on was named secret_keys in which I committed and pushed the secret_key in the config.js file. That’s where the trouble begins… I did not realise it for a while so many other commits had been pushed to the repo.

First, I added the .env to my .gitignore and pushed it to the repo. After that, I created the .env file which is not part of the version history, and added the secret key to that file from my config.js I referred to the .env file instead of hardcoding the secret key in the config.js file itself.

In this situation, the secret key is available in the version control. I must get rid of this. Here comes the git filter-branch command. But first, let me create a backup branch for safety: secret_key_backup.

Then I opened a terminal in my project, and made sure that I was on the desired branch:



git checkout secret_keys

Output:



Switched to branch 'secret_keys'
Your branch is up to date with 'origin/secret_keys'.

Here you can see the main commits that must be removed for safety

Next, I ran the git filter-branch command:



git filter-branch --force --index-filter "git rm --cached --ignore-unmatch file_containing_secret_keys.js" --prune-empty --tag-name-filter cat -- branch_name_containing_commits_to_remove

git filter-branch: Initiates the process of rewriting the git history.
--force: Forces the rewrite of history, necessary if you've already run filter-branch before. Overrides the safety checks to prevent overwriting existing backups.
--index-filter: Specifies a filter to rewrite the index at each revision.
"git rm --cached --ignore-unmatch file_containing_secret_keys.js": The command that --index-filter runs for each commit.
- git rm --cached: Removes the specified file from the index (staging area) but not from the working directory.
- --ignore-unmatch: Prevents errors if the file isn't found in a particular commit.
- file_containing_secret_keys.js: The specific file you want to remove from your history.
--prune-empty: Tells git filter-branch to remove commits that become empty after the filter has been applied.
--tag-name-filter cat: This filter is applied to tag names that point to rewritten commits. cat just keeps the original tag name.
--: Separator that clarifies the end of the options and the beginning of the branch specification.
branch_name_containing_commits_to_remove: Specifies the branch whose history you want to rewrite.

This command is tailored to remove a specific file from the history of a given branch, eliminating all references to that file in your commits.

In my case:



git filter-branch --force --index-filter "git rm --cached --ignore-unmatch config.js" --prune-empty --tag-name-filter cat -- secret_keys

Output:



**WARNING**: git-filter-branch has a glut of gotchas generating mangled history rewrites. Hit Ctrl-C before proceeding to abort, then use an alternative filtering tool such as 'git filter-repo' (https://github.com/newren/git-filter-repo/) instead. See the filter-branch manual page for more details; to squelch this warning, set FILTER_BRANCH_SQUELCH_WARNING=1.

Proceeding with filter-branch...

Rewrite a3a48b09e282854c80bf4ad02a017e249e161fd8 (2/8) (0 seconds passed, remaining 0 predicted)    rm 'config.js'
Rewrite 6e788e83a338e45b348d93d682b32c816ee2fbff (3/8) (0 seconds passed, remaining 0 predicted)    rm 'config.js'
Rewrite 7a378a0145bce70bea213ca5f9062138544db5f2 (4/8) (0 seconds passed, remaining 0 predicted)    rm 'config.js'
Rewrite 0637c9659623644cfceb35be10f2a1fe5c468e04 (5/8) (0 seconds passed, remaining 0 predicted)    rm 'config.js'
Rewrite 6c421eb99adc6b987cff7f3cada31e9313638072 (6/8) (0 seconds passed, remaining 0 predicted)    rm 'config.js'
Rewrite 98001e5b97270efa4a8ab5bd0452be56dd76883d (7/8) (0 seconds passed, remaining 0 predicted)    rm 'config.js'
Rewrite 2ca4e161a4af2b8f38c46faf848fdbb3e550f23c (8/8) (0 seconds passed, remaining 0 predicted)    rm 'config.js'

Ref 'refs/heads/secret_keys' was rewritten.

In the image, you can see 2 commits left, as the placeholder commits I made were related to the config.js so they were removed as well. If I pull the repo then I would get back to the previous state so the deleted commits can be retrieved from the repo at this point. It will create a merge commit which you could push back and then all your commits would be restored, but we want them to be deleted so do not do that unless you want to play around a bit.

To apply the modification, you need to force push:



git push origin branch_name_containing_commits_to_remove --force

Proceed with caution!
Once you force push this modification, there is NO RETURN!

In my case:



git push origin secret_keys --force

Output:



Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 293 bytes | 293.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/Balogh08/GitFilterBranch.git
 + 2ca4e16...e61bbd2 secret_keys -> secret_keys (forced update)

And abracadabra, the commits and the file which once contained the sensitive information are now removed.

Next, we need to replace the file without the sensitive information. For this, we can use the backup branch to copy the content of config.js and create a new config.js in the branch without the sensitive commits. Then, paste the content from the backup branch. If you did not publish the backup branch, then you can easily delete it. However, if you published it, you must go through the same process with git filter-branch on the backup branch, but without creating a second backup for the backup. Simply deleting the branch from the remote repository is not safe enough, as the keys to the commits containing sensitive information would remain somewhere in the source control system.

What are your thoughts on this solution? What alternatives do you prefer, like git filter-repo? Let me know in the comments.

More about the author at LUNitECH

The article was written with the help of existing documentation, ChatGPT, Grammarly, and other human beings.

Email Authentication with Firebase in React Native for iOS and Android

Balogh Botond — Wed, 13 Dec 2023 16:13:23 +0000

This post aims to provide a comprehensive guide on implementing email authentication in a React Native application using Firebase. As of December 2023, I leverage some of the latest packages and methodologies to build a secure and efficient authentication system. My main goal is to practice writing clear and effective instructional guides, which others and I can use later. The article was written with the help of existing documentation, AI tools like ChatGPT and Grammarly - I’m not sure if it uses AI yet, probably yes - and other human beings.

Table of content

Prerequisites
Development Stack
Setting Up the React Native Environment
Setting Up Firebase for Email Authentication
Structuring the React Native Project
Signup
Logout
Login
Conditional Navigation Based on Authentication State
Additional Features and Improvements
Sources

Prerequisites

To get the most out of this tutorial, you should have a fundamental understanding of React and React Native, familiarity with npm for package management, and experience with Git for version control. The guide assumes a working knowledge of these technologies, allowing us to focus on the specific task of integrating Firebase for authentication purposes.

Development Stack

npm: 10.1.
Node.js: v20.9.0
Watchman: 2023.10.30.00
Visual Studio Code (VSCode): 1.85.0
Xcode: 14.2
Android Studio: Android Studio Giraffe | 2022.3.1
Java: Version 17
React Native: 0.73.0
React Native CLI: removed as the official react-native doc suggests it
Firebase: 10.7.1

Setting Up the React Native Environment

You can follow the instructions specific to your development OS and target OS: RN documentation

Make sure you carefully follow the guide for both iOS and Android. Make sure you have installed the correct version of npm, node, Xcode, android studio, android SDKs, java, etc.

Initializing the React Native Project

To create a new project, run:

npx react-native@latest init CodePlayground

After successful initialization, you should see a series of steps being completed, including template downloading, dependency installation, and potentially CocoaPods setup for iOS.

Testing the Setup

It's a good practice to test the setup on both iOS and Android platforms. Navigate to your project directory:

cd CodePlayground

Run the default app on both simulators to confirm everything is set up correctly:

npm start

Then, press i to run on iOS and a to run on Android.
Note that sometimes an initial build might fail, particularly if specific SDKs or configurations are missing. In such cases, open Xcode for iOS and Android Studio for Android to build the app once and ensure all necessary components are installed.
After making sure everything works properly so far, use your favorite version control like git to keep track of changes. (Optional)

Setting Up Firebase for Email Authentication

Start a New Project: Navigate to the Firebase Console and start a new project. Enter a project name and accept the default settings.
Project Creation: While Firebase prepares your project, take a brief coffee break! Your new Firebase environment will be ready shortly.
Enable Email/Password Sign-In Method: In your Firebase project, go to the Authentication section and enable the 'Email/Password' sign-in provider. This step is crucial for email-based user authentication.
Register a Web App: To obtain the necessary credentials, add a web application to your Firebase project. Provide a nickname for your app and follow the setup instructions.
Install Firebase in Your Project: Run npm install firebase in your project directory to add Firebase SDK.
Initialize Firebase with Configuration: Create a firebase.js file in your project root. Add the following code with your specific configuration

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// 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: "A….”,
  authDomain: "cod….”,
  projectId: "cod…”,
  storageBucket: "cod…”,
  messagingSenderId: "47…”,
  appId: "1:475…”,
  measurementId: “G…”
}

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

7.Use Environment Variables: For security, store your Firebase configuration in a .env file at the root of your project. Add this file to .gitignore to keep your keys safe and out of version control.

Add to your .gitignore

# Environment variables
.env

Create .env in your root

API_KEY=A…8
AUTH_DOMAIN=codep…app.com
PROJECT_ID=codep…a
STORAGE_BUCKET=ycode…com
MESSAGING_SENDER_ID=4…2
APP_ID=1:47…f
MEASUREMENT_ID=G…G

8.Install react-native-dotenv: Use npm install react-native-dotenv for safe access to environment variables.
9.Update Babel Configuration: Modify babel.config.js to include react-native-dotenv:

module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ ['module:react-native-dotenv', { moduleName: '@env', path: '.env', }], ], };

10.Update firabse.js file: where you are supposed to copy-paste the configs provided by Firebase and make the following changes

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID
};

Also, add import { getAuth } from 'firebase/auth'; at the imports of your file and add export const auth = getAuth(app); to the end of the file

You can comment out or delete the analytics for now and the firebase.js in your root should look like this:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// import { getAnalytics } from "firebase/analytics";
import { getAuth } from 'firebase/auth';

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
export const auth = getAuth(app);

Structuring the React Native Project

Clean up the default react native project and add simple context, src folder, styles, and screens (Login, Signup, and Home)
I added simple stack navigation to the app for screen changing.

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';
import Home from './src/screens/Home';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Signup" component={Signup} />
            <Stack.Screen name="Home" component={Home} />
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

export default App;

import { StyleSheet } from 'react-native';

export const GlobalStyles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 12,
  },
  inputField: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: '100%',
    marginBottom: 15,
    padding: 10,
  },
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
    marginBottom: 15,
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
  linkText: {
    color: 'blue',
    textAlign: 'center',
    marginTop: 15,
  },
});

import React from 'react';
import { View, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { GlobalStyles } from '../styles/GlobalStyles';

export default function Login() {
    const navigation = useNavigation();

    const handleSignUpPress = () => {
      navigation.navigate('Signup');
    };

    const handleLoginPress = () => {
      // TODO:Perform authentication...
      navigation.navigate('Home');
    };

    return (
        <View style={GlobalStyles.screenContainer}>
        <TextInput style={GlobalStyles.inputField} placeholder="Email" />
        <TextInput style={GlobalStyles.inputField} placeholder="Password" secureTextEntry />
        <TouchableOpacity style={GlobalStyles.button} onPress={handleLoginPress}>
            <Text style={GlobalStyles.buttonText}>Log In</Text>
        </TouchableOpacity>
        <Text style={GlobalStyles.linkText} onPress={handleSignUpPress}>Sign Up</Text>
        </View>
    );
}

import React from 'react';
import { Text, TextInput, TouchableOpacity, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { GlobalStyles } from '../styles/GlobalStyles';

export default function Signup() {  
    const navigation = useNavigation();

    const handleCancelPress = () => {
      navigation.goBack();
    };

    return (
        <AreaView style={GlobalStyles.screenContainer}>
        <TextInput style={GlobalStyles.inputField} placeholder="Email" />
        <TextInput style={GlobalStyles.inputField} placeholder="Password" secureTextEntry />
        <TextInput style={GlobalStyles.inputField} placeholder="Re-enter Password" secureTextEntry />
        <TouchableOpacity style={GlobalStyles.button}>
            <Text style={GlobalStyles.buttonText}>Sign Up</Text>
        </TouchableOpacity>
        <Text style={GlobalStyles.linkText} onPress={handleCancelPress}>Cancel</Text>
        </AreaView>
    );
}

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { GlobalStyles } from '../styles/GlobalStyles';

export default function Home() {
  return (
    <View style={GlobalStyles.screenContainer}>
      <Text>Welcome to the Home Screen!</Text>
      <TouchableOpacity style={GlobalStyles.button}>
        <Text style={GlobalStyles.buttonText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
  );
}

Signup

Add signup form validation and firebase signup function to Signup.js.

npm i formik yup

New imports:

import { Formik } from 'formik';
import * as yup from 'yup'; 
import { auth } from '../../firebase';
import { createUserWithEmailAndPassword  } from 'firebase/auth';

Implement signup in the handleSignup function and add it to the onSubmit property of the form.

const handleSignup = async (values, actions) => {
        if (values.password !== values.confirmPassword) {
            actions.setFieldError('confirmPassword', "Passwords don't match");
            return;
        }
        createUserWithEmailAndPassword(auth, values.email, values.password)
        .then((userCredential) => {
            console.log('Signed up:', userCredential.user);
            navigation.navigate('Home');
        })
        .catch((error) => {
            Alert.alert('Signup Failed', error.message);
        });
    };

For the full document please check Signup.js

Try out, and sign up as a user. Check the Firebase authentication users tab. There is the user!!!

Logout

As the handleSignup function navigates to the Home screen on the happy path, first I implement the logout function, and as there is an authenticated user its email address can be displayed to make sure which user is logged in.

import React, { useState, useEffect } from 'react';
import { SafeAreaView, Text, TouchableOpacity, Alert } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { GlobalStyles } from '../styles/GlobalStyles';
import { auth } from '../../firebase';
import { signOut } from 'firebase/auth';

export default function Home() {
    const [userEmail, setUserEmail] = useState('');
    const navigation = useNavigation();

    //set useremail to present
    useEffect(() => {
      const user = auth.currentUser;
      if (user) {
          setUserEmail(user.email);
      }
  }, []);

    // logout the user
    const handleLogout = () => {
      signOut(auth).then(() => {
        navigation.navigate('Login');
      }).catch((error) => {
        Alert.alert('Logout Failed', error.message);
      });
    };
    return (
      <SafeAreaView style={GlobalStyles.screenContainer}>
        <Text>Welcome to the Home Screen, {userEmail}!</Text>
        <TouchableOpacity style={GlobalStyles.button} onPress={handleLogout}>
          <Text style={GlobalStyles.buttonText}>Sign Out</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
}

After clicking the Signout button the user is signed out and the login screen becomes visible.

Login

For the login, implement similar form validation and submission, and on submit utilize the login function from firebase.

Add new imports

import { Formik } from 'formik';
import * as yup from 'yup';
import { auth } from '../../firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

Add the login implementation to handleLogin

const handleLoginPress = (values) => {
        signInWithEmailAndPassword(auth, values.email, values.password)
            .then((userCredential) => {
                console.log('Logged in:', userCredential.user);
                navigation.navigate('Home');
            })
            .catch((error) => {
                Alert.alert('Authentication Failed', error.message);
            });
    };

If the credentials are correct the user should be logged in to the home screen after pressing the login button.

For the full document please check Login.js

Conditional Navigation Based on Authentication State

One more thing to add. Home screen should be available only to authenticated users and the back to login button from the Home.js top left corner should be removed. Not authenticated users should only see login and signup screens.

For this 2 Stack.Navigator and auth.onAuthStateChanged functions can be utilized.

import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { auth } from './firebase';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';
import Home from './src/screens/Home';

const Stack = createNativeStackNavigator();

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // Check if user is authenticated
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setIsAuthenticated(!!user);
    });

    return () => unsubscribe();
  }, []);

  return (
      <SafeAreaProvider>
        <SafeAreaView style={{ flex: 1 }}>
          <NavigationContainer>
            {isAuthenticated ? (
              <Stack.Navigator>
                <Stack.Screen name="Home" component={Home} />
              </Stack.Navigator>
            ) : (
              <Stack.Navigator initialRouteName="Login">
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="Signup" component={Signup} />
              </Stack.Navigator>
            )}
          </NavigationContainer>
        </SafeAreaView>
      </SafeAreaProvider>
  );
}

export default App;

Check out the final code here.

Thank you for reading.

Additional Features and Improvements

Visibility icon for password.
Password change option.
Sign up with Facebook, Google, and Apple.
Adding custom components.

Sources

More about the author at LUNitECH

DEV Community: Balogh Botond

Facebook Authentication with Firebase in React Native (Android)

Table of Contents

Prerequisites

Introduction

Installing the Facebook SDK

Configuring Firebase

Configuring Facebook

Facebook SDK Configuration

Coding the Authentication Process

Logging Out

Conclusion

Cleaning Your Git History: Safely Removing Sensitive Data

Table of Contents

Introduction

Git filter-branch

Step-by-Step Guide

Email Authentication with Firebase in React Native for iOS and Android

Table of content

Prerequisites

Development Stack

Setting Up the React Native Environment

Initializing the React Native Project

Testing the Setup

Setting Up Firebase for Email Authentication

Structuring the React Native Project

Signup

Logout

Login

Conditional Navigation Based on Authentication State

Additional Features and Improvements

Sources