> For the complete documentation index, see [llms.txt](https://react-firebase.gitbook.io/rf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-firebase.gitbook.io/rf/guides/build-a-react-app-with-firebase-auth-and-realtime-database.md).

# Build a React App with Firebase Auth and Realtime Database

### 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

![](/files/-LKM_XmGVg3P8SQuKuJy)

![](/files/-LKQfLLrpaAYuMwkvWrX)

#### Now that we have the requirements we can get started !

You can read the whole code [here](https://github.com/rakannimer/react-firebase/tree/master/modules/tutorial-bookmarking-app) if you want to go straight to the code. 

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://react-firebase.gitbook.io/rf/guides/build-a-react-app-with-firebase-auth-and-realtime-database.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.