Flutter & Firebase Authentication | Auth with Google, Facebook, Twitter & Phone Methods (PART 1)
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Flutter & Firebase Authentication | Auth with Google, Facebook, Twitter & Phone Methods
Today you'll learn the best way to flutter firebase authentication with social providers like Google, Facebook, Twitter, and Phone authentications implemented in one app.
► PART 2: • Flutter & Firebase Aut...
📗 Flutter and Firebase Authentication comes with various functionalities like authentication, DBMS, and much more. In this tutorial, we will integrate authentication using social providers. This video is for beginners and not only them the more advanced users can also update their skills as this is coded in the latest flutter version which means all changes have been implemented here.
📗 TIMELINE
00:00 What will you learn?
00:43 App Showcase
04:29 Creating New Flutter Project
05:33 (iOS) Linking Firebase To Our Flutter Project
08:20 (Android) Linking Firebase To Our Flutter Project
12:00 Adding Packages using Pubspec Assist
15:38 Deleting BoilerCode of main.dart
17:07 Coding Our Splash Screen
21:00 Sign-in Provider for Managing Authentication
29:15 Designing Our Login Screen
40:30 Sign-in Provider - Google Sign-in creation
53:56 Internet Provider - Connectivity Package Installation
01:06:48 Cloud Firestore - Modifying Firestore rules and coding it up
01:16:20 Debugging Google sign-in error for iOS Simulator
01:26:00 Coding up our HomeScreen.dart file
01:36:00 Adding Facebook Provider to Cloud Firestore
01:37:26 Adding Facebook For Android Device
01:42:00 Adding Facebook For iOS Device
01:46:45 Coding Facebook Authentication
► Source Code:
github.com/backslashflutter/s...
► Important Links:
FirebaseAuthException: bit.ly/3Pg33Sf
URL Schemes For Info.plist: bit.ly/3yIjPlT
Facebook GRAPH API: bit.ly/3RDsCxY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
► Join this channel to get access to perks:
/ @backslashflutter
🔔 Get updated with my projects🔔
Follow me on Github: github.com/backslashflutter
#firebase #flutter #backslashflutter
🔥 Subscribe for more:
/ backslashflutter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If this helps make sure to share it with friends and colleagues who will benefit from this
Have questions/queries? 💬 Comment below I will be happy to help
Reddit Username : @backslashflutter
Instagram Username: @backslashflutter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
🔗OTHER:
PLAYLIST:
1. FLUTTER AND FIREBASE
LINK :bit.ly/35Uq7Ba
2. FLUTTER SPEEDCODE
LINK: bit.ly/3sFDy1O
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
OTHER VIDEO:
Complete Flutter Installation & Setup Tutorial For App Development on MacOS (Latest)
• Complete Flutter Insta...
About Flutter:
Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. The first version of Flutter was known as codename "Sky" and ran on the Android operating system.
THANKS FOR LOVE AND SUPPORT💪
For PART 2 of Social Auth in Flutter and Firebase
Link: th-cam.com/video/Jp9g-b1PPS0/w-d-xo.html
Just finished everything about this great tutorial. Many thanks for sharing this amazing knwoledge in such detailed work.
Glad it was helpful!
Thank you so much for this tutorial..very neatly done👏
Following you
Welcome 😊
Mind blowing explaination
hey , my code is fine . but i am not able to signin with google can u plz help me
Thanks
thanks man good tutoriall thx
Thank you bro 😊
Thank you
Thanks for watching ❤️
Hi sir your flutter tutorial is very helpfull and easy to learn,
Sir I am having trouble in _stringprocessing,FBAEMkit,FBSDKCorekit,FBSBKLoginkit
I have searched and tried many alternatives but I Can't get any solution , I am having macbook air intel chip.
Sir can you please guide me .
I got an error: Integrating target `FBSDKLoginKit`
Adding Build Phase '[CP] Copy XCFrameworks' to project.
- Generating deterministic UUIDs
- Stabilizing target UUIDs
- Running post install hooks
[!] An error occurred while processing the post-install hook of the Podfile.
undefined local variable or method `continue' for #
after running arch -x86_64 pod install
-- > can you help on this?
Can you check this command arch -x86_64 pod install --repo-update (remember only do this command if you are using m1 mac. If you are not on m1 mac then please use pod install only)
@@backslashflutter what if we are using windows os
its really great video .
Glad you think so!
I'm getting this Error :-The message "App not active. This app is not accessible right now, and the app developer is aware of the issue. You will be able to log in when the app is reactivated
you are great bro💌
thanks for watching
Nice and super tutorial also make tutorial phone otp authentication
Yes I have that thing in my mind for next tutorial. Thanks for watching
@@backslashflutter thanks sir, also make tutorial firbase auto create collection and subcollection throw flutter app installed on mobile
hey, thanks for this, awesome tutorial. I'm a beginner, and so I wonder: do you coders reuse this sort of piece like, copy and paste, into all your projects? I believe what's in here seems to be pretty standard login logic. Thanks.
also, you should have a patreon link and/or a TH-cam contribute button for fellow beginners to show some monetary appreciation. You deserve.
I would really appreciate if you become the patreon for backslash flutter. I am having some good things coming soon for our community. These can be codes worth more than 1000 USD only for my patreon members. patreon.com/backslashflutter
@@backslashflutter
sure, I'm gonna check that
my build.gradle file is different than yours and i am having problem with the firebase initialization. what should i do
build.gradle is different from the video because it has been updated a lot compared to a year ago. In particular, androidproject>build,.gradledl. Until a few months ago, there was a 'buildscript', but these days, there is no 'buildscript' part when creating a project. I had the same problem and solved it this way.
android>build.gradle:
plugins {
// ...
// Add the dependency for the Google services Gradle plugin
id 'com.google.gms.google-services' version '4.3.15' apply false
}
allprojects {
repositories {
google()
mavenCentral()
}
}
rootProject.buildDir = "../build"
subprojects {
project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
project.evaluationDependsOn(":app")
}
tasks.register("clean", Delete) {
delete rootProject.buildDir
}
Keep upload more explain video
Sure I will
Hey great tutorial, can you please make a video on Bloc and All Social Auth with GoRouter if possible.
ok sure. Will do that
There is a problem
Google login at 1:20:19
Note that I have Windows, not iOS
I don't know where the error is
Please open the github repo and see the info.plist file
Sometimes the format of it is important
app not active: this app is not accessibile right now and the app developer is aware of the issue. you will be able to log in when the app is reactivated
thid error when i login with fb use
can I know what is the version of flutter to create this project, cos ios parts is complicated to config and unsuccess to compile
is this issue still exists in your app?
Keep going 💫
thanks!
@@backslashflutter 😊❤️my pleasure
Where?
@@shagunsingh8740 my activa
Hello, I would like you to do a tutorial that explains how from a form we can send data to a firebase database, for example the name, first name and photo please 🙏
ok sure. I will do that soon mat
my screen won't go to homescreen after login
1:38:55 I was write Package Name but I got error One or more invalid package names. Make sure that the package name links to a valid Google Play Store URL . please what should I do
That is a change in the package issue now if you want to add facebook login, you must have a url that is to say that your application is already in playstore, which is nonsense.
bhai kya solution mila , please help me
hello, thanks for the good coures, i have an issue.
while i'm trying to login with google account,
and i canceled it and it got an error code called 'sign_in_canceled'.
is it a normal situation?
what can i do to handle this?
this is showing because if you are coding on visual studio code you have uncaught exception as ticked and all exception as ticked. Please untick all exception option.
When I try to sign in with facebook I am getting null check operator used on a null value error. Does anybody come across with the same one?
can you please check the source code available over github.com/backslashflutter
I'm having same error, any solution to it
hey, man, another quick issue: do you know why this thing doesn't seem to run on the web?
there is sepearate setup for this in flutter web, do let me know I can create a separate video for this
@@backslashflutter hey, man, no need for video, I can check around and it is not a priority, I was just curious since I thought Flutter is 'one code for everything'... Cheers
Hi how i can use this code in web application flutter+firebase!! please?!
that is a totally different thing for implementation mate.
while clicking on login with facebook - on the browser there is a error
" app not active. This app is not accessible right now and the app developer is aware of the issue. You will be able to log in when app is reactivated".
What to do?
Can you please print the error in debug console.
@@backslashflutter Hi thanks for replying , There no such error in debug console . Its that when click on the button login with facebook and the screen is changed to go to browser for logging in then on the browser screen itself there is message - > with heading ERROR and the
message is -> " App not active: This app is not accessible right now and the app developer is aware of the issue. You will beable to log in when the app is reactivated".
Iam pasting the content of debug console dusring this process:
I/flutter (32142): FaceBook login start
I/Timeline(32142): Timeline: Activity_launch_request time:143962706
D/DecorView[](32142): getWindowModeFromSystem windowmode is 1
D/DecorView(32142): createDecorCaptionView windowingMode:1 mWindowMode 1 isFullscreen: true
W/xample.blocaut(32142): Accessing hidden field Ljava/net/Socket;->impl:Ljava/net/SocketImpl; (greylist, reflection, allowed)
W/xample.blocaut(32142): Accessing hidden method Ldalvik/system/CloseGuard;->get()Ldalvik/system/CloseGuard; (greylist,core-platform-api, linking, allowed)
W/xample.blocaut(32142): Accessing hidden method Ldalvik/system/CloseGuard;->open(Ljava/lang/String;)V (greylist,core-platform-api, linking, allowed)
W/com.facebook.internal.NativeProtocol(32142): Apps that target Android API 30+ (Android 11+) cannot call Facebook native apps unless the package visibility needs are declared.
Please follow developers.facebook.com/docs/android/troubleshooting/#faq_267321845055988 to make the declaration.
I/WebViewFactory(32142): Loading com.google.android.webview version 107.0.5304.105 (code 530410533)
W/linker (32142): Warning: "/data/app/~~3pTKfkG5oF6d_oCdeHHtXA==/com.google.android.webview-oXZ9aAhqG0wU-dbgGv3bJQ==/base.apk!/lib/arm64-v8a/libmonochrome.so" unused DT entry: unknown processor-specific (type 0x70000001 arg 0x0) (ignoring)
W/xample.blocaut(32142): Accessing hidden method Landroid/os/Trace;->isTagEnabled(J)Z (greylist, reflection, allowed)
W/xample.blocaut(32142): Accessing hidden method Landroid/os/Trace;->traceBegin(JLjava/lang/String;)V (greylist, reflection, allowed)
W/xample.blocaut(32142): Accessing hidden method Landroid/os/Trace;->traceEnd(J)V (greylist, reflection, allowed)
W/xample.blocaut(32142): Accessing hidden method Landroid/os/Trace;->asyncTraceBegin(JLjava/lang/String;I)V (greylist, reflection, allowed)
W/xample.blocaut(32142): Accessing hidden method Landroid/os/Trace;->asyncTraceEnd(JLjava/lang/String;I)V (greylist, reflection, allowed)
I/cr_WVCFactoryProvider(32142): Loaded version=107.0.5304.105 minSdkVersion=29 isBundle=true multiprocess=true packageId=2
W/xample.blocaut(32142): Accessing hidden method Ljava/security/spec/ECParameterSpec;->setCurveName(Ljava/lang/String;)V (greylist, reflection, allowed)
I/cr_LibraryLoader(32142): Successfully loaded native library
I/cr_CachingUmaRecorder(32142): Flushed 8 samples from 8 histograms.
W/xample.blocaut(32142): Accessing hidden method Ldalvik/system/BlockGuard;->getThreadPolicy()Ldalvik/system/BlockGuard$Policy; (greylist,core-platform-api, linking, allowed)
W/xample.blocaut(32142): Accessing hidden method Ldalvik/system/BlockGuard$Policy;->onNetwork()V (greylist, linking, allowed)
I/Timeline(32142): Timeline: Activity_launch_request time:143962966
I/Timeline(32142): Timeline: Activity_launch_request time:143963017
D/DecorView[](32142): getWindowModeFromSystem windowmode is 1
D/DecorView(32142): createDecorCaptionView windowingMode:1 mWindowMode 1 isFullscreen: true
Please help!
I am getting an error for StateError (Bad state: field does not exist within the DocumentSnapshotPlatform)
Looks like something changed in the newer version of cloud firebase?
In line 270 of the login_screen "await sp.getUserDataFromFirestore(sp.uid).then((value) => sp"
and line 211 of sing_in_provider "Future getUserDataFromFirestore(uid) async {"
Please clone the repo and double check it with your code.
@@backslashflutter Will do, was following the google only but maybe was something you did during the others login options that I am missing.
Another question. Will you someday make a video using bloc? Having a hard time using it.
Ok sure
Can you please share sh1 key issue resolving link...?
here you go
th-cam.com/video/wGOTwojezy8/w-d-xo.html
log in to a security logout information the same information time and time again login information does not log in but I delete that account and log in
didn't got your point mate, maybe you can tell if issue is solved or still present.
In android choose account in Google sing in is not show
What I do to show that block
Can you please look at the final source code, link in bio and see the implementation
I see that code but problem not in Google sign up and sing up successfully. But block of user google account of not show in android.
Please help
It's working thank you! but bro when then already exit user can't logout and sign, i mean when the logging 2nd time can not log bro
This is not possible mate, you can print the debug log
@@backslashflutter
W/System (29563): Ignoring header X-Firebase-Locale because its value was null.
W/System (29563): Ignoring header X-Firebase-Locale because its value was null.
D/FirebaseAuth(29563): Notifying id token listeners about user ( AHEbyuvDLnfNNvpmS5fR0U4syrp1 ).
I/flutter (29563): EXISTING USER
E/flutter (29563): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: Bad state: cannot get a field on a DocumentSnapshotPlatform which does not exist
E/flutter (29563): #0 DocumentSnapshotPlatform.get (package:cloud_firestore_platform_interface/src/platform_interface/platform_interface_document_snapshot.dart:77:7)
E/flutter (29563): #1 _JsonDocumentSnapshot.get (package:cloud_firestore/src/document_snapshot.dart:92:48)
E/flutter (29563): #2 _JsonDocumentSnapshot.[] (package:cloud_firestore/src/document_snapshot.dart:96:40)
E/flutter (29563): #3 SignInProvider.getUserDataFromFirestore. (package:googlesignin/provider/sign_in_provider.dart:180:22)
E/flutter (29563): #4 _rootRunUnary (dart:async/zone.dart:1434:47)
E/flutter (29563): #5 _CustomZone.runUnary (dart:async/zone.dart:1335:19)
E/flutter (29563):
E/flutter (29563): #6 SignInProvider.getUserDataFromFirestore (package:googlesignin/provider/sign_in_provider.dart:175:5)
E/flutter (29563):
E/flutter (29563): #7 _LoginScreenState.handleGoogleSignIn.. (package:googlesignin/screens/login_sc.dart:164:15)
E/flutter (29563):
E/flutter (29563):
@@dasun1093 please reply on ig
This code is not working in Android device even after downloading source code from GitHub.. error is async suspended.. how to solve this problem.. help me.
@@somnathdas8922 don’t run code , try the code watching video. Then it’s should work. I think firebase connecting json file doesn’t have in github code. And also facebook secret code ..
i love you man
thanks for watching
@@backslashflutter
Do you know if anything changed in authentication with Twitter after you made this video? I checked the video several times and everything is exactly the same but after confirming the login with Twitter it returns to my login page and returns sp.hasError == true. It was the only problem I had, the rest worked fine.
My plan on developer twitter is Elevated, however, when I put a website, terms-and-service and privacy-police I put any url from another site, could that be the problem?
@@fernandoferreiradev i think that should not be a problem. Quite not sure about it to be honest, let me know if you don;t find answer to your question then I can dig more into this.
@@backslashflutter The problem is that I am not getting the user data return. My keys are correct both in the firebase and in the config, on the twitter authorize screen the name of my Developer Twitter project appears and the permissions that I am asking for, but even so I do not receive the return of the data as I should. My code is exactly the same as your repository. The feedback I get:
Null check operator used on a null value in saveDataToSharedPreferences()
This type of code so complex please write easy code
When implementing something that is never done on youtube before, i guess the code would be overwhelming in starting, but i did everything to explain it to public. You can search on youtube and there are no video which implements twitter auth alongside google and Facebook
@@backslashflutter plz flutter restapi calling with provider full app
@@MuhammadAdnan-vs5cx sure bro
@@backslashflutter
PlatformException (PlatformException(sign_in_canceled, com.google.android.gms.common.api.ApiException: 12501: , null))
Getting this while tapping or pressing back after clicking google sign in button
HALF OF MY FLUTTER PROJECTS RELY ON YOUR TUTORIALS. THANKS MAN. REALLY APPRECIATE YOUR EFFORTS❤🩹❤💯
hahaha, thanks for watching
@Backslash Flutter
PlatformException (PlatformException(sign_in_canceled, com.google.android.gms.common.api.ApiException: 12501: , null))
Getting this while tapping or pressing back after clicking google sign in button
@Backslash Flutter
Sorry for delay reply, can you please let me know if this issue still exists
@@backslashflutter it's solved, thanks for asking. Your videos are really very helpful.
@@pranaykoley8285 Can you tell what you did please? I'm getting the same issue.
@@thedesiforumz its solved? helpme