Flutter Mobile OTP Verification using Firebase with Getx Package

Post Views: 863

Hello Friends, Today I am going to share how to do Mobile OTP Verification in Flutter using Firebase with Getx Package. GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically. We will follow following steps to achieve Mobile OTP Verification:-

1. Create Firebase Project
2. Create App in Firebase Project
3. Enable Mobile Authentication
4. Create Flutter App
5. Generate Certificate Fingerprint and Provide it Firebase

Let’s get started

1. Creating Firebase Project


Step-Wise screenshots Taken While Creating Project

2. Create App in Firebase Project


Step-Wise screenshots Taken While Creating App in Project

3. Enable Mobile Authentication


Step-Wise screenshots Taken While Enabling Mobile Authentication

4. Create Flutter App

Paste google-services.json in App level directory which we have downloaded while creating App (see third screenshot of Create App in Firebase Project)

Now let’s start coding

build.gradle (Project Level)

buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.1.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        classpath "com.google.gms:google-services:4.3.13"
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

buildscript {

ext.kotlin_version = '1.6.10'

repositories {

google()

mavenCentral()

}

dependencies {

classpath 'com.android.tools.build:gradle:7.1.2'

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

classpath "com.google.gms:google-services:4.3.13"

}

allprojects {

repositories {

google()

mavenCentral()

}

rootProject.buildDir = '../build'

subprojects {

project.buildDir = "${rootProject.buildDir}/${project.name}"

}

subprojects {

project.evaluationDependsOn(':app')

}

task clean(type: Delete) {

delete rootProject.buildDir

}

build.gradle (Module Level)

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'com.google.gms.google-services'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion flutter.compileSdkVersion
    ndkVersion flutter.ndkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.zatackcoder.otp_login_app"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
        minSdkVersion 19
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

    implementation platform('com.google.firebase:firebase-bom:30.4.1')
    implementation 'com.google.firebase:firebase-analytics'
    implementation 'com.google.firebase:firebase-auth'
}

def localProperties = new Properties()

def localPropertiesFile = rootProject.file('local.properties')

if (localPropertiesFile.exists()) {

localPropertiesFile.withReader('UTF-8') { reader ->

localProperties.load(reader)

}

def flutterRoot = localProperties.getProperty('flutter.sdk')

if (flutterRoot == null) {

throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")

}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')

if (flutterVersionCode == null) {

flutterVersionCode = '1'

}

def flutterVersionName = localProperties.getProperty('flutter.versionName')

if (flutterVersionName == null) {

flutterVersionName = '1.0'

}

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'com.google.gms.google-services'

apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {

compileSdkVersion flutter.compileSdkVersion

ndkVersion flutter.ndkVersion

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

kotlinOptions {

jvmTarget = '1.8'

}

sourceSets {

main.java.srcDirs += 'src/main/kotlin'

}

defaultConfig {

// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).

applicationId "com.zatackcoder.otp_login_app"

// You can update the following values to match your application needs.

// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.

minSdkVersion 19

targetSdkVersion flutter.targetSdkVersion

versionCode flutterVersionCode.toInteger()

versionName flutterVersionName

}

buildTypes {

release {

// TODO: Add your own signing config for the release build.

// Signing with the debug keys for now, so `flutter run --release` works.

signingConfig signingConfigs.debug

}

flutter {

source '../..'

}

dependencies {

implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

implementation platform('com.google.firebase:firebase-bom:30.4.1')

implementation 'com.google.firebase:firebase-analytics'

implementation 'com.google.firebase:firebase-auth'

}

pubspec.yaml

name: otp_login_app
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: '>=2.18.2 <3.0.0'

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

  #architecture
  get: ^4.6.5

  #auth
  firebase_core: ^1.24.0
  firebase_auth: ^3.11.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

name: otp_login_app

description: A new Flutter project.

# The following line prevents the package from being accidentally published to

# pub.dev using `flutter pub publish`. This is preferred for private packages.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.

# A version number is three numbers separated by dots, like 1.2.43

# followed by an optional build number separated by a +.

# Both the version and the builder number may be overridden in flutter

# build by specifying --build-name and --build-number, respectively.

# In Android, build-name is used as versionName while build-number used as versionCode.

# Read more about Android versioning at https://developer.android.com/studio/publish/versioning

# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.

# Read more about iOS versioning at

# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html

# In Windows, build-name is used as the major, minor, and patch parts

# of the product and file versions while build-number is used as the build suffix.

version: 1.0.0+1

environment:

sdk: '>=2.18.2 <3.0.0'

# Dependencies specify other packages that your package needs in order to work.

# To automatically upgrade your package dependencies to the latest versions

# consider running `flutter pub upgrade --major-versions`. Alternatively,

# dependencies can be manually updated by changing the version numbers below to

# the latest version available on pub.dev. To see which dependencies have newer

# versions available, run `flutter pub outdated`.

dependencies:

flutter:

sdk: flutter

# The following adds the Cupertino Icons font to your application.

# Use with the CupertinoIcons class for iOS style icons.

cupertino_icons: ^1.0.2

#architecture

get: ^4.6.5

#auth

firebase_core: ^1.24.0

firebase_auth: ^3.11.0

dev_dependencies:

flutter_test:

sdk: flutter

# The "flutter_lints" package below contains a set of recommended lints to

# encourage good coding practices. The lint set provided by the package is

# activated in the `analysis_options.yaml` file located at the root of your

# package. See that file for information about deactivating specific lint

# rules and activating additional ones.

flutter_lints: ^2.0.0

# For information on the generic Dart part of this file, see the

# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.

flutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in

# the material Icons class.

uses-material-design: true

# To add assets to your application, add an assets section, like this:

# assets:

# - images/a_dot_burr.jpeg

# - images/a_dot_ham.jpeg

# An image asset can refer to one or more resolution-specific "variants", see

# https://flutter.dev/assets-and-images/#resolution-aware

# For details regarding adding assets from package dependencies, see

# https://flutter.dev/assets-and-images/#from-packages

# To add custom fonts to your application, add a fonts section here,

# in this "flutter" section. Each entry in this list should have a

# "family" key with the font family name, and a "fonts" key with a

# list giving the asset and other descriptors for the font. For

# example:

# fonts:

# - family: Schyler

# fonts:

# - asset: fonts/Schyler-Regular.ttf

# - asset: fonts/Schyler-Italic.ttf

# style: italic

# - family: Trajan Pro

# fonts:

# - asset: fonts/TrajanPro.ttf

# - asset: fonts/TrajanPro_Bold.ttf

# weight: 700

# For details regarding fonts from package dependencies,

# see https://flutter.dev/custom-fonts/#from-packages

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:otp_login_app/views/home.dart';
import 'package:otp_login_app/views/login.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'OTP Login App',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: const AppBarTheme(
              backgroundColor: Colors.white,
              iconTheme: IconThemeData(color: Colors.black))),
      getPages: [
        GetPage(name: "/login", page: () => LoginPage()),
        GetPage(name: "/home", page: () => HomePage()),
      ],
      initialRoute: "/login",
    );
  }
}

