Flutter Web: Firebase Authentication and Google Sign-In
Welcome to the third part of the Flutter web article series. Previously, you learned how to make a Flutter web app responsive, and also how to add animations and dynamic theming support to it.
If you are not familiar with the previous two articles, you can check them out here:
In this article, I will cover a really important topic — authentication for your web app. If you want to create any kind of web app for a practical use-case, you will definitely need it. In-app authentication is necessary if you want to restrict users based on their different access levels. It also helps to provide a more personalized experience to each of them.
In this article, we will mainly look into two types of user authentications:
- Authentication via email and password
- Authentication via Google Sign-In
I will be using Firebase Authentication for our purpose, as it is very easy to use with very minimal setup.
You might already be familiar with Firebase Authentication for Flutter mobile apps, but keep reading, because integrating Firebase with Flutter web is a bit different.
Overview
The topics that I am going to cover in this article are as follows:
- Creating a new Firebase project
- Configuring Firebase for web
- Configuring Google Sign-In
- Integrating Firebase with Flutter:
◦ Email and password registration and sign-in
◦ Google Sign-In - Auto-login (as users return back to your web app)
Creating a new Firebase project
You need to create a new Firebase project in order to get access to their services.
- Go to Firebase console.
- Sign in with your Google account.
- Click on Add project.
4. Enter a Project name and click Continue.
5. Turn off Google Analytics for this project and click Create project.
6. Wait for the creation process to complete and then click Continue.
7. This will lead you to the Project Overview page. From here, you will be able to set up Firebase for your web app.
Configuring Firebase for web
Your new Firebase project is created and you can proceed to set up Firebase for your web app.
- Select Web on the Project Overview page (notice the icon I’ve circled in red).
2. Choose a nickname for your app (App nickname) and click on Register app.
3. Copy the script.
4. Navigate to root project directory → web → index.html and paste the script into the body
tag before your main.dart.js
script.
5. Click Continue to console.
6. Go to your project settings.
7. Under the General tab, select your Support email.
We will also be using Google Sign-In in our project, so let’s complete the setup for that as well. If you do not want to integrate Google Sign-In with your project, you can skip the next part.
Configuring Google Sign-In
You will be requiring OAuth client ID in order to use Google Sign-In with your web app.
- Go to the Credentials page.
- Make sure that the correct project is selected and click on CREATE CREDENTIALS.
3. Select OAuth client ID from the list.
4. Select Web application from the Application type dropdown.
5. Enter a name for your OAuth client and click on CREATE.
6. Copy the generated Client ID.
7. Navigate to root project directory –> web –> index.html and add the following meta
tag, somewhere in the head
of the document:
Replace
YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID
with your Client ID.
For this client to work correctly, you will need to configure the Authorized JavaScript origins, which identify the domains from which your application can send API requests. When in local development, this is normally localhost
and some port.
Follow the steps below:
- Go to the Credentials page.
- Click Edit in the OAuth Web application client that you just created.
3. Click on Add URI.
4. Enter a localhost
port, like this:
5. Click Save.
By default,
flutter run
starts in a random port. If you need to deal with authentication like the above, you will have to use that specific port which is added to the Authorized JavaScript origins list.
You can use the following command to listen to that specific port:
flutter run -d chrome — web-hostname localhost — web-port 7357
Integrating Firebase Authentication into Flutter web
- Add the firebase_core & firebase_auth plugin to your
pubspec.yaml
file.
The web implementation of these plugins, i.e. firebase_core_web & firebase_auth_web is automatically added to your dependencies.
- Create a new Dart file called
authentication.dart
in the pathlib/utils
. - Import the packages:
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
- Create an instance of
FirebaseAuth
and add a few variables that we will use later:
Authenticating using email and password
You will need to register the user first using email and password, and then they can log in using the proper credentials.
For registering a new user, you can use the method createUserWithEmailAndPassword
provided by FirebaseAuth.
We will define a new function called registerWithEmailPassword
that will handle the whole registration process of a new user. This function will contain two parameters, an email and a password, which will be used to authenticate the user.
After a user is successfully registered, they can log in using their correct credentials. You can use the method signInWithEmailAndPassword
provided by FirebaseAuth to authenticate the login process.
We will define another function called signInWithEmailPassword
for handling the login process.
Shared Preferences is used for caching the login status. This will be helpful while we set up the auto-login in our web app.
Let’s also define a handy function for signing out of an account.
In order to use email and password authentication from your Flutter web app, you will have to enable it in the Firebase Authentication settings.
- Open your project page on Firebase.
- Go to Authentication from the left side menu and under Users tab click on Set up sign-in method.
- Go to the Sign-in method tab and enable Email/Password from the Sign-in providers' list.
- Click Save.
Authenticating using Google Sign-In
- Add the google_sign_in plugin to your
pubspec.yaml
file.
The web implementation of this plugin, i.e. google_sign_in_web is automatically added to your dependencies.
- Import the package in your
authentication.dart
file:
import 'package:google_sign_in/google_sign_in.dart';
- Create an instance of
GoogleSignIn
and add a few more variables:
- Define a new function called
signInWithGoogle
, which we will use to handle the Google Sign-In process:
- Next, define a handy function for signing out of Google:
In order to authenticate using Google Sign-In from your Flutter web app, you will have to enable it in the Firebase Authentication settings.
- Open your project page on Firebase.
- Go to Authentication –> Sign-in method.
- Enable Google from the Sign-in providers' list, and enter a project name.
- Click Save.
We have successfully configured both types of authentication for our web app and also defined all the functions required for handling user registration and login.
Now, we can move on and integrate them with the UI of our Flutter web app.
Building the AuthDialog UI
We will be showing a dialog-box for the authentication UI. Users can either login using email and password or using Google Sign-In.
Create a new file called auth_dialog.dart
in the path lib/widgets
, and inside it define a StatefulWidget
called AuthDialog. It will mainly consist of two TextField
widgets, Log in and Sign up buttons, and a button for using Google Sign-In.
Email and password TextField(s)
Let’s take a better look at the TextField
widgets. Here, I am showing only the email text field, you can define the password text field in a similar manner.
- Define a
TextEditingController
,FocusNode
and a boolean to track whether the text field is being used.
- Initialize them:
- Define a method to validate an email address:
- The email
TextField
widget should look like this:
Log in and Sign up buttons
The following is the code for the Log in button, which invokes the function registerWithEmailPassword
that we defined earlier.
The UI code for the Sign up button will be similar to this. The main difference is that in that case, you have to invoke the function signInWithEmailPassword
.
Google Sign-In button
You will need an image to design the Google Sign-In button. Download it from here.
Add it in the path assets/images
and import it using the pubspec.yaml
file:
The UI code for the button is as follows:
Updating the HomePage UI
We have to make changes in two places for integrating the AuthDialog widget, that is in the top bar (for large screens) and the drawer (for small screens).
To show the dialog box, make a call to the showDialog
method from the onTap
of the Sign in button.
Update the child of the InkWell
to show the Sign in button only when the user is not signed in already, otherwise display the user profile picture (if present), user email/name and a Sign out button.
If the user is logged in, the
userEmail
will be non-null, irrespective to the authentication method.
The full code for the Sign out button is as follows:
You have to make similar code changes to the Drawer (which is displayed only on small screens).
The code changes for the Drawer are available here.
Auto login
In order to prevent the situation where users have to log in every time they come back to your web app or reload the web page, you can cache their login status and auto-login as they come back to your web app.
- Define a new function in the
authentication.dart
file, calledgetUser
to retrieve the user information if they had already logged in previously:
- Create the MyApp, defined in
main.dart
file, aStatefulWidget
and define a method calledgetUserInfo
to invoke thegetUser
function:
- Call it from the
initState
method:
You can run the Flutter web app normally from the IDE or using the terminal with the command:
flutter run -d chrome
This runs your web app in debug mode using any random port. As I mentioned before, when configuring Google Sign-In, you have to run it on a specific port that you have added to the Authorized JavaScript origins list in your Google Sign-In OAuth client in the Credentials page. You can use the following command:
flutter run -d chrome --web-hostname localhost --web-port 7357
If you are running from VS Code, you can also add a configuration (in the file .vscode/launch.json
) to run the app on port 7357
by default.
But this does not run it on your default Chrome browser. So, if you try to use Google Sign-In here, you will get the following message:
To use Google Sign-In, copy the link of the localhost
port on which your app is currently running, and open it from the default Chrome browser. Now you will be able to sign in without any problem.
Although you can access the Google Sign-In here, you will not be able to use hot reload/hot restart in this window. Also, you won’t be able to see any debug messages on your IDE console or terminal.
The only way to see the debug messages is by going in the Inspect mode of the Chrome browser and then selecting the Console tab.
There is already an issue open on GitHub regarding this, you can follow it here.
Build and deploy using Codemagic
You can build and host your Flutter Web projects directly to a custom subdomain of codemagic.app
without any extra cost using Codemagic Static Pages.
- Go to your project settings on Codemagic:
- Under the Build tab, set the Flutter version to
channel Beta
and check-mark theWeb
platform
- If you want to deploy your web app using Codemagic, then go to Codemagic Static Pages under the Publish tab. Check-mark
Enable Codemagic Static Page publishing
and specify yoursubdomain
.
Now, you can start building your project.
After a successful build, you can access the web app by going to your specified link.
Just more thing before we wrap. If you try to use Google Sign-In by going to the codemagic.app
subdomain, nothing will pop-up. To fix this go to Credentials on the GCP console.
- First of all, enter the editing mode of
Explore client
.
- Add the new Codemagic domain under URIs.
- Go to
Web client
.
- Add the Codemagic domain under URIs and the same domain with
__/auth/handler
under Authorized redirect URIs.
Now, you will be able to access Google Sign-In from the page deployed using Codemagic.
Conclusion
You have successfully implemented Firebase Authentication and Google Sign-In to your Flutter web app and deployed it using Codemagic. This article covers the basics of Firebase Authentication using the two most popular authentication methods (email/password and Google Sign-In), but Firebase provides authentication using a lot of other identity providers as well.
You can try out the Flutter Web app here.
The GitHub repo of this project is available in the following link:
If you like this project, then please “Star” (⭐️) the GitHub repo.
Check out my other articles
If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:
You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!
Happy coding…
Souvik Biswas