Authentication using Azure AD B2C in Flutter

Let’s get started by setting up your Azure AD B2C tenant and then diving into the steps required to implement Azure AD B2C authentication in your Flutter app.

Step 1: Set Up Your Azure AD B2C Tenant

Before you start, make sure you have an Azure AD B2C tenant set up with your policies and applications configured. If you haven’t done this already, you can follow Microsoft’s documentation on how to set up Azure AD B2C

Step 2: Create a Flutter Project

If you don’t have a Flutter project set up, create one using the Flutter CLI:

flutter create my_b2c_app
cd my_b2c_app

Step 3: Add Dependencies

Open your `pubspec.yaml` file and add the `flutter_appauth` dependency:

dependencies:
  flutter:
    sdk: flutter
  flutter_appauth: ^0.11.2

Then run `flutter pub get` to fetch the dependencies.

Step 4: Configure Your Azure AD B2C Policy

In your Azure AD B2C policy, make sure you have configured a user flow or custom policy to authenticate users. Note down the policy name, client ID, and other necessary details.

Step 5: Create a Flutter Widget for Authentication

Create a new Dart file, for example, `auth_widget.dart`, to implement the authentication logic. This widget will open a web view for the user to log in:

import 'package:flutter/material.dart';
import 'package:flutter_appauth/flutter_appauth.dart';

class AuthWidget extends StatefulWidget {
  @override
  _AuthWidgetState createState() => _AuthWidgetState();
}

class _AuthWidgetState extends State<AuthWidget> {
  final FlutterAppAuth _appAuth = FlutterAppAuth();
  final String _clientId = 'YOUR_CLIENT_ID';
  final String _redirectUrl = 'YOUR_REDIRECT_URL';
  final String _authorizationUrl = 'YOUR_AUTHORIZATION_URL';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Azure AD B2C Login'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final AuthorizationTokenResponse result =
                await _appAuth.authorizeAndExchangeCode(
              AuthorizationTokenRequest(
                _clientId,
                _redirectUrl,
                issuer: _authorizationUrl,
                scopes: ['openid', 'profile'],
              ),
            );

            // Handle the result, which contains the access token.
            // You can save the token or use it for further requests.
            print(result.accessToken);
          },
          child: Text('Login with Azure AD B2C'),
        ),
      ),
    );
  }

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

Make sure to replace `_clientId`, `_redirectUrl`, and `_authorizationUrl` with your Azure AD B2C client ID, redirect URL, and authorization URL.

Step 6: Integrate the Authentication Widget

In your main Flutter app, integrate the `AuthWidget` by pushing it onto the Navigator stack or placing it in your app’s widget hierarchy.

import 'package:flutter/material.dart';
import 'auth_widget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AuthWidget(),
      ),
    );
  }
}

Step 7: Run Your Flutter App

Run your Flutter app using `flutter run`, and you should see the “Login with Azure AD B2C” button. When clicked, it will open a webview for the user to log in with their Azure AD B2C credentials and retrieve an access token.

This tutorial demonstrates how to integrate Azure AD B2C authentication into a Flutter app using the flutter_appauth package. Make sure to handle the received access token securely and implement further logic according to your application’s requirements.