Flutter - Firebase GitHub Authentication
Last Updated :
28 Apr, 2025
GitHub is like a digital hub for code. Imagine it as a virtual space where developers team up to build amazing things. It stores and tracks changes to code, making it easy for everyone to collaborate, contribute, and create software together. It's the cool place where coding magic happens. Since GitHub is a version control system that every developer should be familiar with, we might wish to create apps on top of it. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
StStep 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Add SignUp with GitHub button and text for getting whether the user has signup/login or not on the screen
We have added 1 bool variable
Dart
bool isSignSuccess = false;
Then we added 2 text and 1 Floating Action Button.
Dart
Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("SignIn with Github Template"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have signed in or not',
),
// Here we have shown tthe bool variable
Text(
'$isSignSuccess',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
// This button is for signing up with github account
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
},
tooltip: 'Sign with Github',
label: const Text("Sign with Github"),
),
)
Step 3: Add the package github_sign_in_plus in project
Dart
github_sign_in_plus: ^0.0.1
You can refer this for getting latest version: github_sign_in_plus
Step 4: Create a firebase project
- Create a firebase project on this: Click here
- Add Authenication and SignIn method as github
Here you will require client id and client secret which we will get in next step
Step 5: Create a github developer account for getting API keys
To add the functionality for github signing we will require 3 things clientId, clientSecret, redirectUrl. Let's learn how we can do that
Step 5.1: Create OAuth Application from here
Add the following and submit the form
- Application name: Application name that you want to show to customer
- Homepage URL: URL to our application homepage
- Authorization callback URL: You can get this from firebase
In step 4 you must have recieve this type of screen
-660.jpg)
Copy the url and add that in Authorization callback URL and env file of your app
Step 5.2: Generate Client secret from page opens when you complete first step
Store the client ID and client secret and add it in .env file as well in firebase app created in previous app.
Step 6: Add the client id and client secret in Flutter
Now add the client id and client secret that you get in previous steps in env file and store that in variables. To know about how to use env file in flutter check out this article How to Add .env File in Flutter.
Sample .env file
CLIENT_ID="";
CLIENT_SECRET="";
REDIRECT_URL="";
Step 7: Add the following code on onPressed of button
This code will open the github page so that user can enter credential
Dart
final GitHubSignIn gitHubSignIn = GitHubSignIn(
clientId: dotenv.env["CLIENT_ID"] ?? "",
clientSecret: dotenv.env["CLIENT_SECRET"] ?? "",
redirectUrl: dotenv.env["REDIRECT_URL"] ?? "");
// From this we will be redirect to login page
// of github to get the token
var result = await gitHubSignIn.signIn(context);
// To get status whether user is logged in or not
switch (result.status) {
// If it is success it will come here
case GitHubSignInResultStatus.ok:
print(result.token);
isSignSuccess = true;
setState(() {});
break;
case GitHubSignInResultStatus.cancelled:
// If it is cancelled by user
// it will come here
case GitHubSignInResultStatus.failed:
// If it is failed due to any reason
// it will come here
print(result.errorMessage);
break;
}
Here you have successfully implement login with github!!
Complete Code
Dart
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:github_sign_in_plus/github_sign_in_plus.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
dotenv.load(fileName: "lib/.env");
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// To check user is signed up or not
bool isSignSuccess = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("SignIn with Github Template"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have signed in or not',
),
// Here we have shown tthe bool variable
Text(
'$isSignSuccess',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
// This button is for signing up with github account
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton.extended(
onPressed: () async {
final GitHubSignIn gitHubSignIn = GitHubSignIn(
clientId: dotenv.env["CLIENT_ID"] ?? "",
clientSecret: dotenv.env["CLIENT_SECRET"] ?? "",
redirectUrl: dotenv.env["REDIRECT_URL"] ?? "");
// From this we will be redirect to login page
// of github to get the token
var result = await gitHubSignIn.signIn(context);
// To get status whether user is logged in or not
switch (result.status) {
// If it is success it will come here
case GitHubSignInResultStatus.ok:
print(result.token);
isSignSuccess = true;
setState(() {});
break;
case GitHubSignInResultStatus.cancelled:
// If it is cancelled by user it will come here
case GitHubSignInResultStatus.failed:
// If it is failed due to any
// reason it will come here
print(result.errorMessage);
break;
}
},
tooltip: 'Sign with Github',
label: const Text("Sign with Github"),
),
);
}
}
Output:
Similar Reads
Firebase Authentication with Phone Number OTP in Flutter Web Phone number verification using Firebase in the Flutter Web app can be done by sending OTP SMS to the phone number. The user will enter the OTP in the message and will easily sign in to his/her account. We are going to implement it in Flutter Web. Step by Step implementation Step 1: Create a new Flu
4 min read
Flutter - Designing Email Authentication System using Firebase Flutter is an amazing tool for developing cross-platform applications using a single code base. While Flutter is useful, it gets even better when you add Firebase. In this article, we'll discuss how to implement the Email/Password Authentication process in Flutter, using Firebase.In this article, we
13 min read
Remote Config in Flutter and Firebase In Current app development, it is essential to offer smooth updates without asking users to download a new version from the Play Store to improve user experience. Remote Config in Flutter with the power of Firebase allows developers to update app content and features dynamically without releasing a
8 min read
Flutter - Social Media Authentication Buttons Customizing an application for a better user experience requires data storage of each individual user based on their preferences and interests. But profiling each and every user can be tedious. Â This is where social media authentication comes into play. These authentication systems not only reduce t
3 min read
Flutter - Read and Write Data on Firebase Firebase helps developers to manage their mobile apps easily. It is a service provided by Google. Firebase has various functionalities available to help developers manage and grow their mobile apps. In this article, we will learn how to write and read data into/from Firebase. Follow the 3-step proce
4 min read
Flutter - Realtime Database in Firebase Firebase helps developers to build and run their apps successfully; its backend is developed by Google. Firebase is very easy to use for beginners; it provides many functionalities like Firebase Authentication, Cloud Firestore, Realtime Database, Firebase Storage, etc, which help to build and optimi
6 min read