Firebase Setup

All the firebase configuration you all need!

Requirements

  • Ensure you have the Firebase CLI installed on your device to connect your app with Firebase.
  • You should be logged into the Google account you wish to use for Firebase.

Steps to Connect with Firebase

Step 1: Create a New Firebase Project

  • Visit the Firebase website.
  • Click on "Get Started with Firebase".
  • Enter your desired Project Name and click Continue.
  • Choose a Google Analytics account if prompted, and click Create Project.

Step 2: Access the Firebase Dashboard

  • After the project is created, you will be redirected to the Firebase Dashboard.

Step 3: Add Your Flutter App

  • On the dashboard, locate and click on the Flutter icon to initiate the app setup.

Step 4: Follow the Setup Instructions

  • You will be directed to the Add Flutter App page. Proceed to Step 2.
  • Copy the first command line provided on this page.

Step 5: Run the Command in VS Code

  • Open Visual Studio Code.
  • Navigate to the terminal (you can use Ctrl + `).
  • Paste the copied command and press Enter to execute it.

Step 6: Fetch Your Firebase Projects

  • After running the command, return to the Firebase console and copy the second command provided.
  • Paste this command into the VS Code terminal and execute it as before.
  • This process may take a moment as it fetches all available projects in your Firebase console.

Step 7: Select Platforms

  • Once the fetching is complete, you will be prompted to select the platforms you want to connect with Firebase.
  • Use the arrow keys to navigate and press Space to select or deselect Android and iOS.

Step 8: Complete the Connection

  • After making your selections, follow any additional prompts to complete the setup.
  • Your app will now be successfully connected to Firebase!

Follow the video to connect app with firebase

Enable Email and Google Authentication

Step-by-Step Guide

1. Access Firebase Project Dashboard

  • Visit your Firebase Project Dashboard.
  • In the sidebar, navigate to Build and click on Authentication.

2. Enable Authentication

  • On the Authentication page, click on Get Started to enable authentication for your project.

3. Set Up Email/Password Authentication

  • After enabling authentication, you will be prompted to select a sign-in provider. Choose Email/Password.
  • A dialog will appear; enable Email/Password and click Save to activate email authentication.

4. Add Google Authentication

  • You will now see a button labeled Add New Provider. Click on it.
  • From the list of authentication providers, click on Google.
  • A dialog will open prompting you to select a support email address. Choose your email and click Save

5. Add SHA-1 Key for Android

  • After saving, a dialog will prompt you to add a SHA-1 key. Follow these steps:
    • Open your project in Visual Studio Code.
    • In the project explorer, navigate to Project > android.
    • Right-click on the gradlew file and select Open in Integrated Terminal.
    • In the terminal that opens, type the command
./gradlew signingReport

  • Press Enter. This command will generate the SHA-1 key

  • Once the command runs successfully, locate and copy your SHA-1 key

  • Return to the Firebase console

    • Click on the Settings icon next to the project settings button in the sidebar.
    • Select Project Settings.
    • Scroll down to find your Android app. At the bottom, click on the Add Fingerprint button.
    • Paste the SHA-1 key you copied from the VS Code terminal and click Save

6. Enable Google Authentication for iOS

  • To enable Google authentication for iOS devices, follow these steps:
    • In the Firebase console, navigate back to the Authentication page.
    • Go to the Sign-in Providers tab and click on the Edit button for Google authentication.
    • Scroll down and click on Web SDK Configuration. This will display your Web Client ID. Copy this ID
  • Now, open Visual Studio Code and perform the following:
    • Navigate to iOS > Runner > Info.plist.
    • Locate line 31, where you will find the default web client ID. Replace this with the Web Client ID you copied.

7. Conclusion

  • You have now successfully enabled both Email/Password and Google authentication for your Flutter app on Android and iOS devices!

Follow the video to enable email and google authentication

Enable Facebook Authentication

Step-by-Step Guide

1. Set Up Your Facebook App

1.1 Create a Facebook Developer Account:

1.2 Create a New App:

-Click on My Apps in the top right corner and select Create App.

  • Choose For Everything Else and click Next.
  • Enter your App Display Name, your Email, and select a purpose for the app, then click Create App ID.
  • Complete any security checks that may appear

2. Set Up Facebook Login

2.1 Configure App Settings:

  • In your app dashboard, navigate to Add a Product on the left sidebar.
  • Find Facebook Login and click Set Up.
  • In the sidebar, click on App Settings and select Basic Settings.

2.2 Add Platforms:

  • Scroll down and click on the App Platforms button.

2.3 Set Up Android:

  • Select Android as a platform.
  • Choose the app store where you will upload your app (e.g., Google Play Store).
  • Enter your app's Package Name (e.g., com.ncodeslab.jhoom).
  • For the Class Name, enter your package name followed by .MainActivity (e.g., com.ncodeslab.jhoom.MainActivity).

2.4 Set Up iOS:

  • Click on Add Platform and select iOS.
  • Enter your Bundle ID for the iOS platform and click Save Changes. This adds the iOS app to your Facebook Developer account

3. Set Up Facebook Login on Android

3.1 Update Android Project:

  • Copy the App ID from your Facebook app settings.
  • Navigate to your Flutter project in your code editor:
  • Go to Project > android > app > src > main > res > values > strings.xml.
  • Open the strings.xml file and paste the copied App ID as follows:xml
<string name="facebook_app_id">YOUR_APP_ID</string>

3.2 Add Client Token:

  • In the Facebook Developer sidebar, click on App Settings and then Advanced Settings.
  • Scroll down to find the Client Token and copy it.
  • Go back to strings.xml and add your Client Token as follows:xml
<string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>

4. Set Up Facebook Login on iOS

4.1 Update iOS Project:

  • Navigate to your Flutter project in your code editor:
    • Go to Project > ios > Runner > Info.plist.

4.2 Configure Info.plist:

  • Locate CFBundleURLSchemes and paste your Facebook App ID, formatted as follows:xml
<array>
 <string>fbYOUR_APP_ID</string>
</array>
  • Scroll down to add the following keys, ensuring to replace the placeholders with your actual values:xml
<key>FacebookAppID</key>
<string>YOUR_APP_ID</string>
<key>FacebookClientToken</key>
<string>YOUR_CLIENT_TOKEN</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>

5. Conclusion

  • You have now successfully set up Facebook authentication for your Flutter app on both Android and iOS platforms! Users can now log in using their Facebook accounts.

Follow the video to enable facebook authentication