Create Login with Firebase feature in Flutter

Hello everyone, welcome back at porkaone. On this occasion we will learn how to create a login feature in Flutter with Firebase. How do you do it? Come on, follow the details below.

How to Create Login with Firebase in Flutter

1. Create a flutter project, use flutter version 3 or a newer version that supports null safety.

2. Create a new project in firebase via https://firebase.google.com. And connect the flutter project with firebase. Follow the tutorial at the following link https://www.porkaone.com/2023/12/tutorial-on-how-to-set-up-firebase-and.html. You must connect Flutter to Firebase, because if not, an error will occur.

3. After successfully connecting, return to your Firebase dashboard. Click the build menu --> Authentication --> then select the sign-in method tab --> on native providers --> select email/password. Pay attention to the image below!

Add Provider

4. Then click or switch enable as shown in the image below. Then click save. At this point, the Firebase configuration is complete. It's time for us to code!

Add Providers

5. Still on the authentication page. Click the Users tab --> click the add user button, then fill in the desired email and password --> then click add user to save the data.

Add User

6. Return to your flutter project. Then open the pubspec.yaml file and add the firebase_core: ^2.23.0 and firebase_auth: ^4.14.1 packages as shown below. Then save the file to download the package.

Add Package

7. Open the main.dart file then modify it with the script below.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';


import 'firebase_options.dart';
import 'home.dart';


void main() async {
  
  WidgetsFlutterBinding.ensureInitialized();

  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _login() async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );

      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
            builder: (context) => HomePage(userCredential.user?.email ?? "")),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Email atau Password Anda Salah!'),
        action: SnackBarAction(
          label: 'Tutup',
          onPressed: () {
          },
        ),
      ));
      print("Error: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: _login,
                child: Text('Login'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

8. Create a new file with the name home.dart then add the script below.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

import 'main.dart';

class HomePage extends StatelessWidget {
  final String userEmail;

  HomePage(this.userEmail);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Selamat datang, $userEmail!'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => LoginPage()),
                );
              },
              child: Text('Logout'),
            ),
          ],
        ),
      ),
    );
  }
}

9. We have carried out all the steps. If successful, the display will look like the image below. Make sure all steps are carried out as above, if an error occurs, immediately ask directly in the comments column below.

You can create an even cooler appearance by using shapes and images as you wish.

OK, that's the tutorial on how to create a login feature with Firebase in Flutter. Hopefully this short tutorial is useful. If there are any problems, immediately ask directly in the comments column below. That's all and thank you very much.