👋 Login Screen

Build a login screen with Anonymous sign in.

Anonymous Auth

Enable anonymous auth in the Firebase console, then implemment it in the auth service.

file_type_flutter services/auth.dart
import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
    // ..
  /// Anonymous Firebase login
  Future<void> anonLogin() async {
    try {
      await FirebaseAuth.instance.signInAnonymously();
    } on FirebaseAuthException {
      // handle error

  Future<void> signOut() async {
    await FirebaseAuth.instance.signOut();

Login Screen

Create a login screen and resuable button to support multiple login methods.

file_type_flutter login.dart
class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            const FlutterLogo(
              size: 150,
              child: LoginButton(
                icon: FontAwesomeIcons.userNinja,
                text: 'Continue as Guest',
                loginMethod: AuthService().anonLogin,
                color: Colors.deepPurple,

class LoginButton extends StatelessWidget {
  final Color color;
  final IconData icon;
  final String text;
  final Function loginMethod;

  const LoginButton(
      required this.text,
      required this.icon,
      required this.color,
      required this.loginMethod});

  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      child: ElevatedButton.icon(
        icon: Icon(
          color: Colors.white,
          size: 20,
        style: TextButton.styleFrom(
          padding: const EdgeInsets.all(24),
          backgroundColor: color,
        onPressed: () => loginMethod(),
        label: Text(text, textAlign: TextAlign.center),

Sign Out

Use the signout method in the Profile screen.

file_type_flutter profile.dart
import 'package:flutter/material.dart';
import 'package:quizapp/services/auth.dart';

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      body: ElevatedButton(
          child: Text('signout'),
          onPressed: () async {
            await AuthService().signOut();
                .pushNamedAndRemoveUntil('/', (route) => false);

Questions? Let's chat

Open Discord