{"id":1477,"date":"2021-06-03T16:43:00","date_gmt":"2021-06-03T16:43:00","guid":{"rendered":"https:\/\/www.confianzit.com\/cit-blog\/?p=1477"},"modified":"2022-10-31T17:53:27","modified_gmt":"2022-10-31T17:53:27","slug":"biometric-authentication-with-flutter","status":"publish","type":"post","link":"https:\/\/www.confianzit.com\/cit-blog\/biometric-authentication-with-flutter\/","title":{"rendered":"Biometric Authentication with Flutter"},"content":{"rendered":"

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.9.4″ custom_padding=”11px|||||” hover_enabled=”0″ module_class=”blog-left-content” sticky_enabled=”0″][et_pb_row _builder_version=”4.9.4″ _module_preset=”default” column_structure=”2_3,1_3″][et_pb_column type=”2_3″ _builder_version=”4.9.4″ _module_preset=”default”][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n

Flutter has many built-in widgets for building UI, including complex ones, but when it comes to using native features, we must either write native-level code or rely on third-party plugins. Thankfully, the Flutter community is highly active and most of the common use cases are developed by Flutter itself as add-on plugins. We will see how one such plugin, called local_auth, can be used to implement biometric authentication in Flutter.<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n

As with all Flutter plugins, we begin by adding the local_auth plugin from pub.dev<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|2.5%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n

flutter pub add local_auth<\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
Since the plugin needs access to device specific features like fingerprint sensor data and camera (for facial recognition), we will have to add some settings in the native code, which is quite straightforward and explained well in the documentation. Specifically, the following changes would be required for iOS and Android:<\/p>\n
For iOS:<\/b><\/strong>\u00a0<\/p>\n
\u00a0Add the NSFaceIDUsageDescription key with the appropriate reason as to why you would require in the Info.plist file as follows:<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|2.5%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
<key><\/span><\/span><\/span>NSFaceIDUsageDescription<\/key><\/span><\/span><\/span>\n\u00a0\n<string><\/span><\/span><\/span>Why is my app authenticating using face id?<\/string><\/span><\/span><\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” custom_padding=”|||0px||”]<\/p>\n
Note that this is only required if you plan to use the Face ID feature of iOS, if not, you can simply skip this.<\/p>\n
\u00a0For Android:<\/b><\/strong><\/p>\n
\u00a0In Android you will have to add the permission to access fingerprint data in the AndroidManifest.xml file as follows:<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|2.5%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
<manifest<\/span> xmlns:android<\/span>=\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span> \npackage<\/span>=\"com.example.app\"<\/span>><\/span><\/span>\n\u00a0\u00a0<uses-permission<\/span> android:name<\/span>=\"android.permission.USE_FINGERPRINT\"<\/span>\/><\/span><\/span>\n<manifest><\/span><\/span><\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
Apart from this you will need to add some code to the MainActivity.kt file in the Android source code as shown below:<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|2.5%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
import<\/span>\u00a0io.flutter<\/span>.embedding<\/span>.android<\/span>.FlutterFragmentActivity<\/span>\u00a0\nimport<\/span>\u00a0io.flutter<\/span>.embedding<\/span>.engine<\/span>.FlutterEngine<\/span>\u00a0\nimport<\/span>\u00a0io.flutter<\/span>.plugins<\/span>.GeneratedPluginRegistrant<\/span>\n\u00a0\u00a0\nclass<\/span>\u00a0MainActivity:<\/span> FlutterFragmentActivity(<\/span>)<\/span> {<\/span>\u00a0\n\u00a0\u00a0\u00a0\u00a0override\u00a0fun\u00a0configureFlutterEngine(<\/span>flutterEngine:<\/span> FlutterEngine)<\/span> {<\/span>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0GeneratedPluginRegistrant.registerWith<\/span>(<\/span>flutterEngine)<\/span>\u00a0\n\u00a0\u00a0\u00a0\u00a0}<\/span>\n}<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” custom_padding=”|||0px||”]<\/p>\n
Now we can start building a simple app that will use biometrics to login a user with their biometric data.<\/p>\n
\u00a0We will start by creating a basic Flutter app using the Flutter create command and implement two screens.<\/p>\n
\u00a0The first one will be our home screen, which is basically a login page that simulates a login using a hardcoded email and password. We will also add another button to login using biometrics on the login screen.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|2.5%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
import<\/span> 'package:biometric_authentication\/success_page.dart'<\/span>;<\/span>\nimport<\/span> 'package:flutter\/material.dart'<\/span>;<\/span>\nimport<\/span> 'package:local_auth\/local_auth.dart'<\/span>;<\/span>\nimport<\/span> 'package:shared_preferences\/shared_preferences.dart'<\/span>;<\/span>\n\u00a0\nclass<\/span> LoginPage extends<\/span> StatefulWidget {<\/span>\n  LoginPage(<\/span>)<\/span>;<\/span>\n  @override\n  _LoginPageState createState(<\/span>)<\/span> =><\/span> _LoginPageState(<\/span>)<\/span>;<\/span>\n}<\/span>\n\u00a0\nclass<\/span> _LoginPageState extends<\/span> State <<\/span> LoginPage ><\/span> {<\/span>\n    final<\/span> _emailController =<\/span> TextEditingController(<\/span>)<\/span>;<\/span>\n    final<\/span> _passwordController =<\/span> TextEditingController(<\/span>)<\/span>;<\/span>\n    bool isAuthenticating =<\/span> false<\/span>;<\/span>\n    @override\n    Widget build(<\/span>BuildContext context)<\/span> {<\/span>\n      return<\/span> Scaffold(<\/span>\n          appBar:<\/span> AppBar(<\/span>\n            title:<\/span> Text(<\/span>'Biometric Authentication'<\/span>)<\/span>,\n          )<\/span>,\n\u00a0\n          body:<\/span> Stack<\/span>(<\/span>\n            children:<\/span> [<\/span>\n              Padding(<\/span>\n                padding:<\/span> EdgeInsets.all<\/span>(<\/span>16<\/span>)<\/span>,\n                child:<\/span> Column(<\/span>\n                  mainAxisAlignment:<\/span> MainAxisAlignment.center<\/span>,\n                  children:<\/span> [<\/span>\n                    TextField<\/span>(<\/span>\n                      decoration:<\/span> InputDecoration(<\/span>labelText:<\/span> 'Email'<\/span>)<\/span>,\n                      controller:<\/span> _emailController,\n                    )<\/span>,\n\u00a0\n                    TextField<\/span>(<\/span>\n                      obscureText:<\/span> true<\/span>,\n                      decoration:<\/span> InputDecoration(<\/span>labelText:<\/span> 'Password'<\/span>)<\/span>,\n                      controller:<\/span> _passwordController,\n                    )<\/span>,\n\u00a0\n                    SizedBox(<\/span>\n                      height:<\/span> MediaQuery.of<\/span>(<\/span>context)<\/span>.size<\/span>.height<\/span> *<\/span> 0.1<\/span>,\n                    )<\/span>,\n\u00a0\n                    ElevatedButton(<\/span>\n                      child:<\/span> Text(<\/span>'Submit'<\/span>)<\/span>,\n                      onPressed:<\/span> (<\/span>)<\/span> async {<\/span>\n                        final<\/span> result =<\/span> await logIn(<\/span>_emailController.value<\/span>.text<\/span>,\n                          _passwordController.value<\/span>.text<\/span>)<\/span>;<\/span>\n                        setState(<\/span>(<\/span>)<\/span> {<\/span>\n                          isAuthenticating =<\/span> false<\/span>;<\/span>\n                        }<\/span>)<\/span>;<\/span>\n\u00a0\n                        if<\/span> (<\/span>result)<\/span> {<\/span>\n                          Navigator.pushReplacement<\/span>(<\/span>\n                            context,\n                            MaterialPageRoute(<\/span>builder:<\/span> (<\/span>context)<\/span> =><\/span> SuccessPage(<\/span>)<\/span>)<\/span>,\n                          )<\/span>;<\/span>\n                        }<\/span> else<\/span> {<\/span>\n                          ScaffoldMessenger.of<\/span>(<\/span>context)<\/span>.showSnackBar<\/span>(<\/span>\n                            SnackBar(<\/span>content:<\/span> Text(<\/span>'Invalid username\/password'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>\n                        }<\/span>\n                      }<\/span>,\n                    )<\/span>,\n                    if<\/span> (<\/span>isAuthenticating)<\/span>\n                      Container<\/span>(<\/span>\n                        color:<\/span> Colors.black<\/span>.withOpacity<\/span>(<\/span>0.5<\/span>)<\/span>,\n                        child:<\/span> Center(<\/span>\n                          child:<\/span> CircularProgressIndicator(<\/span>)<\/span>,\n                        )<\/span>,\n                      )<\/span>\n                  ]<\/span>,\n                )<\/span>,\n              )<\/span>;<\/span>\n            }<\/span>\n\u00a0\n            Future <<\/span> bool ><\/span> logIn(<\/span>String<\/span> email, String<\/span> password)<\/span> {<\/span>\n              FocusScope.of<\/span>(<\/span>context)<\/span>.unfocus<\/span>(<\/span>)<\/span>;<\/span>\n              setState(<\/span>(<\/span>)<\/span> {<\/span>\n                isAuthenticating =<\/span> true<\/span>;<\/span>\n              }<\/span>)<\/span>;<\/span>\n\u00a0\n              return<\/span> Future.delayed<\/span>(<\/span>Duration(<\/span>seconds:<\/span> 2<\/span>)<\/span>, (<\/span>)<\/span> async {<\/span>\n                if<\/span> (<\/span>email !=<\/span> 'test@test.com'<\/span>)<\/span> {<\/span>\n                  return<\/span> false<\/span>;<\/span>\n                }<\/span>\n\u00a0\n                if<\/span> (<\/span>password !=<\/span> \"password\"<\/span>)<\/span> {<\/span>\n                  return<\/span> false<\/span>;<\/span>\n                }<\/span>\n\u00a0\n                final<\/span> sharedPreferences =<\/span> await SharedPreferences.getInstance<\/span>(<\/span>)<\/span>;<\/span>\n                sharedPreferences.setString<\/span>(<\/span>'email'<\/span>, email)<\/span>;<\/span>\n                sharedPreferences.setString<\/span>(<\/span>'password'<\/span>, password)<\/span>;<\/span>\n                return<\/span> true<\/span>;<\/span>\n              }<\/span>)<\/span>;<\/span>\n            }<\/span>\n          }<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
This should complete our initial screen. The second screen is just a success page where the user can logout.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”2.5%|10%|2.5%|10%|true|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
import<\/span> 'package:biometric_authentication\/login_page.dart'<\/span>;<\/span>\nimport<\/span> 'package:flutter\/material.dart'<\/span>;<\/span>\nimport<\/span> 'package:shared_preferences\/shared_preferences.dart'<\/span>;<\/span>\n\u00a0\nclass<\/span> SuccessPage extends<\/span> StatelessWidget {<\/span>\n  @override\n  Widget build(<\/span>BuildContext context)<\/span> {<\/span>\n    return<\/span> Scaffold(<\/span>\n      appBar:<\/span> AppBar(<\/span>title:<\/span> Text(<\/span>'Success!'<\/span>)<\/span>)<\/span>,\n      body:<\/span> Padding(<\/span>\n        padding:<\/span> EdgeInsets.all<\/span>(<\/span>16<\/span>)<\/span>,\n        child:<\/span> Center(<\/span>\n          child:<\/span> Column(<\/span>\n            children:<\/span> [<\/span>\n              Text(<\/span>'Logged In!'<\/span>)<\/span>,\n              ElevatedButton(<\/span>\n                child:<\/span> Text(<\/span>'Log out'<\/span>)<\/span>,\n                onPressed:<\/span> (<\/span>)<\/span> {<\/span>\n                  Navigator.pushReplacement<\/span>(<\/span>context,\n                    MaterialPageRoute(<\/span>builder:<\/span> (<\/span>context)<\/span> =><\/span> LoginPage(<\/span>)<\/span>)<\/span>)<\/span>;<\/span>\n                }<\/span>,\n              )<\/span>,\n            ]<\/span>,\n          )<\/span>,\n        )<\/span>,\n      )<\/span>,\n    )<\/span>;<\/span>\n  }<\/span>\n}<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
When the user logs in successfully they will be directed to a success screen and if not, we will show an error message using a snack bar. Note that in the login method we use the shared_preferences plugin also provided by the Flutter team to store the user\u2019s credentials. This will be used later to log in using biometrics. For real-world applications, we would not be doing this and would use something such as the user\u2019s token after authentication, but this will suffice for demonstration.<\/p>\n
\u00a0Basically, we wire up biometrics here in such a way that if the user logs in once manually, then they should be able to login using their biometrics the next time. We do this by retrieving the credentials of the user stored in the shared preferences and then use that to login if the biometric authentication is successful. This is where the local_auth plugin will come into play. We will first initialize an instance of the LocalAuthentication class provided by the plugin.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|3%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
final<\/span> localAuth =<\/span> LocalAuthentication(<\/span>)<\/span>;<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
Then we will use the plugin to authenticate the user\u2019s biometrics. Here we use the authenticate method available in the instance where we enforce the use of biometrics by setting the biometrics-only parameter to true and provide a reason as to why we need the user\u2019s biometrics.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|3%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
localAuth.authenticate<\/span>(<\/span>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localizedReason:<\/span> 'Please verify to login without credentials'<\/span>,\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0biometricOnly:<\/span> true<\/span>,\u00a0\n\u00a0\u00a0\u00a0 )<\/span>;<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
This would be the baseline implementation for using biometrics in the app. Now we just need to write a function where we use this logic to authenticate the user with biometrics and then use the stored credentials to login to the application. This can be done as shown below:<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|3%|6.5%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
Future <<\/span> bool ><\/span> loginWithBiometrics(<\/span>)<\/span> async {<\/span>\n  setState(<\/span>(<\/span>)<\/span> {<\/span>\n    isAuthenticating =<\/span> true<\/span>;<\/span>\n  }<\/span>)<\/span>;<\/span>\n  final<\/span> result =<\/span> await localAuth.authenticate<\/span>(<\/span>localizedReason:<\/span> 'Please verify to login without credentials'<\/span>, biometricOnly:<\/span> true<\/span>, )<\/span>;<\/span>\n  if<\/span> (<\/span>result)<\/span> {<\/span>\n    final<\/span> sharedPreferences =<\/span> await SharedPreferences.getInstance<\/span>(<\/span>)<\/span>;<\/span>\n    final<\/span> email =<\/span> sharedPreferences.getString<\/span>(<\/span>'email'<\/span>)<\/span>;<\/span>\n    final<\/span> password =<\/span> sharedPreferences.getString<\/span>(<\/span>'password'<\/span>)<\/span>;<\/span>\n    if<\/span> (<\/span>email ==<\/span> null<\/span> ||<\/span> password ==<\/span> null<\/span>)<\/span> {<\/span>\n      return<\/span> false<\/span>;<\/span>\n    }<\/span>\n    return<\/span> logIn(<\/span>email, password)<\/span>;<\/span>\n  }<\/span>\n  return<\/span> false<\/span>;<\/span>\n}<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
We will now use this function by creating another button on the page to login using biometrics.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|3%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
ElevatedButton(<\/span>\n  child:<\/span> Text(<\/span>'Login with biometrics'<\/span>)<\/span>,\n  onPressed:<\/span> (<\/span>)<\/span> async {<\/span>\n    final<\/span> result =<\/span> await loginWithBiometrics(<\/span>)<\/span>;<\/span>\n    setState(<\/span>(<\/span>)<\/span> {<\/span>\n      isAuthenticating =<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n\u00a0\n    if<\/span> (<\/span>result)<\/span> {<\/span>\n      Navigator.pushReplacement<\/span>(<\/span>\n        context,\n        MaterialPageRoute(<\/span>builder:<\/span> (<\/span>context)<\/span> =><\/span> SuccessPage(<\/span>)<\/span>)<\/span>,\n      )<\/span>;<\/span>\n    }<\/span> else<\/span> {<\/span>\n      ScaffoldMessenger.of<\/span>(<\/span>context)<\/span>.showSnackBar<\/span>(<\/span>SnackBar(<\/span>\n        content:<\/span> Text(<\/span>\n          'Failed to login with biometrics. Please login manually.'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>\n    }<\/span>\n  }<\/span>,\n)<\/span>;<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
This should work for our basic application. But what if there are no credentials stored in the first place? Then what would the button do? Ideally, we would be showing the button only if there are any credentials stored, which can be done during build or with a FutureBuilder. For now, we just show a generic message prompting the user to login manually.<\/p>\n
Additionally, we could add another button on our success screen to reset the credentials which would remove the stored local credentials to simulate the credentials being removed or the token being expired.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default” text_text_color=”#000000″ background_color=”#eff0f1″ custom_margin=”|||60px|false|false” custom_padding=”3%|10%|3%|10%|false|false” border_width_top=”10px” border_color_top=”#2ea3f2″]<\/p>\n
ElevatedButton(<\/span>\n  child:<\/span> Text(<\/span>'Reset local credentials'<\/span>)<\/span>,\n  style:<\/span> ElevatedButton.styleFrom<\/span>(<\/span>\n    primary:<\/span> Colors.red<\/span>,\n  )<\/span>,\n\u00a0\n  onPressed:<\/span> (<\/span>)<\/span> async {<\/span>\n    final<\/span> sharedPreferences =<\/span> await SharedPreferences.getInstance<\/span>(<\/span>)<\/span>;<\/span>\n    sharedPreferences.remove<\/span>(<\/span>'email'<\/span>)<\/span>;<\/span>\n    sharedPreferences.remove<\/span>(<\/span>'password'<\/span>)<\/span>;<\/span>\n    ScaffoldMessenger.of<\/span>(<\/span>context)<\/span>\n      .showSnackBar<\/span>(<\/span>SnackBar(<\/span>content:<\/span> Text(<\/span>'Credentials Reset'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>\n  }<\/span>,\n)<\/span>;<\/span><\/pre>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
This should wrap up our demo application. Our final app should look like this:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.9.4″ _module_preset=”default”]<\/p>\n
Conclusion<\/b><\/strong><\/p>\n
We have seen how we can interact with device level features such as fingerprint or face id for biometric authentication using plugins available in Flutter. Apart from that you can also see how you could use the same to integrate with your authentication flow.<\/p>\n
\u00a0For real world applications however, it would be better not to store your credentials on the device and rather use something like the authentication token from your authentication service or use something a bit more secure for storing instead of shared_preferences, such as the flutter_secure_storage plugin which exposes the encrypted storage of Android (KeyStore) and iOS (KeyChain).<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.9.4″ _module_preset=”default”][et_pb_code _builder_version=”4.9.4″ _module_preset=”default” locked=”off”]<\/p>\n
  <\/p>\n
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n