How to build a Google sign-in in Flutter without using Firebase
Hello developer, I hope you are doing well. I know there are plenty of tutorials for Google sign-in with Firebase, but there are also a few tutorials available without Firebase. Today, we will be doing Google sign-in in Flutter without Firebase. This article provides a simple and powerful step-by-step guide for setting up your Flutter application (Android, iOS, and Web).
By the way, let me mention that some of the steps are applicable even if you are using Firebase, so you can obtain information for both Firebase and non-Firebase usage.
First, if we are using Google Sign In, we must use the Google Cloud Console for sign-in authentication.
Before we jump out, I want special thank to Tugba Çekirge for being amazing person, team lead and mentor, and I would also like to greet everyone on my team.
Step 1: Google Cloud Console Set Up
- Go to Google Could Console
- Create a project if you haven’t yet.
- Find the search bar (top center) and type “Credentials” and select Credentials under “Product & Pages”.
- Find the “Create Credentials” button and click it!
- Click on “OAuth client ID” from the pop-up window.
- We have to select an “Application Type”.
From now on, we will separate our paths into three ways: iOS, Web, and Android
Step 2: IOS Set Up
- Select “iOS” under the Application Type dropdown.
- We have to enter a Name. You write whatever you want but I suggest to you write “iOS Oauth”.
- Also we have to enter a “Bundle ID” which is located in “ios/Runner/Info.plist” under the “CFBundleIdentifier” tag.
- Click the “Create” button!
- NOTE: When your application will published in App Store, you will need to fill the “App Store ID” for sign in with Google!
- Info.plist, add these lines of code
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>***IF YOU HAVE FACEBOOK SIGN IN CLIENT ID, TYPE HERE***</string>
<string>com.googleusercontent.apps.***YOUR_CLIENT_ID***</string>
</array>
</dict>
</array>- NOTE2: When you get to step 4, make sure you’re doing everything right.
- NOTE3: You don’t have to add GoogleService-Info.plist which is recommended to add in the google_sign_in package.
Step 3: Web Set Up
- Select “Web application” under the Application Type dropdown.
- We have to enter a Name. You write whatever you want but I suggest to you write “Web Oauth”.
- We have to enter “Authorized JavaScript origins” and “Authorized redirect URIs”.
- Let’s write the value “http://localhost” for each section so that we can use OAuth in the local debug session.
- Let’s write “https://yourdomain.com” for each section to use it in our published domain.
- Click the “Create” button and you are not ready to go :(
- After clicking on the create button, Google provides us with the “Client ID” for our web application. We will need to use this Client ID in the next steps, so be sure to copy it!
- Go to your “web/index.html”
- Insert this meta tag in to your index.html
<!-- Our definition that required for Google Sign In -->
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">- Do not forget replace “YOUR_CLIENT_ID” with your Client ID.
- Click this for more information about Google Sign In Web.
- Yes, you are good to go!
Step 4: Android Set Up
This step is more challenging than the previous ones :D
We need to have more than one OAuth Client ID because we require a different ‘SHA-1 Certificate Fingerprint’ for each device on the Android side. This is necessary for both debug mode (for running on emulators and testing code) and release mode (for generating apk/aab files). Similar to what we did in the web step.
- Select “Android” under the Application Type dropdown.
- We have to enter a Name. You write whatever you want but I suggest to you write for debugging environment “Android OAuth Debug” and for release environment “Android OAuth Release”
Step 4.1: Get debug SHA-1 and release SHA-1
- Go to project terminal and open android folder (cd android)
- Write “./gradlew signInReport”. (This gives us the SHA1 keys in our project)
- We come across a lot of information that includes SHA-1 and SHA-256. We search for the SHA-1 keys with the “Variant” and “Config” values set to “debug” and “release”, respectively, and then paste these keys into the corresponding ‘SHA-1 Certificate Fingerprint’ sections
- DEBUG
- RELEASE
- NOTE: Make sure that you have received the signed JKS key.
- If you don’t know how to sign your app, check this link.
- This way, we don’t need to generate extra keys for the published application that has been published with this key.
- Now, go to your project and find build.gradle in android folder and find dependencies. Then, add this line of code.
classpath 'com.google.gms:google-services:4.3.15'- Then go to build.gradle in android/app and find dependencies again. Then, add this line of code.
implementation 'com.google.android.gms:play-services-auth:20.4.1'- Finally, you are ready to go!
Step 4: Dart side :)
- Here we are with easiest step and last step :)
- Go to your pubspec.yaml and add “google_sign_in: ^6.0.2” package. And use it like below!
//Default definition
GoogleSignIn googleSignIn = GoogleSignIn(
scopes: [
'email',
],
);
//If current device is Web or Android, do not use any parameters except from scopes.
if (kIsWeb || Platform.isAndroid ) {
googleSignIn = GoogleSignIn(
scopes: [
'email',
],
);
}
//If current device IOS or MacOS, We have to declare clientID
//Please, look STEP 2 for how to get Client ID for IOS
if (Platform.isIOS || Platform.isMacOS) {
googleSignIn = GoogleSignIn(
clientId:
"YOUR_CLIENT_ID.apps.googleusercontent.com",
scopes: [
'email',
],
);
}
final GoogleSignInAccount? googleAccount = await googleSignIn.signIn();
//If you want further information about Google accounts, such as authentication, use this.
final GoogleSignInAuthentication googleAuthentication = await googleAccount!.authentication;If you have read this article and would like to support me, don’t be shy — buy me a coffee! :) ☕☕☕
