Firebase Authentication

Introduction

This blog post details the journey of creating a React application with Vite, integrated with Firebase authentication. The application supports Google and GitHub sign-in, ensuring a smooth user experience.

Creating a Firebase Project

1. Go to the Firebase Console.

2. Click on Add project and follow the steps to create a new project.

3. Once the project is created, navigate to the Project settings by clicking the gear icon next to Project Overview.

Setting Up Authentication Providers

1. In your Firebase project, go to Authentication -> Sign-in method.

   

2. Enable Google sign-in:

   • Click on the Google provider.

   • Enable it and set the necessary credentials.

   • Save the settings.

3. Enable GitHub sign-in:

   • Click on the GitHub provider.

   • Enable it and set the Client ID and Client Secret obtained from your GitHub Developer settings.

   • Set the Authorization callback URL to https://<your-project-id>.firebaseapp.com/__/auth/handler.

     

     

Note: If your app is not deployed yet, you can still set up the authentication. Use localhost or 127.0.0.1 as the placeholder for your homepage URL during development.

• Save the settings.

  

4. Enable Firestore:

• Go to your Firebase project in the Firebase Console.

• Click on "Firestore Database" in the left-hand menu.

• Click "Create Database" and follow the setup instructions.

  

  

  

Creating a New React App

• Install Vite if you haven't already:

     npm create vite@latest
  

• Navigate to your project directory and install the necessary dependencies:

    cd your-project-name
    npm install
  

• Install Firebase:

npm install firebase

Setting Up Firebase in React App

1. Create a firebase.js file in the src directory and add that firebase code which gets you during the set up process of new firebase project:

• Add the following code in you firebase file to create authentication with google and github.

  

  

  • final look of your firebase.js file:

    

2. Building the Sign-Up compo and add following code in you sign up file

   • following code snippet is about all imports in signup compo:

• following code snippet is about signupWithGoogle function:

• following code snippet is about signupWithGithub function:

• following code snippet is about function call on the Click of button:

3. Building the Log-In compo and add following code in you log in file:

   • following code snippet is about all imports in login compo:

     

     • following code snippet is about loginWithGoogle function:

• following code snippet is about loginWithGithub function:

3. Run the project by following command:

npm run dev

Output

• Final UI:

  

• How data stores in fire store database:

  

  Conclusion

• By following the steps outlined above, you can create a robust and user-friendly authentication flow using Google and GitHub providers. This project not only enhances your development skills but also gives you a solid understanding of integrating third-party services into your application.

• I hope you found this guide helpful.

• Follow me for more such content and insights.

• Stay tuned for more updates and happy coding!