{"id":14586,"date":"2023-03-20T12:00:00","date_gmt":"2023-03-20T19:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/cse\/?p=14586"},"modified":"2024-07-18T11:51:57","modified_gmt":"2024-07-18T18:51:57","slug":"azure_ad_b2c_flutter","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/ise\/azure_ad_b2c_flutter\/","title":{"rendered":"In-App User Experience with Flutter Embedded Web View and Azure Active Directory B2C User Flows"},"content":{"rendered":"<p>Azure Active Directory B2C <a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/active-directory-b2c\/overview\">AAD B2C<\/a> is a cloud-based Identity and Access Management service that enables you to customize and control the user sign-up, sign-in, and profile management process.<\/p>\n<p>This article will walk you through several ways on how we can integrate AAD B2C&#8217;s user login workflow within mobile app development using Flutter.<\/p>\n<p>To secure the token in the app, we can use <a href=\"https:\/\/pub.dev\/packages\/flutter_secure_storage\">flutter-secure-storage<\/a> and navigate to a route&#8217;s screen inside the app after successful sign in.<\/p>\n<p>Before we dive in further, let&#8217;s talk a little bit more about the scenario we were solving for.<\/p>\n<h2>Customer Scenario<\/h2>\n<p>One of our customers was actively building a state-of-the-art mobile application using the open-source framework Flutter. Flutter currently stands at #2, after React Native, for mobile development. The customer was facing a major challenge on how to tackle authentication &amp; authorization within the app.<\/p>\n<p>Below were the MVP requirements:<\/p>\n<ul>\n<li>User should be able to login via phone verification (phone number and one time password verification)<\/li>\n<li>Multi-factor authentication (MFA) should always be enabled<\/li>\n<li>Email details collection for recovery purpose<\/li>\n<\/ul>\n<p>Previously, they were using a basic way of storing username and password using Postgres database and a user model. To enable the one-time password feature, they were using an external SMS provider which created additional cost and overhead.<\/p>\n<p>This approach, though simple, was highly insecure and highly probable to anomalous attacks and breaches. As the mobile application was going to serve a very large geographical customer base, having a standard PKCE (Proof Key for Code Exchange) flow was the need of the hour.<\/p>\n<p>PKCE is an OpenId Connect flow specifically designed to authenticate native or mobile application users. It is an extension to the Authorization Code flow to prevent CSRF (Cross site request forgery) and authorization code injection attacks.<\/p>\n<h2>Proposed Solution<\/h2>\n<p>AAD B2C integration and implementation for PKCE flow. AAD provides out-of-the-box solutions to enable PKCE authentication via user flows or custom policies.<\/p>\n<p><strong>The best part?<\/strong>\nPhone verification, email verification and a plethora of other options are readily available to be integrated.\nThis would help us remove other external channels (for OTP, verification, etc.) and use one channel for every activity related to authentication.<\/p>\n<h2>A Seamless User Experience<\/h2>\n<p>As a part of implementation, we wanted to provide a seamless experience to the customer&#8217;s users by not redirecting them to a browser for authentication. We also wanted to provide a native experience to their users for registration and authentication.<\/p>\n<h3>Customer Requirements<\/h3>\n<p>Users should be able to:<\/p>\n<ul>\n<li>Register and login using AAD B2C<\/li>\n<li>Login using:\n<ul>\n<li>Social providers like Google, Facebook, Microsoft, etc.<\/li>\n<li>Local accounts like email and password<\/li>\n<li>Phone number<\/li>\n<li>One Time Password (OTP)<\/li>\n<li>Biometrics like fingerprint, face id, etc.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Steps Involved<\/h2>\n<ol>\n<li>Integrate AAD B2C&#8217;s login workflow into the mobile application.<\/li>\n<li>Retrieve the user&#8217;s access token and use it to call an API.<\/li>\n<li>Navigate to a different screen\/route after successful login.<\/li>\n<\/ol>\n<p>There are several ways to achieve this:<\/p>\n<ul>\n<li>AAD B2C&#8217;s default view. This is a web view that redirects to the AAD B2C&#8217;s login page in a browser of your choice, and then redirects back to the app after the user has logged in.<\/li>\n<li>Embedded web view (customer choice and our solution). This option embeds the Azure AD&#8217;s webpage in mobile format and provides a native experience.<\/li>\n<\/ul>\n<h2>Azure AD B2C Default View<\/h2>\n<p>There are several Flutter packages available for this, one of them being <a href=\"https:\/\/pub.dev\/packages\/flutter_appauth\">flutter_appauth<\/a>\nThis package is a wrapper around the <a href=\"https:\/\/appauth.io\/\">AppAuth<\/a> library, which is a library that allows you to authenticate users using OAuth 2.0 and OpenID Connect.\nThe code for integration, looks like something like this:<\/p>\n<pre><code class=\"language-dart\">import 'package:flutter_appauth\/flutter_appauth.dart';\r\nfinal FlutterAppAuth appAuth = FlutterAppAuth();\r\nfinal AuthorizationTokenResponse result = await appAuth.authorizeAndExchangeCode(\r\n  AuthorizationTokenRequest(\r\n    '&lt;client_id&gt;',\r\n    '&lt;redirect_url&gt;',\r\n    discoveryUrl: '&lt;discovery_url&gt;',\r\n    scopes: ['&lt;scopes&gt;'],\r\n  ),\r\n);\r\nfinal idToken = result.idToken;\r\nvar accessToken = result.accessToken;<\/code><\/pre>\n<p>Here,\nThe following outlines details relating to to the code above where:<\/p>\n<ul>\n<li><code>&lt;client_id&gt;<\/code> is the client ID of the app registration in Azure AD B2C.<\/li>\n<li><code>&lt;redirect_url&gt;<\/code> is the redirect URL of the app registration in Azure AD B2C.<\/li>\n<li><code>&lt;discovery_url&gt;<\/code> is the discovery URL of the app registration in Azure AD B2C.<\/li>\n<li><code>&lt;scopes&gt;<\/code> is the scope of the app registration in Azure AD B2C.<\/li>\n<li><code>result.idToken<\/code> is the ID token of the user.<\/li>\n<li><code>result.accessToken<\/code> is the access token of the user.<\/li>\n<\/ul>\n<p>An example of the entire code snippet is shown below.<\/p>\n<pre><code class=\"language-dart\">import 'package:flutter\/material.dart';\r\nimport 'package:flutter_appauth\/flutter_appauth.dart';\r\nclass LoginScreen extends ConsumerWidget {\r\n\r\n  @override\r\n  build(BuildContext context, ScopedReader watch) {\r\n    final appAuth = FlutterAppAuth();\r\n    final authState = watch(authStateProvider);\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: Text('Login'),\r\n      ),\r\n      body: Center(\r\n        child: ElevatedButton(\r\n          child: Text('Login'),\r\n          onPressed: () async {\r\n            try {\r\n              final AuthorizationTokenResponse result =\r\n                  await appAuth.authorizeAndExchangeCode(\r\n                AuthorizationTokenRequest(\r\n                  '&lt;client_id&gt;',\r\n                  '&lt;redirect_url&gt;',\r\n                  discoveryUrl: '&lt;discovery_url&gt;',\r\n                  scopes: ['&lt;scopes&gt;'],\r\n                ),\r\n              );\r\n              final idToken = result.idToken;\r\n              var accessToken = result.accessToken;\r\n              authState.state = idToken;\r\n            } catch (e) {\r\n              print(e);\r\n            }\r\n          },\r\n        ),\r\n      ),\r\n    );\r\n  } \r\n}<\/code><\/pre>\n<p>When the onPressed method is clicked, it calls the <code>authorizeAndExchangeCode<\/code> method of the <code>FlutterAppAuth class<\/code>, which redirects the user to the browser, and then back to the app after the user has logged in.<\/p>\n<p>This approach had few drawbacks:<\/p>\n<ul>\n<li>The user is redirected to the browser, and then back to the app, which is not a great user experience.<\/li>\n<li>The user&#8217;s token is stored in the browser&#8217;s cache, which is not secure.<\/li>\n<li>For a successful redirection to the app, we have to define a appAuthRedirectScheme in build.gradle file. For example: redirect URL becomes <code>com.example.authapp:\/\/oauthredirect<\/code> where <code>oauthredirect<\/code> is the callback required by app auth.<\/li>\n<\/ul>\n<p>Now, let&#8217;s see how we achieved the same for the customer, using Azure AD B2C&#8217;s embedded web view.<\/p>\n<h2>Embedded Web View in Flutter<\/h2>\n<p>Because embedded web view is native to the app, it provides a better user experience by not redirecting the user to the browser. As an added bonus, it is more secure than the default view.<\/p>\n<p>Just imagine, once you have UI customization on top of AAD B2C and you use this approach, you can have a seamless experience for your users.<\/p>\n<p>Everything from Multi-Factor Authentication (MFA) to OTP verification will happen within the app. This gives the user a great experience and, at the same time, everything is happening securely within AAD.<\/p>\n<p>You can also use the same login screen for both Android and iOS.<\/p>\n<p>Let&#8217;s see how we achieved this.<\/p>\n<p>First, we created a new app registration in their AAD B2C tenant. Please refer <a href=\"https:\/\/learn.microsoft.com\/en-us\/azure\/active-directory-b2c\/tutorial-register-applications?tabs=app-reg-ga\">AAD B2C App Registration<\/a> for further details.\nWe added a basic redirect URI to their app registration.<\/p>\n<p>Note: The redirect URI should be in the one of the following format:<\/p>\n<ul>\n<li>Native mobile: <code>&lt;app_scheme&gt;:\/\/&lt;host&gt;\/&lt;path&gt;<\/code>.\nFor example, if the app scheme is com.example.authapp, the redirect URI will be com.example.authapp:\/\/oauthredirect.<\/li>\n<li>Generic redirection: <code>https:\/\/ or http:\/\/<\/code>.\nFor example, if the redirect URI is https:\/\/example.com, the redirect URI will be https:\/\/example.com.<\/li>\n<\/ul>\n<p>Two packages are currently available for achieving embedded web view experience in Flutter.<\/p>\n<p>These are <a href=\"https:\/\/pub.dev\/packages\/flutter_inappwebview\">flutter_inappwebview<\/a> and <a href=\"https:\/\/pub.dev\/packages\/flutter_webview_plugin\">flutter_webview_plugin<\/a>.<\/p>\n<h3>Code Snippet Using flutter_inappwebview<\/h3>\n<pre><code class=\"language-dart\">import 'package:flutter\/material.dart';\r\nimport 'package:flutter_inappwebview\/flutter_inappwebview.dart';\r\n@override\r\nWidget build(BuildContext context) {\r\n  return Scaffold(\r\n    appBar: AppBar(\r\n      title: Text('Login'),\r\n    ),\r\n    body: InAppWebView(\r\n      initialUrlRequest: URLRequest(url: Uri.parse('&lt;login_url&gt;')),\r\n      initialOptions: InAppWebViewGroupOptions(\r\n        crossPlatform: InAppWebViewOptions(\r\n          useShouldOverrideUrlLoading: true,\r\n        ),\r\n      ),\r\n      onWebViewCreated: (InAppWebViewController controller) {\r\n        webView = controller;\r\n      },\r\n      onLoadStart: (InAppWebViewController controller, Uri? url) {\r\n        if (url.toString().startsWith('&lt;redirect_url&gt;')) {\r\n          Navigator.of(context).pop();\r\n        }\r\n      },\r\n    ),\r\n  );\r\n}<\/code><\/pre>\n<h3>Code Snippet Using flutter_webview_plugin<\/h3>\n<pre><code class=\"language-dart\">import 'package:flutter\/material.dart';\r\nimport 'package:flutter_webview_plugin\/flutter_webview_plugin.dart';\r\n@override\r\nWidget build(BuildContext context) {\r\n  return WebviewScaffold(\r\n    url: '&lt;user_flow_run_endpoint&gt;',\r\n    appBar: AppBar(\r\n      title: Text('Login'),\r\n    ),\r\n    withJavascript: true,\r\n    withLocalStorage: true,\r\n    withZoom: false,\r\n    hidden: true,\r\n    initialChild: Container(\r\n      color: Colors.white,\r\n      child: const Center(\r\n        child: Text('Loading...'),\r\n      ),\r\n    ),\r\n    onWebViewCreated: (WebViewController webViewController) {\r\n      _controller.complete(webViewController);\r\n      onPageFinished: (String url) {\r\n        if (url.toString().startsWith('&lt;redirect_url&gt;')) {\r\n          Navigator.pushReplacementNamed(context, '\/home');\r\n        }\r\n      };\r\n    },\r\n  );\r\n}<\/code><\/pre>\n<h3>Benefits of This Approach<\/h3>\n<p>Benefits of the embedded web view over the AAD default view are as follows:<\/p>\n<ul>\n<li>The user does not have to be redirected to the browser. This is a great user experience.<\/li>\n<li>The user&#8217;s token is stored in the app&#8217;s cache (example: one can store in secure storage using flutter-secure-storage package), which is more secure.<\/li>\n<li>The web view can be customized to match the app&#8217;s theme. It can be added with Stack, Positioned, Scaffold and constructed as per app&#8217;s requirements.<\/li>\n<li>One can retrieve the user&#8217;s token on successful redirection using <code>onPageFinished<\/code> method and navigate to any route\/screen within the app.<\/li>\n<\/ul>\n<p>While working with the customer and integrating embedded web view of a user flow for phone verification, we noticed that our code was actually reusable and can be ideally imported as a Flutter package.<\/p>\n<p>This led us to develop an easy-to-use Flutter package <a href=\"https:\/\/pub.dev\/packages\/aad_b2c_webview\">aad_b2c_webview<\/a> which embeds AAD user flow\/custom policy within a mobile app.<\/p>\n<p>The entire experience is one where a user is registering and logging in within the app, but everything is actually happening in an embedded browser of AAD.<\/p>\n<p>This has many benefits including:<\/p>\n<ul>\n<li>Javascript vulnerabilities in the embedded web view is taken care by AAD.<\/li>\n<li>The PKCE flow returns an authorization code, which is used (in an OAUTH endpoint) to retrieve access and refresh token. Both of which are then securely stored.Nothing is present in browser&#8217;s cache.<\/li>\n<li>No exposure in code, as we use user flow&#8217;s endpoint<\/li>\n<\/ul>\n<p>An example of our current implementation is provided below:<\/p>\n<pre><code class=\"language-dart\">@override\r\nWidget build(BuildContext context) {\r\n  return MaterialApp(\r\n    title: 'Flutter Demo',\r\n    theme: ThemeData(\r\n      primaryColor: const Color(0xFF2F56D2),\r\n      textTheme: const TextTheme(\r\n        headlineLarge: TextStyle(\r\n          color: Colors.black,\r\n          fontSize: 32,\r\n          fontWeight: FontWeight.w700,\r\n          fontFamily: 'UberMove',\r\n        ),\r\n        bodyText1: TextStyle(\r\n          color: Color(0xFF8A8A8A),\r\n          fontSize: 17,\r\n          fontWeight: FontWeight.w400,\r\n          fontFamily: 'UberMoveText',\r\n        ),\r\n        headline2: TextStyle(\r\n          fontSize: 18,\r\n          color: Colors.black,\r\n          fontWeight: FontWeight.w700,\r\n          fontFamily: 'UberMove',\r\n        ),\r\n      ),\r\n    ),\r\n    debugShowCheckedModeBanner: false,\r\n    initialRoute: '\/',\r\n    routes: {\r\n      \/\/ When navigating to the \"\/\" route, build the Create Account widget.\r\n      '\/': (context) =&gt;\r\n      const ADB2CEmbedWebView(\r\n        url: '&lt;user_flow_endpoint&gt;',\r\n        clientId: '&lt;client_id_of_user_flow&gt;',\r\n        redirectUrl: '&lt;redirect_uri_of_user_flow&gt;',\r\n        appRedirectRoute: '&lt;route_to_redirect_to_after_sign_in&gt;',\r\n        onRedirect: onRedirect,\r\n      ),\r\n    },\r\n  );\r\n}<\/code><\/pre>\n<h2>Parameters Used In ADB2CEmbedWebView<\/h2>\n<ul>\n<li>url: This is the user flow\/policy endpoint<\/li>\n<li>clientId: This is client id of the application used for redirection within user flow<\/li>\n<li>redirectUrl: This is redirect Url of the application used for redirection within user flow<\/li>\n<li>appRedirectRoute: This is the in-app route to navigate to, after successful sign in on redirect<\/li>\n<li>onRedirect: This is the callback method to handle the redirect url. This method is called when the redirect url is hit. This method should return the route to navigate to after successful sign in.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<ul>\n<li>Embedding AAD B2C in a web view provides a seamless user experience for authentication and authorization, while providing protection from security vulnerabilities.<\/li>\n<li>We can customize all login and registration screens per customer requirements and still have access to all the functionalities and features provided by AAD B2C.<\/li>\n<li>While both <a href=\"https:\/\/pub.dev\/packages\/flutter_inappwebview\">flutter_inappwebview<\/a> and <a href=\"https:\/\/pub.dev\/packages\/flutter_webview_plugin\">flutter_webview_plugin<\/a> readily embeds browser views, they currently lack all the handler and tracking methods for integration with AAD B2C.<\/li>\n<li>To get started with AAD integration in your mobile application, reference the Flutter package <a href=\"https:\/\/pub.dev\/packages\/aad_b2c_webview\">aad_b2c_webview<\/a> in <code>pubspec.yaml<\/code>. This will embed the web view, securely store the access token and provide a redirection after successful login.<\/li>\n<li>To access the code for the Flutter package, you can also head over to our Github repository<a href=\"https:\/\/github.com\/microsoft\/aad_b2c_webview\">ad_b2c_webview<\/a>.<\/li>\n<\/ul>\n<p>We are now trying to achieve the same experience in React Native, and hope we can share our learnings here soon.<\/p>\n<h2>References<\/h2>\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/active-directory-b2c\/overview\">Azure AD B2C<\/a>\n<a href=\"https:\/\/flutter.dev\/\">Flutter<\/a>\n<a href=\"https:\/\/pub.dev\/packages\/aad_b2c_webview\">aad_b2c_web view flutter package<\/a>\n<a href=\"https:\/\/github.com\/microsoft\/aad_b2c_webview\">AAD B2C Webview Repository<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Guidance on how we can integrate Azure AD B2C&#8217;s user login workflow within mobile app development using Flutter.<\/p>\n","protected":false},"author":114914,"featured_media":14587,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[60,3388,3366,3364],"class_list":["post-14586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cse","tag-azure","tag-flutter","tag-frameworks","tag-open-source"],"acf":[],"blog_post_summary":"<p>Guidance on how we can integrate Azure AD B2C&#8217;s user login workflow within mobile app development using Flutter.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/14586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/users\/114914"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/comments?post=14586"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/posts\/14586\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media\/14587"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/media?parent=14586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/categories?post=14586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ise\/wp-json\/wp\/v2\/tags?post=14586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}