An example React Native Firebase application integrating authentication

Overview

Firebase Authentication Example for React Native

Thank you for trying the Firebase Authentication example 👏

Just want to try it? It's live right here. Go play!

How-its-going

See-it-in-action

Please note that limited support is offered for this example though we will happily accept PRs.

The following authentication features are ready for use in this example:

  • Sign In
  • Sign Out
  • Create account
  • Forgot Password
  • Sign in with social auth providers
  • Sign in with phone auth (with country selection)
  • Linking social profiles
  • Change Password
  • Email verification
  • Updating user profile
  • Firebase email templates configured to match device locale

and the following providers:

  • Email / Password Sign In
  • Phone Auth via SMS
  • Apple (Native, iOS only, PRs needed for web support)
  • Facebook (Native only, PRs needed for web support)
  • Google (Native only, PRs needed for web support)

This template creates an app that comes out of the box ready with typescript and react-native-web support, based on the Luna template

This template also has single-source theme configuration and light/dark switching configured to follow system preference, as well as dynamic detection of user locale and an included translation system (English and Spanish translations to demonstrate how it works)

It's ready to go for a modern-looking international app.

Getting started

Ensure your development environment is set up for React Native by following the React Native documentation.

Create an app using the template

  1. For a quick demonstration, this template is pre-configured with a firebase project called ProjectName, if you just want to see it work, run `npx react-native init ProjectName --template invertase/react-native-firebase-authentication-example
  2. For a real project, replace ProjectName in the init command with your new project's real name, then follow the configuration instructions below

Android: Setting up App Signing

Google Sign-In requires a keystore file to be added to your project and the Firebase console for both debug and release builds, we've included a debug one by default. To setup a new keystore file, follow the guide here.

Add your Firebase credentials

  1. Choose your existing Firebase project from the Firebase console.

    Creating a new project? Check out the React Native Firebase documentation.

  2. Replace the native Firebase credentials template files to your project by following documentation for Android and iOS.
  3. Copy the web config from Firebase console into src/shims/firebase-init.ts

Run the app

  • Start the metro javascript bundler: yarn start
  • For android: yarn android
  • For apple: yarn ios
  • For web: yarn web
  • For testing (jest): yarn test:all
  • For linting (format, lint, typescript): yarn lint:all

Authentication Providers

The Firebase Authentication Example supports multiple authentication providers.

Follow the links below for documentation on setting up each provider:

You might also like...
Firebase incoming call notifications for React Native based applications.
Firebase incoming call notifications for React Native based applications.

Android Call Notifications App (React Native) Banner Notifications FullScreen Notifications Prerequisites for project Create a firebase project from f

A Simple Birthday Check Example For React

birthday-check made by 🇸🇴 Feature:DaysToCome ✅ YearsOld Function Return How old The Person is in a Number: birthDay.YearsOld(user.DOB) DaysToBirthDa

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.

react-redux-firebase Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React. Usage Note If you are starting a new proje

Build a Chat Web App using React + Firebase
Build a Chat Web App using React + Firebase

Unichat Application Introduction This is a code repository for the corresponding video tutorial. In this video, we create a full Realtime Chat Applica

Twitter-Clone-Nextjs - Twitter Clone Built With React JS, Next JS, Recoil for State Management and Firebase as Backend

Twitter Clone This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm

Discuzz: Open source Comment System Built With React and Firebase
Discuzz: Open source Comment System Built With React and Firebase

Discuzz Open source Comment System Table of contents Homepage Features Usage Exa

Toolkit to help connect Firebase with Redux applications

Firekit This project was bootstrapped with nwb Firekit helps syncing the Firebase RealtimeDatabase or Firestore database with the redux state. You can

Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.

React Native Chat UI Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS. Flyer Chat is a platform for creatin

Owner
Shawn Fetanat
Shawn Fetanat
React Native Firebase Authentication Starter, manage user authentication in React Native app with firebase

Sign up and sign in screens for mobile using React Native. This is an example of how to use Firebase Authentication in React Native application, how to let users create an account or log in to an existing account.

Maor 14 Sep 8, 2022
React Native Unofficial SDK for integrating MercadoPago PX Native UIs.

React Native Unofficial SDK for integrating MercadoPago PX Native UIs. Getting Started To integrate this SDK you can check out our docs. Add your App

BlackBox Vision 90 Sep 10, 2022
🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.

React Native Firebase React Native Firebase is a collection of official React Native modules connecting you to Firebase services; each module is a lig

Invertase 10.3k Sep 27, 2022
React-firebase-mui-insta-reels - React Firebase Material-UI insta reels app

React Firebase Material-UI insta reels app Website link : here P.S :- Open the w

Jaydip Dey 8 Feb 11, 2022
React Native authentication with the native Touch ID popup.

React Native Touch ID React Native Touch ID is a React Native library for authenticating users with biometric authentication methods like Face ID and

Naoufal Kadhom 1.4k Sep 27, 2022
React Native authentication with iOS Passcode.

React Native Passcode Auth React Native Passcode Auth is a React Native library for authenticating users with iOS Passcode. It is an excellent fallbac

Naoufal Kadhom 103 Sep 24, 2022
React Native: social authentication with Google, using Context, TypeScript and environment variables

React Native, sistema de login social nativo usando uma conta do Google Primeiro passo clonar o repositório git clone [email protected]:r-santtos/Stu

Ricardo Santos 1 Dec 10, 2021
A chat web application using React JS and Firebase.

Decisive Chat Decisive Chat is a chat application built by using React JS and Firebase. You can get a demo of it Here. For the sack of demo, the priva

null 1 Dec 30, 2021
Firebase Admin Console is a centralized platform for easy viewing and maintenance of Firestore database, the application's front-end is built in ReactJS.

Firebase Admin Console is a centralized platform for easy viewing and maintenance of Firestore database, the application's front-end is built in ReactJS. A starting template for developers to customize, build, and even deploy the desired admin console for their DB.

Daqi Chen 1 Jan 6, 2022
react native module for firebase cloud messaging and local notification

Deprecated I'm not longer able to maintain this repo. check react-native-firebase instead To existing react-native-fcm users react-native-firebase now

Libin Lu 1.7k Sep 15, 2022