A Simple Automated way of Adding Firebase to your flutter project! Makes the process easy as you do not need to individually go into each file and add code snippets! The script takes care of that for you!
You can use this tool with my FireAuth package to effortlessly integrate Firebase Authentication in flutter.
This script was made in Python 3.9!
- Windows 10 or macOS (Linux Untested)
- Python 3 (if not present, please install python3)
- Ensure you have Python3 installed on your PC and added to your PATH variable
- Git Clone this Project into a folder of your choice
- cd into this folder, copy the folder path and add it to your PATH environment variable
- Close all CMD instances and reopen and now you should be able to use firesetup from anywhere on your computer.
- Make sure you have python3 installed and added to your PATH variable
- Git clone this repository into a folder of your choice
- Open your .bash_profile or .zshrc file and paste this in the end.
alias firesetup="[Your FireSetup Location]/firesetup.sh" - Close and open your terminal or run the source ~/.bash_profile or ~/.zshrc command
- Now you can run the firesetup update command and it should work!
flutter create testapp
cd testapp
Use the Firebase Console to do this! It's very straightforward
- Register the App
- Save the google_services.json file in android/app
- Click Next and do not proceed with editing any other files as This will be done by FireSetup
- Register the App
- Save the GoogleService-Info.plist file somewhere
- Keep Clicking Next and do not proceed with editing any other files as This will be done by FireSetup
- Open the ios folder in XCode and drag and drop the Plist file under Runner and check 'Copy if needed'
- Register the App
- From the code snippet provided by firebase, just copy the firebaseConfig object and save it somewhere
- Click Next and do not proceed with editing any other files as This will be done by FireSetup
This adds firebase to your flutter project! If you do not use Auth you can stop right here! Firebase has been added to your project!
- Inside your flutter project, open terminal and enter this command (assuming you have installed FireSetup Correctly):
firesetup firebase
- You can use platform flags like -a, -i or -w to install for a specific platform like Android, iOS or Web specifically! By Default it installs on all platforms.
- You can combine multiple flags like -a -i will install for android and ios while excluding web and so on
This adds FirebaseAuth Support to your project! This is necessary if you plan on using FirebaseAuth in your flutter project
- Inside your flutter project, open terminal and enter this command (assuming you have installed FireSetup Correctly):
firesetup auth
- (Email, Phone, Google, Anonymous, OAuth2(Microsoft, Google, Twitter, Yahoo)) support is added in all cases!
- You can use the platform flags (-a, -i or -w) to add Auth Support only to specific platforms
- You can use the -all flag to add support for all AuthProviders (Currently only Facebook is added, AppleID may come soon)
- You can add specific AuthProviders too using the -p argument with a value like '[Facebook]' and so on (no spaces)
- You can combine multiple flags based on your requirements!
- To use google sign in on web, you need to pass your GoogleSignInClientID when prompted. You can get instructions for this below in the Additional Setup section.
- For Facebook, you need to provide your AppID and ClientToken to FireSetup. You can get instructions for this below in the Additional Setup section.
- Open the flutter project using an IDE like VSCode for example
- Go to the /web/index.html file and replace the commented firebaseConfig object there with the one you copied when adding Firebase to Web in the Firebase Console
- Head over to the Authentication Section of your Firebase Project's Console
- Click on Get Started
- Go to the SignIn Method Tab
- Enable whichever Auth Provider you need!
- Additional setup needed for each of the Auth Providers is shown below under 'Additional Setup Instructions'
- Firstly, Get all the newly added packages
flutter pub get
-
Write Some Code
-
Run the Application
flutter run -d chrome (For Flutter Web)
flutter run -d <device_identifier> (For Flutter Native)
Now, the basic setup is complete! You can use AnonymousSignIn and Mail SignIn directly provided you have enabled them in the Firebase Console.
To use Google SignIn, Phone SignIn and the other Social SignIn Methods, follow the Steps given in each Section!
-
Go to the Google Cloud Platform Console
-
Login With the Same Google Account used for Firebase
-
Open the GCP Project with the same name as your firebase project
-
Search Credentials in the Search Box and click on API Credentials
-
Copy the webClientID under OAuth 2.0 Client IDs
-
Go to /web/index.html and replace the placeholder string GCLIENTID with the copied clientID!
- Go to your /android folder in the flutter project, open terminal and type this:
./gradlew signingReport
-
now, copy the SHA1 and SHA-256 Keys and store it somewhere.
-
Go to your firebase android app's settings in the Firebase Console
-
Scroll to the bottom to 'SHA certificate fingerprints'
-
Click On 'Add Fingerprint' and add both the Keys. Done!
🟢 Phone
-
Open your GCP Project (similar way as previously done)
-
search for Android Device Verification
-
Enable the API and done!
Search online on how to do it
🟢 Twitter (OAuth)
-
Go to the Twitter Developer Console
-
Scroll Down and click on Create App
-
Then Enter your App Name, copy the API Key, API Secret Key and the Bearer Token and save it somewhere
-
Enable the Twitter SignIn Provider in the Firebase Console
-
Copy the API Key & the API Secret that you saved before and paste it in the respective fields
-
Copy the CallbackURL that is provided under the API Key & API Secret Fields
-
Go to the Settings of your Twitter App on the Developer Console, Scroll Down to Authentication Settings and click on Edit
-
Enable 3-legged-oauth
-
Paste the previously copied callbackURL in the respective field and also pass your website link in the respective field and click on save!
-
And the Twitter OAuth SignIn Setup is Done!
🟢 Github (OAuth)
- Keep the Dialog Open and just copy the provided callbackURL
-
Go to the Gitbub Developer Settings and click on New OAuth App
-
Fill in the Details and paste the previously copied CallbackURL in the respective field and submit
-
Now you will be on a App Dashboard, Copy the ClientID and save it somewhere
-
Click on Generate New Client Secret and save it somewhere
-
Update any other required fields and click on Update Application
-
Go back to the open dialog on the Firebase Console
-
Paste the ClientID & Client Secret in their respective fields and click on Save!
-
And the Github OAuth SignIn Setup is Done!
🟢 Microsoft (OAuth)
- Keep the Dialog Open and just copy the provided redirectURL
-
Open MSFT Azure Portal and Sign in, You will be then redirected to the Azure Homepage
-
Click on the Hamburger Icon on the Left to Reveal the Sidebar and then click on 'Azure Active Directory'
-
Now, Click on 'App Registrations' in the Sidebar present on that Window
-
Now, Click on the 'New Registration' Button on the top and Fill in the details
-
Under the 'Supported Account Types' Heading Select the Option for 'Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)'
-
Under the Redirect URI Heading, Select Web and paste the CallbackURL that you copied from the Firebase Console Dialog Earlier.
-
After about a Minute, Your App's Dashboard will be visible Copy the 'Application (client) ID' and Save it somewhere, this will be needed later.
-
In the Same Page, Under the 'Manage' heading, click on 'Certificates and Secrets' and in the page that opens, Click on 'New Client Secret'
-
Fill In the Details and once created, copy the String under the 'Value' Heading and save it somewhere, this is your Client Secret.
-
Now go back to the Microsoft AuthProvider Dialog and paste the Application (client) ID and the Client Secret in the required fields and Click on Save!
-
The Setup is Done! Now you can use Microsoft Authentication!
A) Create a Facebook App using the Facebook Developer Page
-
Create a Facebook Developer Account or convert your existing account into a Developer Account
-
Click on Create App, Select Continue and Click Continue, fill in the necessary details and proceed
-
In the Dashboard, Click on 'Set Up' under the Facebook Login Section and click on Android
-
Now, Keep Clicking Next until instructed otherwise
-
Under 'Tell Us about Your Android Project',
-
Add your Android Project's package name (see from AndroidManifest.xml)
-
Add <your_package_name>.MainActivity for DefaultActivityClassName and click 'Save'. In the dialog that pops up, Click 'Use this package name'
-
Keep Clicking Next until you arrive at the KeyHashes Section
-
Use this link for iOS Setup: Facebook Setup for iOS
-
Windows Command
-
Make Sure you have KeyTool from JDK(Java Development Kit)
-
Execute this code in the Command Line (Note: The KeyStore Password is your Current PC User's password`):
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\<YOUR_USERNAME>\.android\debug.keystore" | " <YOUR_PATH_TO_OPENSSL_LIBRARY>\bin\openssl" sha1 -binary | "<YOUR_PATH_TO_OPENSSL_LIBRARY>\bin\openssl" base64 -
MacOS or Linux Command
-
Execute this code in the Command Line:
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -
Now Save the output, This will be needeed later
-
Universal: To Get ReleaseKey (Optional For Now)
-
Execute this code in the Command Line:
keytool -exportcert -alias <YOUR_RELEASE_KEY_ALIAS> -keystore <YOUR_RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64 -
Now Paste the Copied Keys to the Key Hashes Field and click on Save
-
Continue Clicking Next until Instructed Otherwise
-
Under 'Edit Your Resources and Manifest', copy the value of facebook_app_id and save it somewhere, this will be needed later.
-
Do not Edit anything, Just Continue, The Manual Editing Work will be handled by FireSetup automatically
-
Keep Clicking Next and once you have reached the end, Close the Page!
-
From the Dashboard, Go to the FB App Settings
-
Copy the AppID and AppSecret and save it somewhere, this is needed later
-
Enable Facebook Authentication
-
Paste the AppID & App Secret in the respective fields
-
Copy the callbackURL (or) redirectURL and save it somewhere & Click on Continue
- Go to your FB Login Settings and paste the callbackURL in Valid OAuth Redirect URLs
-
Open your Flutter Project in the Terminal
-
Run FireSetup in Auth Mode using this command (Android & iOS):
firesetup auth -all -a -i -
This should Complete the Facebook Setup!
Your Facebook Login App is currently in Development Mode, which means you can only login with the Account used for your Developer Account, To enable Everyone to Login, you need to Switch to Live Mode. Look it up Online.
🟢 Yahoo (OAuth)
- Open the Firebase Console, Go to Authentication > Sign-in method, Click on Yahoo, enable it and copy the Redirect URI.
- Go to the Yahoo Developer Create App Page in another tab and Login with your Yahoo account
- Fill the App Details on the Create App page and paste the Redirect URI that you copied from Firebase and then Click Create App
- Now in the page that appears, Copy ClientID and Client Secret and go back to the Firebase Console tab and paste in the appropriate textfield under the Yahoo Sign In Method and Click on Save
Now you should be able to use Yahoo Sign In easily! Note: Currently, Firebase Users from Yahoo only have their UID filled, all the other fields like email, displayName etc are null.
v0.4.0 & v0.5.0 came with an inbuilt update feature. v1.0.1 will be removing this feature as it is a drastic rewrite. A new updater may be bundled in a future release of FireSetup.
For now, if you need a new version of firesetup, you need to git clone it from this repository