Authentication, sign-in and real time data in FlutterFlow

Google call Firebase an "app development platform that helps you build and grow apps and games users love". There are many services available as part of the Firebase brand from Google but for FlutterFlow we are be interested in Cloud Firestore, Cloud Messaging, and Cloud Authentication.

You can create Firebase collections and their documents directly from FlutterFlow once you complete setup and link your Firebase project to your FlutterFlow project.

You'll need to setup Firebase and then complete the Firebase integration settings in FlutterFlow

TL:DR — FlutterFlow apps with authentication, sign-in and real time data via cloud firestore really stand out as professional apps.

Setting up Firebase

• Go to console.firebase.google.com and sign in with your Google account.
• Add a project. Use your project codename for the name of the project e.g. YellowGreen and click Continue.
• Enable Google Analytics for the project if you need it.
• Click Create project, and once it is completed, click Continue.
• Enable access to your project from FlutterFlow.
  • Select Project Settings -> Users and Permissions and 'Add Member'.
  • Add This email address is being protected from spambots. You need JavaScript enabled to view it. as an editor, and click Done.
  • Now select the blue 'Advanced Permission Settings' link. (Note this opens the Google Cloud Platform Console in another browser tab).
  • Find the This email address is being protected from spambots. You need JavaScript enabled to view it. entry and edit it (you just created this in the Firebase console and need to give it more roles for FlutterFlow to work)
  • Select 'Add Another Role' and search for and add two roles 'CloudFunctions Admin' and 'Service Account User'. Then click Save.
• Now create your firestore database by selecting Firestore Database from the menu, and clicking 'Create Database'. You will need to choose a location and should choose one best suited to your users and compliant with your data regulations. (I use europe-west2 which is London)
• Start your Firestore database in test mode and then just manage your access control directly from FlutterFlow.
• Enable billing. You'll probably need the pay as you go 'blaze' plan anyway. Many apps will never reach the billing thresholds and you should honestly be delighted if they do!
• Copy the project ID into the FlutterFlow settings below (if will say 'Connect' not 'Remove'). You can find it in Project Settings -> Project ID.

Firebase integration settings in FlutterFlow

In the Firebase section of settings you can connect a firebase project to this project. Again I used the project code name here, it makes it very easy to know that I am using the correct firebase project with this FlutterFlow app. Firebase can be used for authentication, and cloud data storage with the firestore database.

Using Firebase with FlutterFlow allows FlutterFlow based Flutter apps to store app data in the cloud in the Firestore database and brings a whole new dimension to what you can build with collections of data and private data for each end user.

Firebase Project Details

You can open the Firebase console, and if necessary regenerate the Firebase config files for your app here too.

Anonymous Authentication

Anonymous guest accounts let you enforce user-specific security and Firebase rules without requiring credentials from your users. They provide a convenient way to deliver functionality to your users without requiring any further information. Anonymous guest accounts cannot be shared amongst multiple devices since they use a device token.

Another of the benefits of allowing your app to support Anonymous sign-in is that you reduce the friction that would occur if your app required a sign up first. If you implement a sign up later, which might include more information about the user, you can continue to use the credentials created by the the anonymous sign-in so that they can continue to work with the same protected data and for example continue to receive push notifications, in future sessions.

Adding anonymous authentication to a Sign-in page

Use Google Firebase for authentication

Adding the Firebase settings enables you to use firebase authentication for your app. Follow the FlutterFlow documentation guide here FlutterFlow Firebase Authentication Guide to set it up - essentially switch it on in Firestore, enable it in FlutterFlow and make sure you set up landing pages. My apps so far have both anonymous (as a default) and email (as an option) Sign-In only. For this article lets enable the anonymous Sigin-in provider in Firebase authentication.

Authentication Settings in FlutterFlow

In FlutterFlow Settings, go to App Settings, and enable Authentication. Set your initial pages for when your app runs. The Entry Page is for a new user and the Logged in Page is for a returning user.

Sign-in page

The page for a new user that loads on launch

Creating the Sign-in Button

The button has an 'On Tap' action of 'Auth Login', using the Anonymous auth provider we enabled in Google Firebase and creating a user document in the collection 'users'. If you've set up Firebase authentication this will 'just work'. You can test it by running the app and watching the firebase console with the users collection selected. A user document will be created when you tap the button.

• Complete the FlutterFlow Firebase setup steps.
• Enable 'Anonymous Sign in' in the Firebase console for your project
• Create the button
• Add an 'On Tap' 'Authentication', 'Login' action type to 'Auth Provider' 'Anonymous' and check 'Create User Document'.

The Sign-in page is simple. Set the scaffold colour. Mine is a custom colour called 'Background' defined for dark and light mode/appearance. Add a column, spaced evenly, and add a button and your card and ad banner components again.