In this article, I’m going to show you how to implement Firebase GitHub authentication method properly in Flutter. As you might already know, there are some Flutter plugins that are provided officially by Flutter team. And FlutterFire is a subset of them. I encourage you to go and try FlutterFire plugins sometime if you need quick backend solutions for your small-scale project; but for this article we’re going to need only the firebase_auth plugin. So, let me list all the steps that you need to do in order to implement GitHub authentication in your Flutter app:

Step 0. First of all, I assume that you already downloaded google-services.json file for Android and GoogleServices-Info.plist file for iOS from Firebase dashboard of your app and added them to your project properly.

Step 1. Create an OAuth app on GitHub via this link: https://github.com/settings/applications/new. As “authorization callback URL”, you need to set something like appname://auth. You will be redirected to this URL once you successfully log into GitHub on browser (which is the first step of this authorization method from the user point of view). We’re going to utilize this URL in later steps to set app’s deep link configuration, so that you can be redirected back to the app.

Step 2. Enable GitHub authentication method on your app’s Firebase dashboard. As “client ID” and “client secret”, you need to set what GitHub has provided after creating OAuth app on GitHub in Step 1.

Step 3. Add the following dependencies to your project’s pubspec.yaml file:

dependencies:

firebase_auth: ^0.8.2

google_sign_in: ^4.0.1+1

url_launcher: ^5.0.2

uni_links: ^0.2.0

http: ^0.12.0+1

google_sign_in is required by the firebase_auth dependency, so we need to add it as well.

url_launcher will be used to launch URL on browser.

uni_links is to add deep-linking capability to the app.

http will be used to send HTTP request.

Why and where we need all these will be much more meaningful in the upcoming steps, so please bear with me.

Step 4. For Android, add the following classpath to project-level build.gradle file located under /android directory:

dependencies {

// ...

classpath 'com.google.gms:google-services:4.2.0'

}

And add the following line to the end of app-level build.gradle file located under /android/app directory:

apply plugin: 'com.google.gms.google-services'

Finally, add the following intent filter to the AndroidManifest.xml file located under /android/app/src/main directory:

<intent-filter>

<action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" />

<category android:name="android.intent.category.BROWSABLE" /> <data

android:host="auth"

android:scheme="appname" />

</intent-filter>

Please be aware that scheme and host properties we set here are from Step 1.

Step 5. For iOS, add the following attributes into Info.plist file located under /ios/Runner directory:

<key>CFBundleURLTypes</key>

<array>

<dict>

<key>CFBundleTypeRole</key>

<string>Editor</string>

<key>CFBundleURLSchemes</key>

<array>

<string><!-- REVERSED_CLIENT_ID from GoogleServices-Info.plist --></string>

</array>

</dict>

<dict>

<key>CFBundleTypeRole</key>

<string>Editor</string>

<key>CFBundleURLName</key>

<string>auth</string>

<key>CFBundleURLSchemes</key>

<array>

<string>appname</string>

</array>

</dict>

</array>

Once again, please be aware that in the first “dict” element of the above array, value of CFBundleURLSchemes attribute is set as the REVERSED_CLIENT_ID which you can find in GoogleServices-Info.plist file. Similarly, values of CFBundleURLName and CFBundleURLSchemes attributes in the second “dict” element are from Step 1.