Stream Authentication Using Flutter, Firebase, and Cloud Functions

...

In this tutorial, you’ll learn how to build serverless authentication for a messaging app using Flutter, Firebase, and Cloud Functions.

Stream Authentication Using Flutter, Firebase, and Cloud Functions

Authentication is a basic necessity when building a messaging app with Stream. It helps secure the messaging environment and also provides a customized experience on a per-user basis.

Stream uses JWT (JSON Web Tokens) to authenticate users. Generally, to generate and provide these authentication tokens to your app, you need to maintain a backend server.

But in this article, you’ll learn how you can easily handle the whole authentication process in a serverless environment using Firebase Authentication and Cloud Functions.

Introduction to Firebase Authentication and Cloud Functions

Firebase provides pre-configured backend services to help you build serverless applications. Firebase Authentication and Cloud Functions are two of the services provided by Firebase.

Firebase Authentication lets you secure your application without having to maintain any backend infrastructure. It supports the traditional email-password authentication, as well as integration with various identity providers like Google, Apple, Facebook, and GitHub.

Cloud Functions allow you to run backend code on the serverless infrastructure managed by Firebase. You can trigger functions based upon the events of any Firebase service, or you can also define functions that need to be triggered by HTTP requests.

We’ll explore these in detail throughout the article. Let’s get started by creating a new Flutter project.

Create Your Flutter app

You can create a new Flutter project directly using your IDE (like VS Code, IntelliJ, Android Studio), or from your terminal using the following command:

Loading code sample...

Note: This tutorial was created using version 2.5.3 of Flutter from the stable channel.

Open the project using your preferred IDE and navigate to the pubspec.yaml file. Add the following dependencies:

Loading code sample...

Go to your lib/main.dart file, and replace it with the following code:

Loading code sample...

Inside the main() method, Firebase is initialized with the Firebase.initializeApp() call. You should call this method before using any other Firebase services, otherwise, it may result in an error.

The LoginPage is empty for now (we will work on it in a while to build the sign-in and sign-up interface). But before that, let’s complete the Firebase setup.

Stream Setup

You will need to create a Stream app to access chat messaging features. If you don’t already have a Stream account, you can start your free trial for Stream’s Chat Messaging.

Working on a personal project? You can register for a Stream Maker Account and access Stream Chat for free indefinitely.

From the Stream dashboard:

  1. Click Create App.
  2. Enter your app name.
  3. Select a server location.
  4. Set your Environment as Development.
  5. Click Create App.
Create a new app in Stream dashboard

This will create a new Stream App. You can navigate to the app from the Stream dashboard:

Stream dashboard

Two important things that you’ll need in order to access Stream from your app and cloud functions:

  • API Key: App identifier, safe to share publicly
  • Secret: Helps generate user tokens, should be kept private

Create a new Firebase Project

You have to create a new Firebase project to integrate it with your Stream Flutter app and access the services. Follow the steps below to create a new Firebase project:

  1. Go to the Firebase console.

  2. Click Add project.

Create a Firebase project
  1. Enter a Project name and click Continue.
Name your Firebase project
  1. Next, you will be asked whether you want to enable Google Analytics for the project. You won’t need analytics as this is just a sample project. Click Create project.
Google Analytics prompt
Configure Google Analytics

Once the project is created, Firebase will navigate you to your project’s Firebase dashboard.

StreamAuth app created

Configure Firebase for Android and iOS

After creating your Firebase project, you can integrate Firebase with the Android and iOS platforms. This will allow you to access Firebase services within your app.

Android configuration

  1. From the Firebase dashboard, click on the Android icon.
Getting started with Firebase for Android
  1. Enter the Android package name, an App nickname, and the SHA-1. Click Register app.
Adding Firebase to your Android app
  1. Download the google-services.json file and place it in your android -> app directory. Click Next.
Download the google-services.json file
  1. Follow the steps and add the required code snippets to your project. Click Next.
Add the Firebase SDK
  1. Finally, click Continue to console to return to your Firebase dashboard.
Click "Continue to console"

You have successfully configured Firebase for Android.

iOS configuration

  1. Click Add app and select the iOS icon.
Firebase for iOS
  1. Enter your iOS bundle ID and an App nickname. Click Register app.
Add Firebase to your iOS app
  1. Download the GoogleService-Info.plist file. Click Next.
Download the GoogleService file
  1. Back in your project:

    1. Open the ios folder using Xcode.
    2. Drag and drop the file that you downloaded into the Runner subfolder.
    3. When a dialog box appears, make sure that Runner is selected in the Add to targets box. Click Finish.
  2. You can skip steps three and four, as they are automatically configured by the Flutter Firebase plugin.

Adding the Firebase SDK
  1. Click Continue to console to go back to the Firebase dashboard.
Next steps

You have successfully configured Firebase for the iOS platform as well.

Set Up Firebase Cloud Functions

You should upgrade your Firebase project to the Blaze Plan to access the Cloud Functions service.

You can upgrade your project by going to the Firebase dashboard and clicking on the Modify button on the left menu beside the current plan (every Firebase project uses the Spark Plan by default).

Blaze plan

Once you have the project upgraded, select Functions from the left sidebar and click Get Started.

Firebase Get Started page

A Set up Functions dialog box will open with Install and Deploy steps.

Set up functions - Install

If you don’t have Firebase tools installed on your system, run the Install step:

Loading code sample...

Click Continue. In the Deploy step, you will find commands for initializing and deploying functions:

Set up functions - deploy

Follow the steps below to get started writing cloud functions:

  1. Navigate to your Flutter project directory, and initialize the project there using:
Loading code sample...
  1. When prompted to select the Firebase features to use, select Functions.
Initialize Firebase in your terminal
  1. In Project Setup, select Use an existing project and choose the Firebase project that you created earlier.
Project Setup screen in terminal
  1. In Functions Setup, choose:
    1. Language: JavaScript
    2. ESLint enable: Yes
    3. Install dependencies: Yes
Project setup in terminal

Once the Firebase initialization process finishes, it will generate a new folder inside your project directory called functions with the following content:

Functions folder

The package.json contains the dependencies for your Cloud Functions. You will need to define the functions inside the index.js file.

Defining Cloud Functions

You need to install the stream-chat Node.js dependency to access the Stream APIs.
Run the following command:

Loading code sample...

This command will install the dependency and add it to the package.json file.
Navigate to the functions/index.js file and import the required dependencies:

Loading code sample...

Before using any Firebase services, you will need to initialize the app:

Loading code sample...

Create an instance of the Stream client:

Loading code sample...

To create the server-client, you will need the Stream Key and Stream Secret

Note: functions.config() helps in passing these as arguments while deploying the functions.

Create a Stream User

When a user registers in the app, a new Stream user needs to be generated using a cloud function trigger. Let’s define a function called createStreamUserAndGetToken:

Loading code sample...

Here, you use context.auth to check if the user is authenticated. In case the user is not authenticated, throw an error:

Loading code sample...

If the user is authenticated, a new Stream user can be generated:

Loading code sample...

You can create a new Stream user by calling the upsertUser() method on the serverClient object, passing the user data retrieved from the authenticated user.

The most important parameter here is id. To make sure the id is always unique, we use the uid generated by Firebase (uid is a unique identifier for every Firebase authenticated user).

Once the user is created, you can retrieve the token using the createToken() method. You will need this token inside the Flutter app to get access to the user and make requests to the Stream API.

Get Stream User Token

For registered users, you don’t need to generate a new Stream user, just a new token. You can define the following function for the signed-in users:

Loading code sample...

If the user is authenticated, the authenticated user’s uid is used to generate a new token. Otherwise, an error is thrown.

Revoke Stream User token

If a user signs out of Firebase within the app, you should revoke the Stream user token using a cloud function:

Loading code sample...

The revokeUserToken() method is used by passing the authenticated user’s uid. This will revoke the current Stream user token.

Delete Stream User

Finally, we will define a cloud function to delete the Stream user when its respective user is deleted from Firebase:

Loading code sample...

You won’t need to call this function explicitly, this will automatically trigger when an account is deleted from Firebase.

Deploying Functions to Firebase

You must deploy the functions to Firebase before you can trigger them from the Flutter app.

Before deploying your functions, you need to store the Stream Key and the Stream Secret as environment variables. Use the following command:

Loading code sample...

Replace the app-key and app-secret placeholders with their appropriate values.
Finally, deploy your functions using:

Loading code sample...

After successfully deploying your cloud functions, you will be able to see them on the Firebase Functions page.

(You can find this page in your Firebase project dashboard by selecting Functions from the left menu.)

Firebase functions

Integrate Firebase Authentication

Let’s return to the Flutter app to implement Firebase Authentication.

Create a new Dart file called authentication.dart and define a new class called Authentication:

Loading code sample...

Firebase Auth and Firebase Functions are instantiated. Also, a variable of type User is defined, inside which the user information is stored after authentication.

The customSnackBar is defined to easily display a custom error during the authentication process.

Register Using Email/Password

Define a method called registerUsingEmailPassword() that accepts a few parameters like name, email, password, and context:

