Microsoft Login for Flutter: A Step-by-Step Guide

Microsoft Azure provides a robust authentication system that allows you to integrate Microsoft login into your Flutter mobile and web applications. In this tutorial, we will walk you through the process of setting up Microsoft login using Azure and Flutter.

Prerequisites

Before you begin, ensure you have the following prerequisites:

1. A Microsoft Azure account.
2. Basic knowledge of Flutter and Dart.
3. Flutter development environment set up.

Step 1: Add Project on Azure

Create an Azure Account: If you don’t already have an Azure account, sign up for one at Azure Portal.

Go to Services and Select App Registrations: After logging in to the Azure Portal, navigate to “App Registrations” under “Azure Active Directory.”

In App registration click new registration

Create a New Registration: Click on the “New registration” button to create a new application registration.

1. Create a New Registration: Click on the “New registration” button to create a new application registration.
2. Configure the Registration:

• Enter a meaningful name for your application.
• Choose the appropriate account types (e.g., “Accounts in this organizational directory only” or “Accounts in any organizational directory”).

5. Configure the Redirect URL: In the registration settings, configure the redirect URL. For web applications, use your web URL. For mobile applications, use your native client URL.

Step 2: Make a Login Request in Flutter

In your Flutter project, you can use the aad_oauth package to handle Microsoft login. Here's how to do it:

Import the Package: Make sure you have imported the aad_oauth package in your Flutter project. You can add it to your pubspec.yaml file and run flutter pub get.

dependencies:
  aad_oauth: ^2.0.1

Configure the Microsoft Authentication:

import 'package:aad_oauth/aad_oauth.dart';

final Config config = Config(
  tenant: "Your TenantId", // Set this to "common" for multi-tenant apps
  clientId: "Your clientId",
  scope: MicrosoftConfig().scope,
  redirectUri: kIsWeb
      ? "your local host URL"
      : "your native client URL",
  navigatorKey: navigatorKey, // Ensure this key is defined in your main file under MaterialApp.
);

Make the Login Request:

Future azureSignInApi(bool redirect) async {
  final AadOAuth oauth = AadOAuth(config);

  config.webUseRedirect = redirect;
  final result = await oauth.login();

  result.fold(
    (l) => showError("Microsoft Authentication Failed!", context),
    (r) async {
      final result = await AuthServices.fetchAzureUserDetails(r.accessToken);
    },
  );
}

Step 3: Fetch User Details

To retrieve user details from Microsoft Azure, you can make a REST API call using the access token obtained during the login process. Here’s how to do it:

import 'dart:convert';
import 'package:http/http.dart' as http;

static Future fetchAzureUserDetails(accessToken) async {
  http.Response response;
  response = await http.get(
    Uri.parse("https://graph.microsoft.com/v1.0/me"),
    headers: {"Authorization": "Bearer $accessToken"},
  );

  return json.decode(response.body);
}

Now you have successfully integrated Microsoft login into your Flutter application using Azure! Users can authenticate with their Microsoft accounts, and you can access their details via the Microsoft Graph API.

Remember to handle errors and user interface elements such as sign-out buttons and profile displays according to your application’s requirements.

By following these steps, you can enhance the user experience in your Flutter app and provide seamless authentication using Microsoft accounts.