flutterfire
flutterfire copied to clipboard
firebase
🐛 [flutterfire_ui] phone authentication screens direction in rtl languages
Bug report
Describe the bug I am using a flutterfire_ui package to manage the sign in process with phone authentication. When a user signs with phone he/she will be required to enter: a country code, a phone number and an OTP. The screens will use the default direction based on the app locale.
I am declaring the app locale as Arabic. Now although Arabic is an rtl language, still the country code, the phone numbers and the OTP will need to be entered and displayed in ltr direction since they are all numbers. The screens that flutterfire_ui provides displays those in rtl direction.
Steps to reproduce
Steps to reproduce the behavior:
- from sign in screen, select "sign using phone"
- the phone authentication screen shows with rtl direction.
- the OTP screen will also show in rtl. e.g. try entring 123456 in this screen.
Expected behavior
although Arabic is rtl language, it uses ltr for displaying numbers, country codes and OTP tokens. I can't tell if this also applies to other rtl languages some checks may be needed to conclude as such.
Sample project
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutterfire_ui/auth.dart';
import 'package:flutterfire_ui/i10n.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'myapp',
locale: const Locale('ar', 'SA'),
supportedLocales: const [Locale('ar', 'SA')],
localizationsDelegates: [
FlutterFireUILocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
home: const LoginScreen(),
);
}
}
class LoginScreen extends StatelessWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const SignInScreen(
providerConfigs: [
PhoneProviderConfiguration(),
],
);
}
}
Additional context
- Screen snapshots to show current behaviour:
- Screen snapshots to show desired behaviour:
Flutter doctor
Click To Expand
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.19044.1889], locale en-US)
• Flutter version 3.0.5 at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision f1875d570e (5 weeks ago), 2022-07-13 11:24:16 -0700
• Engine revision e85ea0e79c
• Dart version 2.17.6
• DevTools version 2.12.2
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Android
• Platform android-31, build-tools 30.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[!] Visual Studio - develop for Windows (Visual Studio Build Tools 2017 15.9.34)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools
• Visual Studio Build Tools 2017 version 15.9.28307.1440
• Windows 10 SDK version 10.0.17763.0
X Visual Studio 2019 or later is required.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 4.2)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
[√] VS Code (version 1.70.1)
• VS Code at C:\Users\[REMOVED]\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.46.0
[√] Connected device (4 available)
• sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.1889]
• Chrome (web) • chrome • web-javascript • Google Chrome 104.0.5112.81
• Edge (web) • edge • web-javascript • Microsoft Edge 104.0.1293.54
[√] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
Flutter dependencies
Click To Expand
Dart SDK 2.17.6
Flutter SDK 3.0.5
phone_auth_ui 1.0.0+1
dependencies:
- cupertino_icons 1.0.5
- firebase_core 1.20.1 [firebase_core_platform_interface firebase_core_web flutter meta]
- flutter 0.0.0 [characters collection material_color_utilities meta vector_math sky_engine]
- flutterfire_ui 0.4.3+5 [cloud_firestore collection crypto desktop_webview_auth email_validator firebase_auth firebase_core firebase_database firebase_dynamic_links flutter flutter_facebook_auth flutter_localizations flutter_svg google_sign_in sign_in_with_apple twitter_login]
dev dependencies:
- flutter_lints 2.0.1 [lints]
- flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters charcode collection matcher material_color_utilities meta source_span stream_channel string_scanner term_glyph]
transitive dependencies:
- async 2.8.2 [collection meta]
- boolean_selector 2.1.0 [source_span string_scanner]
- characters 1.2.0
- charcode 1.3.1
- clock 1.1.0
- cloud_firestore 3.4.4 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta]
- cloud_firestore_platform_interface 5.7.1 [collection firebase_core flutter meta plugin_platform_interface]
- cloud_firestore_web 2.8.4 [cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js]
- collection 1.16.0
- crypto 3.0.2 [typed_data]
- desktop_webview_auth 0.0.9 [crypto flutter http]
- email_validator 2.1.17
- fake_async 1.3.0 [clock collection]
- firebase_auth 3.6.3 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta]
- firebase_auth_platform_interface 6.5.3 [collection firebase_core flutter meta plugin_platform_interface]
- firebase_auth_web 4.2.3 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta]
- firebase_core_platform_interface 4.5.0 [collection flutter flutter_test meta plugin_platform_interface]
- firebase_core_web 1.7.1 [firebase_core_platform_interface flutter flutter_web_plugins js meta]
- firebase_database 9.1.1 [firebase_core firebase_core_platform_interface firebase_database_platform_interface firebase_database_web flutter]
- firebase_database_platform_interface 0.2.2+1 [collection firebase_core flutter meta plugin_platform_interface]
- firebase_database_web 0.2.1+3 [firebase_core firebase_core_web firebase_database_platform_interface flutter flutter_web_plugins js]
- firebase_dynamic_links 4.3.4 [firebase_core firebase_core_platform_interface firebase_dynamic_links_platform_interface flutter meta plugin_platform_interface]
- firebase_dynamic_links_platform_interface 0.2.3+9 [firebase_core flutter meta plugin_platform_interface]
- flutter_facebook_auth 4.4.1 [flutter flutter_facebook_auth_platform_interface flutter_facebook_auth_web]
- flutter_facebook_auth_platform_interface 3.2.0 [flutter plugin_platform_interface]
- flutter_facebook_auth_web 3.2.0 [flutter flutter_web_plugins js flutter_facebook_auth_platform_interface]
- flutter_localizations 0.0.0 [flutter intl characters clock collection material_color_utilities meta path vector_math]
- flutter_svg 1.1.4 [flutter meta path_drawing vector_math xml]
- flutter_web_plugins 0.0.0 [flutter js characters collection material_color_utilities meta vector_math]
- google_sign_in 5.4.1 [flutter google_sign_in_android google_sign_in_ios google_sign_in_platform_interface google_sign_in_web]
- google_sign_in_android 6.0.1 [flutter google_sign_in_platform_interface]
- google_sign_in_ios 5.4.0 [flutter google_sign_in_platform_interface]
- google_sign_in_platform_interface 2.2.0 [flutter quiver]
- google_sign_in_web 0.10.2 [flutter flutter_web_plugins google_sign_in_platform_interface js]
- http 0.13.5 [async http_parser meta path]
- http_parser 4.0.1 [collection source_span string_scanner typed_data]
- intl 0.17.0 [clock path]
- js 0.6.4
- lints 2.0.0
- matcher 0.12.11 [stack_trace]
- material_color_utilities 0.1.4
- meta 1.7.0
- path 1.8.1
- path_drawing 1.0.1 [vector_math meta path_parsing flutter]
- path_parsing 1.0.1 [vector_math meta]
- petitparser 5.0.0 [meta]
- plugin_platform_interface 2.1.2 [meta]
- quiver 3.1.0 [matcher]
- sign_in_with_apple 3.3.0 [flutter meta sign_in_with_apple_platform_interface sign_in_with_apple_web]
- sign_in_with_apple_platform_interface 1.0.0 [flutter plugin_platform_interface meta]
- sign_in_with_apple_web 1.0.1 [flutter flutter_web_plugins sign_in_with_apple_platform_interface js]
- sky_engine 0.0.99
- source_span 1.8.2 [collection path term_glyph]
- stack_trace 1.10.0 [path]
- stream_channel 2.1.0 [async]
- string_scanner 1.1.0 [charcode source_span]
- term_glyph 1.2.0
- test_api 0.4.9 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher]
- twitter_login 4.2.3 [flutter crypto http]
- typed_data 1.3.1 [collection]
- vector_math 2.1.2
- xml 6.1.0 [collection meta petitparser]
Thanks for the detailed report and repro code sample. Using it, I am seeing same behavior as reported.
/cc @lesnitsky
You are welcome @darshankawar .
For anyone coming across this bug, I suggested a (sort of) acceptable workaround on this link:
The suggestion along with this method will be a good workaround for short term until this is solved in the package.
The idea is to use ltr locale in the first runapp and then rtl locale in the second call to runapp. use it with caution though.
To put it in other words, you use the first pass of runapp with 'en' locale to sign in the users. Once they are signed in you use the second runapp with 'ar' locale.
Hi @lesnitsky and @darshankawar,
I have just upgraded to flutterfire_ui: ^0.4.3+20 and I can tell that this problem is still existing. see below snapshots:
Am I missing something other than upgrading the dependency?
@rashidotm you need to migrate to firebase_ui_auth library, flutterfire_ui is no longer maintained. Example code you've provided would look like this after migration:
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_localizations/firebase_ui_localizations.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'myapp',
locale: const Locale('ar', 'SA'),
supportedLocales: const [Locale('ar', 'SA')],
localizationsDelegates: [
FirebaseUILocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
home: const LoginScreen(),
);
}
}
class LoginScreen extends StatelessWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SignInScreen(
providers: [
PhoneAuthProvider(),
],
);
}
}
thanks so much. I will be migrating by end of year.
On Thu, Nov 24, 2022 at 5:29 PM Andrei Lesnitsky @.***> wrote:
@rashidotm https://github.com/rashidotm you need to migrate to firebase_ui_auth library, flutterfire_ui is no longer maintained. Example code you've provided would look like this after migration:
import 'package:firebase_ui_auth/firebase_ui_auth.dart';import 'package:firebase_ui_localizations/firebase_ui_localizations.dart';import 'package:flutter/material.dart';import 'package:firebase_core/firebase_core.dart';import 'package:flutter_localizations/flutter_localizations.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return MaterialApp( title: 'myapp', locale: const Locale('ar', 'SA'), supportedLocales: const [Locale('ar', 'SA')], localizationsDelegates: [ FirebaseUILocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], home: const LoginScreen(), ); } } class LoginScreen extends StatelessWidget { const LoginScreen({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return SignInScreen( providers: [ PhoneAuthProvider(), ], ); } }
— Reply to this email directly, view it on GitHub https://github.com/firebase/flutterfire/issues/9379#issuecomment-1326526586, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADA667PMUPPGSPJSOIDAL23WJ53V7ANCNFSM565Z2Y5Q . You are receiving this because you were mentioned.Message ID: @.***>