Firebase User Authentication in Flutter

Firebase User Authentication in Flutter

Flutter + Firebase Admin SDK: Adding Users; Updating Passwords. Each time you add a new user as the admin, you're logged out and the new user is logged in. Also, there is no way to update the user's password on the client.

Hello everyone, imagine that you have developed an enterprise-level Flutter application(client app) using firebase as the backend, and you are responsible for adding, updating and deleting users.

You will quickly realized that doing these from the client app has its limitations.

  • Each time you add a new user as the admin, you're logged out and the new user is logged in. You’ll then need to logout as the newly created user and re-login using your admin credentials; repeating this process to add a new user gets frustrating pretty quickly.
  • Also, there is no way to update the user’s password on the client

In this post, I will present to you with my solution for fixing these issue using the Firebase Admin SDK.

We’ll be writing some JavaScript, well Typescript, and deploying to Firebase. Don’t worry if you don’t know JavaScript/Typescript it’s quite similar to Dart and I will explain the code as we go along.

Firebase Config:

Ensure Email/Password Sign in is enabled in Firebase

This is image title

Set Up a database structure like below

This is image title

  • users: Once the user is registered they will show in this collection
  • users_registrations: when adding new users we submit to this collection if the user is successfully registered a document will be created in the “users” collection
  • user_update_password: whenever a document is added here it will trigger a cloud function to update the user's password

Code Time Flutter

This project uses firebase streams and the provider package to manage state; the moment a document is updated in Firestore it will be reflected on the client/Flutter app once the user has internet connection.

Also, the app has options for dark and light themes; 😀 see the post Flutter Light and Dark Theme to implement in your app.

We won't dive into the Flutter/Dart code in-depth because the focus is the firebase aspect, however, below are images of the folder structure and the final UI. You can get the full source code at Github Link

  • Folder Structure

This is image title

Dark Theme

This is image title

This is image title Light Theme

This is image title

This is image title

Code Time JavaScript/TypeScript

Ensure you have Node.js installed. Login to firebase using your credentials with the commands below:

npm install -g firebase-tools
npm install -g firebase-tools
firebase login
  • Create a new folder “firebase_credentials_cloud_functions”

Run the command, firebase init from that folder select functions at the prompt then select the corresponding project. Lastly, choose TypeScript as the language.

  • Create the folder structure below with the corresponding files.

This is image title

  • onCreateUser.ts: whenever we add a users using our Flutter app to the collection “users_registrations” this function will fire and create the user using auth and add the document to ‘users’

This is image title

  • onCreatePassword.ts: whenever we update a user’s password using our flutter app, a document will be written to the collection “users_update_password” this function will fire and update the user’s password.

This is image title

  • Time to deploy our code: from the console/terminal run firebase deploy — only functions

We’re done!

This is image title

Conclusion

Flutter and Firebase are the perfect duo for rapid mobile development; using both helps you the bring more value to your users while reducing lengthy configurations.

JavaScript/TypeScript is easy to learn/understand if you already know Dart.

Maybe in the future, Google will give us the ability to write cloud functions using dart. 😀

If this helped: please give me a clap, and star the GitHub repo, it keeps me motivated 😀

⭐ Source Code Flutter: GitHub Link

⭐ Source Code Firebase/JavaScript: GitHub Link

Flutter Firebase

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

Adobe XD plugin for Flutter with CodePen Tutorial

Recently Adobe XD releases a new version of the plugin that you can use to export designs directly into flutter widgets or screens.

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

Firebase Flutter Tutorial - Firebase CloudStorage in Flutter

In this Firebase Flutter Tutorial, we wrap the Firebase Storage package into a service to easily manage and upload the firebase storage.

Mastering payments in Flutter - Flutter & Firebase E-commerce APP (Firebase CRUD)

Mastering payments in Flutter - Flutter & Firebase E-commerce APP (Firebase CRUD)