Authentication to Firebase

This is the thirteenth part of my journey to build and publish a Flutter based app for the App Store and Google Play.

Lets create an authenticated end user.

TL:DR – Authentication is built-in to Firebase. All that heavy lifting is done for you and lets you focus on your unique functionality.

Authentication to Firebase and its Cloud Firestore database

We are going to get our app to authenticate the connection to the firebase cloud firestore. To do that requires more plugins to be enabled from Flutterfire set of plugins and from Flutter plugins. All are Flutter first-party plugins, that is to say they are actively developed by the firebase or flutter team.

Firebase authentication brings a new level of maturity to our app and supports all identities we could need:

• Google
• Email and Password
• Phone
• Anonymous users
• GitHub
• Facebook
• Twitter

Add the dependencies to pubspec.yaml

The Google Sign-in plugin is required to use the firebase_auth plugin for Google authentication. The others are required by the example code we are going to integrate. We already added cloud_firestore now add firebase_auth, google_sign_in, firebase_core, firebase_dynamic_links and uuid to the dependencies: in pubspec.yaml and install from the command line using flutter pub get or from Android Studio from the Flutter commands toolbar when pubspec.yaml is open.

# Flutter plugins used in this app
dependencies:

  flutter:
    sdk: flutter

  cloud_firestore: ^0.13.7
  firebase_auth: ^0.16.1
  google_sign_in: ^4.5.1
  firebase_core: ^0.4.4
  firebase_dynamic_links: ^0.5.1
  uuid: ^2.0.2

Enable the 'Phone' Sign-in provider in the Firebase console

The 'Phone' Sign-in provider needs to be enabled in the Firebase console. Under Authentication, choose the Phone Sign-in provider and enable it. Add a test phone number. Save the changes.

Modify and integrate the example code

The FirebaseExtended github repo maintains an example of the flutterfire firebase_auth plugin in a simple app. Lets take this example code and drop it into our app and see if we can integrate it. Look in the lib folder where the flutter code resides flutterfire/packages/firebase_auth/firebase_auth/example/lib/. The main.dart is just a simple app. but the register_page.dart and the siginin_page.dart are where all the firebase logic resides.

The examples look to have been written for the purpose of being dropped in and integrated.

To use the code open the file, press the raw button on github and select all and copy paste the code into a new file in Android Studio in your own lib folder, or clone or download the whole repo and copy it however you wish. Do ensure you review the license, which permits modification provided the copyright notice is displayed.

Remember we used routes to organise our screen transitions so its simple to add the two new pages and check them out.

routes: {
  '/': (context) => FirstPage(),
  '/Establishments': (context) => MyHomePage(),
  '/SignInPage': (context) => SignInPage(),
  '/RegisterPage': (context) => RegisterPage(),

And to activate the new routes just add two IconButton actions to the App Bar.

IconButton(
icon: Icon(
  Icons.person_add,
  semanticLabel: 'Test Registration',
),
onPressed: () {
  Navigator.pushNamed(context, '/RegisterPage');
},
),
IconButton(
icon: Icon(
  Icons.person_outline,
  semanticLabel: 'Test SignIn/SignOut',
),
onPressed: () {
  Navigator.pushNamed(context, '/SignInPage');
},
),

Lets test the components first, then once they are working correctly they can be styled. Tap the 'Sign in anonymously' button, and you should see the anonymous user in the Firebase console. It is pretty easy to get an authenticated user connected!

The app still doesnt do anything. Lets turn to making an authenticated user be able to create, read, update and delete some data