Loading code sample...

You can define a new user registration process like this:

Loading code sample...

In the above code snippet, the createUserWithEmailAndPassword() method is called on the auth object to create a new user and get the credentials.

The authenticated user can be retrieved from the credentials. To set the name of the user, the updateDisplayName() method is used.

Once you have the authenticated user, you can call the createStreamUserAndGetToken cloud function using functions.httpsCallable().

The cloud function returns the generated Stream user token, which is used to initialize Stream in the Flutter app using StreamClient.initialize(). (The StreamClient is a custom class that we’ll define after the Authentication class is complete.)

The Firebase Exceptions can be handled like this:

Loading code sample...

Sign-In

The method for Firebase Sign-In using email/password is similar to the registration process.

But here, you’ll need to use the signInWithEmailAndPassword() method on the auth object to get the user credentials and use the getStreamUserToken cloud function to generate a new token for the user.

Then similarly, use the token to initialize Stream Chat in the app:

Loading code sample...

Sign Out

Use this method to sign out of Firebase. While a user tries to sign out of Firebase, you should also revoke the current Stream token of the user by calling the revokeStreamUserToken cloud function.

Once the token is revoked, close the Stream client connection by calling the closeConnection() method before signing out of Firebase:

Loading code sample...

Define Stream Client

Create a new file called stream_client.dart and define the StreamClient class. This class will be responsible for instantiating the StreamChatClient, connecting to the Stream user, and navigating to the Stream Chat page.

To instantiate the client:

Loading code sample...

Replace streamKey with your Stream app API Key.

Define the initialize() method:

Loading code sample...

In the above code snippet, you:

  1. Retrieve the Firebase authenticated user.
  2. Connect to the Stream user with the client.connectUser() method.
  3. Set up a channel for messaging.
  4. Navigate to the ChannelListPage containing a list of all channels of your Stream app.

Building the Login and Register Pages

Now that you have defined most of the functionalities, you can start building the interface of the app. There will be two pages responsible for authenticating the user:

  • Login Page: For users who are already registered in the app
  • Register Page: For new users who want to access the app
Register and Login authentication pages

Let’s start building the Login Page UI.

This page will mainly consist of two TextField widgets for taking the email and password as user inputs, and a button for triggering the email/password sign-in process.

Define the LoginPage as a StatefulWidget:

Loading code sample...

Here, you instantiate the Authentication class and define some variables needed to build the UI.

Next, define two validators to verify if the email and password are entered in the correct format and that they are not empty:

Loading code sample...

Now, you can define the UI inside the build() method:

Loading code sample...

Inside the onPressed() callback of the Sign In button, the Firebase sign-in process is triggered (defined in the Authentication class).

A TextButton widget is added so that new users can navigate to the RegisterPage and create their accounts.

The RegisterPage code is quite similar to the LoginPage. Check the Stream Auth Firebase GitHub repo to find the user interface code for RegisterPage.

Implement Stream Messaging

You can easily integrate a full-fledged chat messaging service using Stream.

Stream channels pages for ChannelList and ChannelPage

First, you will need to add the ChannelListPage where users are navigated to after authenticated. This page will display a list of channels where the current user is a member.

Create a new file called channel_list_page.dart and add the following code:

Loading code sample...

On this page, you can also add an action to the AppBar for signing out:

First, create an instance of the Authentication class:

Loading code sample...

Add the Sign Out action like this:

Loading code sample...

Next, you need to define a page to display messages and allow the user to send new messages.

Create a new file called channel_page.dart and add the following code:

Loading code sample...

Congratulations 🎉 ! You successfully implemented serverless authentication to your Stream messaging app using Firebase.

Bonus: Auto Login

You will notice that the current version of the app requires the user to log in every time they launch the app after closing, even if they signed in previously.

To improve the user experience, you can automatically log in users if they were in a signed-in state in their previous session:

Add a new method to the Authentication class:

Loading code sample...

This method will return a boolean indicating whether the user was previously signed in.

Go to the LoginPage class and add the following method to check for signed-in users:

Loading code sample...

Call this method in the initState of this class:

Loading code sample...

As you start the app, it loads up the LoginPage class, where it checks if the user is already signed-in. If the user is signed-in previously, it automatically navigates to the ChannelListPage.

More to Explore

In this article, you learned how to implement Firebase authentication using email/password and integrate it with your Stream Messaging app.

But, you can use the same principles to integrate other authentication providers as well, like Google, Apple, Facebook, and GitHub.

Learn more about Stream and Firebase from these links:

You can find this sample app repository on the author's GitHub.