import 'package:firebase_core/firebase_core.dart';

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:otp_login_app/views/home.dart';

import 'package:otp_login_app/views/login.dart';

void main() async {

WidgetsFlutterBinding.ensureInitialized();

await Firebase.initializeApp();

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return GetMaterialApp(

title: 'OTP Login App',

theme: ThemeData(

primarySwatch: Colors.blue,

appBarTheme: const AppBarTheme(

backgroundColor: Colors.white,

iconTheme: IconThemeData(color: Colors.black))),

getPages: [

GetPage(name: "/login", page: () => LoginPage()),

GetPage(name: "/home", page: () => HomePage()),

initialRoute: "/login",

);

}

views/login.dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:otp_login_app/controllers/auth_controller.dart';

class LoginPage extends StatelessWidget {
  final authController = Get.put(AuthController());
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      body: Stack(children: [
        Obx(() => authController.isOtpSent.value
            ? _buildVerifyOtpForm()
            : _buildGetOtpForm())
      ]),
    );
  }

  Widget _buildGetOtpForm() {
    return SafeArea(
      child: Form(
        key: _formKey,
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 24, horizontal: 32),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "Let's Sign in",
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Obx(() => Column(
                      children: [
                        TextFormField(
                          keyboardType: TextInputType.number,
                          maxLength: 10,
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                          onChanged: (val) {
                            authController.phoneNo.value = val;
                            authController.showPrefix.value = val.length > 0;
                          },
                          onSaved: (val) => authController.phoneNo.value = val!,
                          validator: (val) => (val!.isEmpty || val!.length < 10)
                              ? "Enter valid number"
                              : null,
                          decoration: InputDecoration(
                            hintText: "Mobile Number",
                            labelText: "Mobile Number",
                            floatingLabelBehavior: FloatingLabelBehavior.auto,
                            enabledBorder: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.black12),
                                borderRadius: BorderRadius.circular(10)),
                            focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.black12),
                                borderRadius: BorderRadius.circular(10)),
                            prefix: authController.showPrefix.value
                                ? Padding(
                                    padding:
                                        EdgeInsets.symmetric(horizontal: 8),
                                    child: Text(
                                      '(+91)',
                                      style: TextStyle(
                                        fontSize: 18,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  )
                                : null,
                            suffixIcon: _buildSuffixIcon(),
                          ),
                        ),
                        SizedBox(
                          height: 22,
                        ),
                        SizedBox(
                          width: double.infinity,
                          child: ElevatedButton(
                            onPressed: () {
                              final form = _formKey.currentState;
                              if (form!.validate()) {
                                form.save();
                                authController.getOtp();
                              }
                            },
                            style: ElevatedButton.styleFrom(
                              foregroundColor: Colors.white,
                              // backgroundColor: kPrimaryColor,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(24.0),
                              ),
                            ),
                            child: Padding(
                              padding: EdgeInsets.all(14.0),
                              child: Text(
                                'Get OTP',
                                style: TextStyle(fontSize: 16),
                              ),
                            ),
                          ),
                        )
                      ],
                    )),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildVerifyOtpForm() {
    List<TextEditingController> otpFieldsControler = [
      TextEditingController(),
      TextEditingController(),
      TextEditingController(),
      TextEditingController(),
      TextEditingController(),
      TextEditingController()
    ];

    return SafeArea(
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 24, horizontal: 0),
        child: Column(
          children: [
            Align(
              alignment: Alignment.topLeft,
              child: GestureDetector(
                onTap: () {
                  authController.isOtpSent.value = false;
                  Get.back();
                },
                child: Icon(
                  Icons.arrow_back,
                  size: 32,
                  color: Colors.black54,
                ),
              ),
            ),
            SizedBox(
              height: 180,
            ),
            Text(
              'Verification',
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Enter your OTP code number",
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: Colors.black38,
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 28,
            ),
            Container(
              padding: EdgeInsets.all(28),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      _textFieldOTP(
                          first: true,
                          last: false,
                          controller: otpFieldsControler[0]),
                      _textFieldOTP(
                          first: false,
                          last: false,
                          controller: otpFieldsControler[1]),
                      _textFieldOTP(
                          first: false,
                          last: false,
                          controller: otpFieldsControler[2]),
                      _textFieldOTP(
                          first: false,
                          last: false,
                          controller: otpFieldsControler[3]),
                      _textFieldOTP(
                          first: false,
                          last: false,
                          controller: otpFieldsControler[4]),
                      _textFieldOTP(
                          first: false,
                          last: true,
                          controller: otpFieldsControler[5]),
                    ],
                  ),
                  Text(
                    authController.statusMessage.value,
                    style: TextStyle(
                        color: authController.statusMessageColor.value,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 22,
                  ),
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: () {
                        authController.otp.value = "";
                        otpFieldsControler.forEach((controller) {
                          authController.otp.value += controller.text;
                        });
                        authController.verifyOTP();
                      },
                      style: ButtonStyle(
                        foregroundColor:
                            MaterialStateProperty.all<Color>(Colors.white),
                        // backgroundColor:
                        //     MaterialStateProperty.all<Color>(kPrimaryColor),
                        shape:
                            MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(24.0),
                          ),
                        ),
                      ),
                      child: Padding(
                        padding: EdgeInsets.all(14.0),
                        child: Text(
                          'Verify',
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 18,
            ),
            Text(
              "Didn't receive any code?",
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: Colors.black38,
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 18,
            ),
            Obx(
              () => TextButton(
                onPressed: () => authController.resendOTP.value
                    ? authController.resendOtp()
                    : null,
                child: Text(
                  authController.resendOTP.value
                      ? "Resend New Code"
                      : "Wait ${authController.resendAfter} seconds",
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.purple,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSuffixIcon() {
    return AnimatedOpacity(
        opacity: authController.phoneNo?.value.length == 10 ? 1.0 : 0.0,
        duration: const Duration(milliseconds: 250),
        child: Icon(Icons.check_circle, color: Colors.green, size: 32));
  }

  Widget _textFieldOTP({bool first = true, last, controller}) {
    var height = (Get.width - 82) / 6;
    return Container(
      height: height,
      child: AspectRatio(
        aspectRatio: 1,
        child: TextField(
          autofocus: true,
          controller: controller,
          onChanged: (value) {
            if (value.length == 1 && last == false) {
              Get.focusScope?.nextFocus();
            }
            if (value.length == 0 && first == false) {
              Get.focusScope?.previousFocus();
            }
          },
          showCursor: false,
          readOnly: false,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: height / 2, fontWeight: FontWeight.bold),
          keyboardType: TextInputType.number,
          maxLength: 1,
          decoration: InputDecoration(
            isDense: true,
            contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
            counter: Offstage(),
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(width: 2, color: Colors.black12),
                borderRadius: BorderRadius.circular(12)),
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(width: 2, color: Colors.purple),
                borderRadius: BorderRadius.circular(12)),
          ),
        ),
      ),
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

import 'package:flutter/gestures.dart';

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:otp_login_app/controllers/auth_controller.dart';

class LoginPage extends StatelessWidget {

final authController = Get.put(AuthController());

final _formKey = GlobalKey<FormState>();

@override

Widget build(BuildContext context) {

return Scaffold(

resizeToAvoidBottomInset: false,

backgroundColor: Colors.white,

body: Stack(children: [

Obx(() => authController.isOtpSent.value

? _buildVerifyOtpForm()

: _buildGetOtpForm())

]),

);

}

Widget _buildGetOtpForm() {

return SafeArea(

child: Form(

key: _formKey,

child: Padding(

padding: EdgeInsets.symmetric(vertical: 24, horizontal: 32),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Text(

"Let's Sign in",

style: TextStyle(

fontSize: 28,

fontWeight: FontWeight.bold,

SizedBox(

height: 10,

Container(

decoration: BoxDecoration(

color: Colors.white,

borderRadius: BorderRadius.circular(12),

child: Obx(() => Column(

children: [

TextFormField(

keyboardType: TextInputType.number,

maxLength: 10,

style: TextStyle(

fontSize: 18,

fontWeight: FontWeight.bold,

onChanged: (val) {

authController.phoneNo.value = val;

authController.showPrefix.value = val.length > 0;

onSaved: (val) => authController.phoneNo.value = val!,

validator: (val) => (val!.isEmpty || val!.length < 10)

? "Enter valid number"

: null,

decoration: InputDecoration(

hintText: "Mobile Number",

labelText: "Mobile Number",

floatingLabelBehavior: FloatingLabelBehavior.auto,

enabledBorder: OutlineInputBorder(

borderSide: BorderSide(color: Colors.black12),

borderRadius: BorderRadius.circular(10)),

focusedBorder: OutlineInputBorder(

borderSide: BorderSide(color: Colors.black12),

borderRadius: BorderRadius.circular(10)),

prefix: authController.showPrefix.value

? Padding(

padding:

EdgeInsets.symmetric(horizontal: 8),

child: Text(

'(+91)',

style: TextStyle(

fontSize: 18,

fontWeight: FontWeight.bold,

)

: null,

suffixIcon: _buildSuffixIcon(),

SizedBox(

height: 22,

SizedBox(

width: double.infinity,

child: ElevatedButton(

onPressed: () {

final form = _formKey.currentState;

if (form!.validate()) {

form.save();

authController.getOtp();

}

style: ElevatedButton.styleFrom(

foregroundColor: Colors.white,

// backgroundColor: kPrimaryColor,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(24.0),

child: Padding(

padding: EdgeInsets.all(14.0),

child: Text(

'Get OTP',

style: TextStyle(fontSize: 16),

)

)),

);

}

Widget _buildVerifyOtpForm() {

List<TextEditingController> otpFieldsControler = [

TextEditingController(),

TextEditingController()

];

return SafeArea(

child: Padding(

padding: EdgeInsets.symmetric(vertical: 24, horizontal: 0),

child: Column(

children: [

Align(

alignment: Alignment.topLeft,

child: GestureDetector(

onTap: () {

authController.isOtpSent.value = false;

Get.back();

child: Icon(

Icons.arrow_back,

size: 32,

color: Colors.black54,

SizedBox(

height: 180,

Text(

'Verification',

style: TextStyle(

fontSize: 22,

fontWeight: FontWeight.bold,

SizedBox(

height: 10,

Text(

"Enter your OTP code number",

style: TextStyle(

fontSize: 14,

fontWeight: FontWeight.bold,

color: Colors.black38,

textAlign: TextAlign.center,

SizedBox(

height: 28,

Container(

padding: EdgeInsets.all(28),

decoration: BoxDecoration(

color: Colors.white,

borderRadius: BorderRadius.circular(12),

child: Column(

children: [

Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

_textFieldOTP(

first: true,

last: false,

controller: otpFieldsControler[0]),

_textFieldOTP(

first: false,

last: false,

controller: otpFieldsControler[1]),

_textFieldOTP(

first: false,

last: false,

controller: otpFieldsControler[2]),

_textFieldOTP(

first: false,

last: false,

controller: otpFieldsControler[3]),

_textFieldOTP(

first: false,

last: false,

controller: otpFieldsControler[4]),

_textFieldOTP(

first: false,

last: true,

controller: otpFieldsControler[5]),

Text(

authController.statusMessage.value,

style: TextStyle(

color: authController.statusMessageColor.value,

fontWeight: FontWeight.bold),

SizedBox(

height: 22,

SizedBox(

width: double.infinity,

child: ElevatedButton(

onPressed: () {

authController.otp.value = "";

otpFieldsControler.forEach((controller) {

authController.otp.value += controller.text;

});

authController.verifyOTP();

style: ButtonStyle(

foregroundColor:

MaterialStateProperty.all<Color>(Colors.white),

// backgroundColor:

// MaterialStateProperty.all<Color>(kPrimaryColor),

shape:

MaterialStateProperty.all<RoundedRectangleBorder>(

RoundedRectangleBorder(

borderRadius: BorderRadius.circular(24.0),

child: Padding(

padding: EdgeInsets.all(14.0),

child: Text(

'Verify',

style: TextStyle(fontSize: 16),

)

SizedBox(

height: 18,

Text(

"Didn't receive any code?",

style: TextStyle(

fontSize: 14,

fontWeight: FontWeight.bold,

color: Colors.black38,

textAlign: TextAlign.center,

SizedBox(

height: 18,

Obx(

() => TextButton(

onPressed: () => authController.resendOTP.value

? authController.resendOtp()

: null,

child: Text(

authController.resendOTP.value

? "Resend New Code"

: "Wait ${authController.resendAfter} seconds",

style: TextStyle(

fontSize: 18,

fontWeight: FontWeight.bold,

color: Colors.purple,

textAlign: TextAlign.center,

);

}

Widget _buildSuffixIcon() {

return AnimatedOpacity(

opacity: authController.phoneNo?.value.length == 10 ? 1.0 : 0.0,

duration: const Duration(milliseconds: 250),

child: Icon(Icons.check_circle, color: Colors.green, size: 32));

}

Widget _textFieldOTP({bool first = true, last, controller}) {

var height = (Get.width - 82) / 6;

return Container(

height: height,

child: AspectRatio(

aspectRatio: 1,

child: TextField(

autofocus: true,

controller: controller,

onChanged: (value) {

if (value.length == 1 && last == false) {

Get.focusScope?.nextFocus();

}

if (value.length == 0 && first == false) {

Get.focusScope?.previousFocus();

}

showCursor: false,

readOnly: false,

textAlign: TextAlign.center,

style: TextStyle(fontSize: height / 2, fontWeight: FontWeight.bold),

keyboardType: TextInputType.number,

maxLength: 1,

decoration: InputDecoration(

isDense: true,

contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),

counter: Offstage(),

enabledBorder: OutlineInputBorder(

borderSide: BorderSide(width: 2, color: Colors.black12),

borderRadius: BorderRadius.circular(12)),

focusedBorder: OutlineInputBorder(

borderSide: BorderSide(width: 2, color: Colors.purple),

borderRadius: BorderRadius.circular(12)),

);

}

views/home.dart

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home", style: TextStyle(color: Colors.black)),
      ),
      body: Center(
        child: Text("Home Page after Otp Verification"),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:flutter/src/widgets/framework.dart';

class HomePage extends StatelessWidget {

const HomePage({super.key});

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Home", style: TextStyle(color: Colors.black)),

body: Center(

child: Text("Home Page after Otp Verification"),

);

}

controllers/auth_controller.dart

import 'dart:async';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:otp_login_app/views/home.dart';

class AuthController extends GetxController
    with GetSingleTickerProviderStateMixin {
  var showPrefix = false.obs;
  var isLogin = true;
  var phoneNo = "".obs;
  var otp = "".obs;
  var isOtpSent = false.obs;
  var resendAfter = 30.obs;
  var resendOTP = false.obs;
  var firebaseVerificationId = "";
  var statusMessage = "".obs;
  var statusMessageColor = Colors.black.obs;

  var timer;

  AuthController() {}

  @override
  onInit() async {
    super.onInit();
  }

  getOtp() async {
    FirebaseAuth.instance.verifyPhoneNumber(
      phoneNumber: '+91' + phoneNo.value,
      verificationCompleted: (PhoneAuthCredential credential) {},
      verificationFailed: (FirebaseAuthException e) {},
      codeSent: (String verificationId, int? resendToken) {
        firebaseVerificationId = verificationId;
        isOtpSent.value = true;
        statusMessage.value = "OTP sent to +91" + phoneNo.value;
        startResendOtpTimer();
      },
      codeAutoRetrievalTimeout: (String verificationId) {},
    );
  }

  resendOtp() async {
    resendOTP.value = false;
    FirebaseAuth.instance.verifyPhoneNumber(
      phoneNumber: '+91' + phoneNo.value,
      verificationCompleted: (PhoneAuthCredential credential) {},
      verificationFailed: (FirebaseAuthException e) {},
      codeSent: (String verificationId, int? resendToken) {
        firebaseVerificationId = verificationId;
        isOtpSent.value = true;
        statusMessage.value = "OTP re-sent to +91" + phoneNo.value;
        startResendOtpTimer();
      },
      codeAutoRetrievalTimeout: (String verificationId) {},
    );
  }

  verifyOTP() async {
    FirebaseAuth auth = FirebaseAuth.instance;
    try {
      statusMessage.value = "Verifying... " + otp.value;
      // Create a PhoneAuthCredential with the code
      PhoneAuthCredential credential = PhoneAuthProvider.credential(
          verificationId: firebaseVerificationId, smsCode: otp.value);
      // Sign the user in (or link) with the credential
      await auth.signInWithCredential(credential);
      Get.off(HomePage());
    } catch (e) {
      statusMessage.value = "Invalid  OTP";
      statusMessageColor = Colors.red.obs;
    }
  }

  startResendOtpTimer() {
    timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (resendAfter.value != 0) {
        resendAfter.value--;
      } else {
        resendAfter.value = 30;
        resendOTP.value = true;
        timer.cancel();
      }
      update();
    });
  }

  @override
  void dispose() {
    super.dispose();
  }
}

import 'dart:async';

import 'package:firebase_auth/firebase_auth.dart';

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:otp_login_app/views/home.dart';

class AuthController extends GetxController

with GetSingleTickerProviderStateMixin {

var showPrefix = false.obs;

var isLogin = true;

var phoneNo = "".obs;

var otp = "".obs;

var isOtpSent = false.obs;

var resendAfter = 30.obs;

var resendOTP = false.obs;

var firebaseVerificationId = "";

var statusMessage = "".obs;

var statusMessageColor = Colors.black.obs;

var timer;

AuthController() {}

@override

onInit() async {

super.onInit();

}

getOtp() async {

FirebaseAuth.instance.verifyPhoneNumber(

phoneNumber: '+91' + phoneNo.value,

verificationCompleted: (PhoneAuthCredential credential) {},

verificationFailed: (FirebaseAuthException e) {},

codeSent: (String verificationId, int? resendToken) {

firebaseVerificationId = verificationId;

isOtpSent.value = true;

statusMessage.value = "OTP sent to +91" + phoneNo.value;

startResendOtpTimer();

codeAutoRetrievalTimeout: (String verificationId) {},

);

}

resendOtp() async {

resendOTP.value = false;

FirebaseAuth.instance.verifyPhoneNumber(

phoneNumber: '+91' + phoneNo.value,

verificationCompleted: (PhoneAuthCredential credential) {},

verificationFailed: (FirebaseAuthException e) {},

codeSent: (String verificationId, int? resendToken) {

firebaseVerificationId = verificationId;

isOtpSent.value = true;

statusMessage.value = "OTP re-sent to +91" + phoneNo.value;

startResendOtpTimer();

codeAutoRetrievalTimeout: (String verificationId) {},

);

}

verifyOTP() async {

FirebaseAuth auth = FirebaseAuth.instance;

try {

statusMessage.value = "Verifying... " + otp.value;

// Create a PhoneAuthCredential with the code

PhoneAuthCredential credential = PhoneAuthProvider.credential(

verificationId: firebaseVerificationId, smsCode: otp.value);

// Sign the user in (or link) with the credential

await auth.signInWithCredential(credential);

Get.off(HomePage());

} catch (e) {

statusMessage.value = "Invalid OTP";

statusMessageColor = Colors.red.obs;

}

startResendOtpTimer() {

timer = Timer.periodic(Duration(seconds: 1), (timer) {

if (resendAfter.value != 0) {

resendAfter.value--;

} else {

resendAfter.value = 30;

resendOTP.value = true;

timer.cancel();

}

update();

});

}

@override

void dispose() {

super.dispose();

}

5. Generate Certificate Fingerprint and Provide it to Firebase

Run below command after going to android folder and copy SHA1 and SHA-256 and provide it to Firebase App by going to Project Settings see below screenshots for help

./gradlew signingReport

1	./gradlew signingReport

Output

Source Code

https://github.com/rajeshkumarsahanee/otp_login_app

Notes

1. Please make sure package name should match with your flutter app’s package name while creating App in Firebase Project

Thanks for Stoping by
If you find this helpful then please do share

Flutter Mobile OTP Verification using Firebase with Getx Package

1. Creating Firebase Project

2. Create App in Firebase Project

3. Enable Mobile Authentication

4. Create Flutter App

build.gradle (Project Level)

build.gradle (Module Level)

pubspec.yaml

main.dart

views/login.dart

views/home.dart

controllers/auth_controller.dart

5. Generate Certificate Fingerprint and Provide it to Firebase

Output

Source Code

Notes

Comments

Leave a Reply Cancel reply