Die Benutzerregistrierung ist ein zentraler Bestandteil vieler moderner Apps. Mit Firebase Authentication bietet Google eine leistungsstarke Lösung, die sich nahtlos in Flutter integrieren lässt. In diesem Beitrag zeige ich dir, wie du Firebase Authentication in dein Flutter-Projekt «zero» einbindest, ein Registrierungsformular implementierst und die Benutzerfreundlichkeit durch Fehlerbehandlung optimierst.

---

Warum Firebase Authentication?

Firebase Authentication erleichtert es dir, sichere Anmeldemethoden wie E-Mail/Passwort, Google oder Facebook in deiner App zu implementieren. Die Vorteile:

• Sicherheit: Firebase kümmert sich um sichere Speicherung und Verwaltung von Benutzerdaten.
• Einfache Integration: Dank gut dokumentierter SDKs kannst du die Authentifizierung schnell einrichten.
• Erweiterbarkeit: Nutze Firebase für weitere Funktionen wie Firestore, Push-Benachrichtigungen und mehr.

---

Firebase einrichten und in Flutter integrieren

Schritt 1: Firebase-Projekt erstellen

1. Gehe zur Firebase Console.
2. Erstelle ein neues Projekt mit dem Namen «zero».
3. Füge eine Android-App hinzu und lade die Datei google-services.json herunter.
4. Kopiere google-services.json in den Ordner android/app deines Flutter-Projekts.

Schritt 2: Firebase CLI installieren

Um die Firebase CLI zu installieren und dein Projekt zu konfigurieren, führe folgende Befehle im Terminal aus:

npm install -g firebase-tools
firebase login
firebase init

Wähle Authentication und Firestore aus, wenn du nach den Diensten gefragt wirst.

Schritt 3: Firebase SDK in Flutter einrichten

Abhängigkeiten hinzufügen
Um Firebase in dein Flutter-Projekt zu integrieren, öffne die Datei pubspec.yaml und füge die benötigten Abhängigkeiten hinzu. Die wichtigsten Pakete sind firebase_core für die Grundfunktionalität von Firebase und firebase_auth für die Benutzerregistrierung und -authentifizierung.

dependencies:
  firebase_core: ^latest_version
  firebase_auth: ^latest_version

Installiere die neuen Pakete, indem du den folgenden Befehl im Terminal ausführst:

flutter pub get

Firebase in der Hauptdatei initialisieren
Nach der Installation der Abhängigkeiten musst du Firebase in deiner App initialisieren. Öffne die Datei lib/main.dart und passe den Code so an, dass die Firebase-Initialisierung vor dem Start der App erfolgt:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'zero',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const RegisterScreen(),
    );
  }
}

Der Aufruf von await Firebase.initializeApp() stellt sicher, dass Firebase korrekt eingerichtet ist, bevor die App vollständig geladen wird.

Mit diesen Schritten ist Firebase jetzt in deinem Flutter-Projekt integriert und bereit für die Implementierung der Benutzerregistrierung. Du kannst nun damit beginnen, Firebase Authentication für dein Projekt zu verwenden.

---

Registrierungsformular implementieren

Schritt 1: UI für das Formular erstellen

Erstelle eine Datei lib/screens/register_screen.dart und füge ein einfaches Formular hinzu:

import 'package:flutter/material.dart';

class RegisterScreen extends StatefulWidget {
  const RegisterScreen({Key? key}) : super(key: key);

  @override
  State<RegisterScreen> createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Registrieren')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'E-Mail'),
                validator: (value) {
                  if (value == null || !value.contains('@')) {
                    return 'Bitte eine gültige E-Mail eingeben';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Passwort'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.length < 6) {
                    return 'Das Passwort muss mindestens 6 Zeichen lang sein';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              _isLoading
                  ? const CircularProgressIndicator()
                  : ElevatedButton(
                      onPressed: _register,
                      child: const Text('Registrieren'),
                    ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _register() async {
    if (!_formKey.currentState!.validate()) return;

    setState(() {
      _isLoading = true;
    });

    try {
      // Registrierungslogik (wird im nächsten Abschnitt implementiert)
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Fehler: ${e.toString()}')),
      );
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }
}

---

Firebase Authentication implementieren

Schritt 1: Authentifizierungslogik hinzufügen

Aktualisiere die Methode _register in RegisterScreen:

import 'package:firebase_auth/firebase_auth.dart';

Future<void> _register() async {
  if (!_formKey.currentState!.validate()) return;

  setState(() {
    _isLoading = true;
  });

  try {
    await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: _emailController.text.trim(),
      password: _passwordController.text.trim(),
    );
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Registrierung erfolgreich!')),
    );
  } on FirebaseAuthException catch (e) {
    String errorMessage;
    switch (e.code) {
      case 'email-already-in-use':
        errorMessage = 'Diese E-Mail wird bereits verwendet.';
        break;
      case 'weak-password':
        errorMessage = 'Das Passwort ist zu schwach.';
        break;
      default:
        errorMessage = 'Ein unbekannter Fehler ist aufgetreten.';
    }
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(errorMessage)),
    );
  } finally {
    setState(() {
      _isLoading = false;
    });
  }
}

---

Fehlerbehandlung und Benutzerfreundlichkeit

• Eingabeverifizierung:
  • Stelle sicher, dass das Formular erst abgeschickt wird, wenn alle Felder valide sind.
• Benutzerfeedback:
  • Zeige Fehler oder Erfolgsmeldungen mit SnackBar, damit der Benutzer sofort weiss, was passiert ist.
• Ladezustand anzeigen:
  • Nutze einen CircularProgressIndicator, um Ladezustände anzuzeigen.