Flutter & Firebase App Tutorial — Part 3 Firebase Sign In Anonymously

5 min readOct 23, 2021

Create a flutter authenticate app in 10 mins by using firebase as the back-end. This article will show you how to enable Firebase Sign In Anonymously in Flutter like a pro. If you haven’t set up your environment, please go to Flutter & Firebase App Tutorial — Part 1 Get Started.

More Tutorials:

Flutter & Firebase App Tutorial — Lumei Digital

Install Packages
Enable authentication methods in firebase projects
Create a service
Sign In Anonymous

Firebase Sign In Anonymously in Flutter — Lumei Digital

Step 1️⃣: “firebase_auth: ^3.1.4”, “firebase_core: ^1.8.0” and “cloud_firestore: ^2.5.4” within the dependencies section in the pubspec.yaml

Install Firebase Packages — Lumei Digital

Step 2️⃣: Enable authentication methods in your firebase project

✅Enable Anonymous login

✅Enable Email login

Enable authentication methods — Lumei Digital

Step 3️⃣: Create a service

We will enable many sign-in methods, for example, email login, anonymous, and more, so it’s more organized to have a separate class inside the app to handle all different authentication cases. In this case, all authenticated logic will be in one single place and it’s easy to maintain and troubleshoot in the future.

Step 3.1 Create a services folder

Step 3.2 Create an auth_service.dart, and import 'package:firebase_auth/firebase_auth.dart';

final FirebaseAuth _auth =FirebaseAuth.instance;

Create an instance of Firebase authentication. This authentication instance object will let you communicate with Firebase Auth on the back-end.

Future signInAnonymously(){
   UserCredential result = await _auth.signInAnonymously();
   User? user = result.user;
}

Please note that _auth.signInAnonymously() won't work if you do not enable Sign In Anonymous in your firebase project.

final property means it’s not gonna change in the future.
_ means it’s private and only used in this file.
FirebaseAuth object, which is an instance of that firebase auth class that is gonna give us the access to all the different properties and methods on this class like sign in anonymously.

Step 4️⃣ Initialize Firebase App

Step 4.1 all Firebase products now depend on firebase_core version (0.5.0+), therefore you need to add it in the pubspec.yaml file:

Step 4.2 Initialize Firebase App in the main.dart file. Please refer to this post to see more code examples.

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

Step 5️⃣ Hook the service and screen together.

This is our widget structure so in order to show SignInscreen, we need to go to the Wrapper widget and Authenticate widget to return the widget we want.

Step 6.1 Return Authenticate widget in the Wrapper widget.

Return Authenticate widget in the Wrapper widget — Lumei Digital — Return `Authenticate` widget in the `Wrapper` widget — Lumei Digital

Step 6.2 Return SignIn widget in the Authenticate widget.

Return SignIn widget in the Authenticate widget — Lumei Digital

Step 6.3 Change SignInwidget

We hook the SignInwidget with the AuthServicestarting with signInAnonymously()to make sure everything is fine.

return Scaffold(
      backgroundColor: secondary,
      appBar: AppBar(
        backgroundColor: primary,
        elevation: 0.0,
        title: const Text('Sign in to Lumei Digital'),        
      ),
      body:Container(
         padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 50.0),
         child: ElevatedButton(                                
                child: const Text(
                  'Sign in',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () async {
                 dynamic result = await_authService.signInAnonymously();
                }),
      )
    );

Next, we will create a custom user model to only reserve the information we need in the app.

Flutter & Firebase App Tutorial — Part 3 Firebase Sign In Anonymously

More Tutorials:

Table of Contents

More Tutorials:

Written by Jumei Lin