Tutorial Firebase Authentication with React

I walk you through integrating Firebase Authentication into a React app using Firebase version 9.6.7. You’ll learn how to create a Firebase project, enable email/password sign-in, and connect your React app to Firebase with a clean configuration setup. The tutorial also covers building simple Home, Login, and Register screens styled with Tailwind CSS.

I recommend using Firebase 9.6.7 specifically because newer versions have caused issues in my experience. I show how to safely manage your Firebase keys and avoid exposing them publicly. This is a practical guide for React developers who want a straightforward way to add user authentication with Firebase.

What's inside

• Creating and configuring a Firebase project for authentication
• Installing Firebase 9.6.7 and setting up the Firebase config file
• Enabling email and password sign-in method in Firebase console
• Structuring React app folders and creating Home, Login, and Register screens
• Initializing Firebase Authentication and exporting it for use in React
• Running the React development server and verifying the login screen
• Handling user login, logout, and session persistence
• Security advice on managing Firebase API keys

Creating and configuring a Firebase project for authentication

I start by showing how to create a new Firebase project in the Firebase console. You give your project a name (like "tutorial") and skip Google Analytics for simplicity. After the project is ready, you register a web app inside Firebase to obtain the configuration keys needed to connect your React app.

You get a clear warning to keep these API keys private because anyone with access can misuse your Firebase project and potentially incur unexpected charges. I also explain how to delete the Firebase project later if you want to clean up after testing.

Installing Firebase 9.6.7 and setting up the Firebase config file

Instead of the latest Firebase release, I recommend installing version 9.6.7 to avoid stability problems. You run npm install firebase@9.6.7 to install this specific version.

Next, you create a fire.js file in your React project to hold the Firebase configuration. You paste the config object from the Firebase console and initialize the Firebase app there. Then, you import and export the getAuth function from Firebase, so you can use authentication features in your React components. This keeps your Firebase setup modular and reusable.

Enabling email and password sign-in method in Firebase console

In the Firebase console, under Authentication > Sign-in method, you enable the Email/Password provider. This lets users register and log in using their email addresses and passwords.

I mention you could enable other sign-in methods like email link or social providers, but focuses on email and password for simplicity and clarity in this tutorial.

Structuring React app folders and creating Home, Login, and Register screens

You organize your React source code by creating an auth folder inside src. Inside this folder, you create separate files for Home.js, Login.js, and Register.js.

The Home screen is a simple placeholder that displays "This is the home screen" styled with Tailwind CSS classes like text-5xl, font-bold, and text-center. The Login and Register screens will later contain forms for user authentication.

This folder structure keeps your authentication-related components organized and easy to maintain as your app grows.

Initializing Firebase Authentication and exporting it for use in React

In your fire.js config file, after initializing the Firebase app, you import getAuth from Firebase and export it as auth. This allows you to import auth in your React components and call Firebase Authentication methods such as createUserWithEmailAndPassword or signInWithEmailAndPassword.

This approach keeps your Firebase setup clean and reusable across your app, avoiding repeated initialization code.

Running the React development server and verifying the login screen

Once you have your project and files set up, you run npm start to launch the React development server. Opening localhost:3000 in your browser shows the login screen as expected.

This confirms your React app is correctly wired to Firebase and ready for you to add authentication logic. I also show troubleshooting when the server isn’t running and how to fix it by starting the development server.

Handling user login, logout, and session persistence

I demonstrate entering an email and password that exist in Firebase Authentication and successfully logging in. After login, you see the home screen.

Reloading the app keeps the user logged in, showing session persistence in action. Logging out and reloading redirects back to the login screen. While Firebase checks the current authentication state on app start, a loading message appears to improve user experience by indicating the app is verifying the user session.

Security advice on managing Firebase API keys

You are reminded never to expose your Firebase API keys publicly. If keys leak, someone could abuse your Firebase project and cause billing issues.

I show how to delete the Firebase project after the demo to avoid accidental misuse. In production, consider using environment variables or backend proxies to keep keys secure.

Resources

CourseReact course

Learn React fundamentals and build real projects with practical examples.

Premium resourcePro membership

Access premium tutorials, projects, and code examples.