Introduction
Firebase Authentication simplifies user sign-in flows in Flutter apps by providing secure, back-end services. With firebase authentication you can integrate email/password, Google, Facebook, and much more with minimal boilerplate. This tutorial walks you through setting up Firebase Authentication in your Flutter project, from dependency installation to a basic email/password login UI.
Prerequisites
• Flutter SDK installed (≥2.5.0)
• A Firebase project in the Firebase Console
• FlutterFire CLI or manual GoogleService-Info.plist / google-services.json setup
• Basic understanding of Flutter widgets and asynchronous code
Adding Dependencies
Open pubspec.yaml and add:
dependencies:
flutter:
sdk: flutter
firebase_core: ^2.0.0
firebase_auth
Run: flutter pub get
Initializing Firebase
Before using Firebase Auth, initialize Firebase in your main.dart.
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Firebase Auth',
home: const LoginPage(),
);
}
}This ensures Firebase core services, including firebase authentication, are ready at app start.
Building Authentication UI
Create login_page.dart with two TextFields for email/password and two Buttons to sign in or register.
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _emailCtl = TextEditingController();
final _passCtl = TextEditingController();
final _auth = FirebaseAuth.instance;
Future<void> _signIn() async {
try {
await _auth.signInWithEmailAndPassword(
email: _emailCtl.text.trim(),
password: _passCtl.text.trim(),
);
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error: ${e.toString()}')),
);
}
}
Future<void> _register() async {
try {
await _auth.createUserWithEmailAndPassword(
email: _emailCtl.text.trim(),
password: _passCtl.text.trim(),
);
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error: ${e.toString()}')),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Login')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
TextField(controller: _emailCtl, decoration: const InputDecoration(labelText: 'Email')),
TextField(controller: _passCtl, decoration: const InputDecoration(labelText: 'Password'), obscureText: true),
const SizedBox(height: 20),
ElevatedButton(onPressed: _signIn, child: const Text('Sign In')),
TextButton(onPressed: _register, child: const Text('Register')),
],
),
),
);
}
}Handling Authentication State
Use FirebaseAuth’s authStateChanges to react to login/logout events. Wrap your home widget in a StreamBuilder:
StreamBuilder<User?>(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
} else if (snapshot.hasData) {
return const HomePage();
} else {
return const LoginPage();
}
},
)This approach ensures your UI always reflects the current firebase auth status.
Vibe Studio
Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.
Conclusion
You’ve now integrated Firebase Authentication into your Flutter app. You installed firebase_core and firebase_auth, initialized Firebase at startup, built a basic login/register UI, and monitored auth state changes. From here you can expand to social sign-in, password resets, and user profile management. Firebase Authentication not only simplifies security-sensitive code but also scales with your app as it grows. Explore more on the Firebase docs and happy coding!
