In this article i will explain you step by step how you can add email authentication to your flutter firebase application
Step 1: Create flutter project , ignore this step if you have already created
flutter create flutter_firebase_auth
Step 2: Add Flutter Dependencies for firebase
dependencies:
firebase_auth: ^1.0.1 # add this line
firebase_core: ^1.0.2 # add this line
Run command flutter pub get to install the package
You can use the package by importing like below
import "package:firebase_auth/firebase_auth.dart";
import "package:firebase_core/firebase_core.dart";
Step 3: Create Firebase Project
-
Visit this url https://console.firebase.google.com/u/0/ and create a new project
-
Once project is created you can integrate with android and ios application by clicking on android and ios icon on dashboard
Step 4: Configuring IOS App
- For registering the iOS app, you have to provide unique iOS bundle ID – your iOS app bundle identifier. You can find it in the general setting of Xcode
- After filling the required fields, you’ll see something like this. Further click on Download GoogleServices-Info.plist and place it in MyApplication folder as shown below.
-
Skip step 3 and 4
-
Hit continue to complete the process
Step 5: Configuring Android App
- For registering the Android app, you have to provide a unique package name. For that, you can find it at android>app>build.gradle
-
You will also need the Debug signing certificate SHA-1. You can get that by running the following command in the project directory.
cd android && ./gradlew signingReport
Copy the SHA1 value and paste it into the Firebase console.
-
Now, proceeding to the next step, you will have to download the google-services.json file. You should place this file in the android/app directory.
- You can skip the next step as we are using: Firebase core and Firebase auth packages. Click ‘Continue to Console’ to complete the process.
Step 6: Enable Email/Password Authentication in Firebase
-
Go to the Authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project.
-
Next, you should enable email authentication in the sign-in methods. Once you’ve enabled it, press Save.
Step 7: Initialize firebase app
Open main.dart and use the following code snippet to initialize Firebase App.
future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
Step 8: Create Utility file for Authentication
Create a file, name it according to your choice; and use it as a helper file for firebase authentication and copy paste the following code snippet
import 'package:firebase_auth/firebase_auth.dart';
class AuthenticationHelper {
final FirebaseAuth _auth = FirebaseAuth.instance;
get user => _auth.currentUser;
//SIGN UP METHOD
Future signUp({String email, String password}) async {
try {
await _auth.createUserWithEmailAndPassword(
email: email,
password: password,
);
return null;
} on FirebaseAuthException catch (e) {
return e.message;
}
}
//SIGN IN METHOD
Future signIn({String email, String password}) async {
try {
await _auth.signInWithEmailAndPassword(email: email, password: password);
return null;
} on FirebaseAuthException catch (e) {
return e.message;
}
}
//SIGN OUT METHOD
Future signOut() async {
await _auth.signOut();
print('signout');
}
}
Step 9: Create component for login and signup and call the login and signup method from helper file
//Sign up
AuthenticationUtility()
.signUp(email: email, password: password)
.then((result) {
if (result == null) {
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) => Home()));
} else {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
result,
style: TextStyle(fontSize: 16),
),
));
}
});
//sign in
AuthenticationHelper()
.signIn(email: email, password: password)
.then((result) {
if (result == null) {
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) => Home()));
} else {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
result,
style: TextStyle(fontSize: 16),
),
));
}
});