React Firebase
  • React Firebase
  • React Firebase Realtime Database
    • Setup
    • Usage
    • API
  • React Firebase Auth
    • Setup
    • Usage
    • API
  • React Firestore Database
    • Setup
    • Usage
    • API
  • Generate Firebase Data
    • Setup
    • Usage
  • Generate Firestore Data
    • Setup
    • Usage
  • Generate JSON Data
    • Setup
    • Usage
  • Guides
    • Build a React App with Firebase Auth and Realtime Database
      • Setup the development environment
      • Add React and React DOM
      • Add Firebase
      • Listen to auth
      • Adding Google and Anonymous Auth
      • Adding Data to your Realtime Database
      • Implementing the UI
      • Writing Data
      • Read Data
  • View Source
Powered by GitBook
On this page
  • Overview
  • App description
  • App wireframe
  1. Guides

Build a React App with Firebase Auth and Realtime Database

React Firebase Auth Realtime DB Tutorial

PreviousGuidesNextSetup the development environment

Last updated 6 years ago

Overview

We want to build a bookmarking app that allows a user to add links and metadata and then be able to search through them.

App description

  • If a user is not authenticated, they should see a Login/Register screen

  • A user can choose to login/register with Google or Anonymously.

  • Once a user is authenticated the login/register buttons should disappear.

  • If a user is authenticated, they should see a :

    • A big text input with auto-complete.

    • A small button to logout.

    • A list of all their bookmarks sorted by last used.

  • Once the user starts typing, the autocomplete field should suggest clickable links that will open the link in a new tab.

Looking at the app description we will need to use firebase/auth and firebase/database or firebase/firestore

App wireframe

Now that we have the requirements we can get started !

Every step below will have a matching git commit that you can browse.

You can read the whole code if you want to go straight to the code.

here