Flutter Firebase Authentication Example — showing a Home screen if logged in

This is a Flutter Firebase authentication example (using firebase_auth) were we are showing a Home screen (widget) if logged in and another screen (widget) if logged out. The relevant important dart code for actually listening if the user is logged in or not can be found at the highlighted lines. I am using firebase_auth: ^1.1.3 (which is very different from versions before 0.18.0). Read the comments and replace the Widgets to what you think should be for a logged in user and the logged out user. Right now we are simply just loading a Home widget, and in it, we will display Widget that is for the logged in user, or if logged out, we will display a Widget that is for the logged out user (in this case, AuthTypeSelector).

class AuthExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FileIdea Example App',
      theme: ThemeData.dark(),
      home: Scaffold(
        body: Home(),
      ),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  bool isloggedin = false;
  @override
  void initState() {
    super.initState();
    _auth.userChanges().listen((event) {
      updateStatus(event); //pass object
    });
  }

  updateStatus(event) {
    setState(() {
      isloggedin = event != null; //set variable true or false if logged in or not through set state 
      print("set!" + isloggedin.toString()); // print to log
    });
  }

  @override
  Widget build(BuildContext context) {
    if (isloggedin) {
      return Scaffold(
          appBar: AppBar(
            title: const Text('FileIdea Example App'),
          ),
          // Define your widget(s) that is for the logged in user
          body: Column(children: [
            Container(child: Text("Welcome you are logged in!")),
            TextButton(
                onPressed: () => {_auth.signOut()}, child: Text("Logout"))
          ]));
    } else {
      // Define your widget that is for the logged out user
      print("not logged in");
      return AuthTypeSelector();
    }
  }
}

My pubspec.yaml file:

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^1.1.3
  cloud_firestore: ^2.0.0
  firebase_core: "^1.0.4"
  flutter_svg: ^0.22.0

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  google_sign_in: ^5.0.2
  flutter_signin_button: ^2.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  change_app_package_name: ^1.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

Other helpful code can be found at FirebaseExtended with more Flutter Firebase authentication examples, with various logins and register sample.

0 0 votes
Article rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments