Athen

InsightsFlutter

Login with Microsoft in Flutter Application

Login with Microsoft in Flutter Application

Developing the feature that allows a Microsoft account login in a Flutter app involves integrating Microsoft’s identity service using OAuth 2.0 authentication.

Add Dependencies in Flutter

Inside the Flutter application, add the package “flutter_appauth: 6.0.2” which helps configure Microsoft login.

Azure Setup

  1. Navigate to the Azure portal and, within app registrations, create a new app.
  2. Retrieve crucial details such as application ID, client secret (password), and tenant ID.

Platform configuration in Azure

Inside your application in Azure:

  1. Go to Authentication.
  2. Add the Android platform and configure details like package name and SHA-1 key.

Flutter Configuration

After Azure configuration setup, call the method _loginWithMicrosoft, which is given below:

 Future<void> _loginWithMicrosoft(BuildContext context) async {
    final AuthorizationTokenResponse? result =
        await appAuth.authorizeAndExchangeCode(
      AuthorizationTokenRequest(
        scopes: _scopes,
        'f0788450-4dc9-4a29-946a-063789c2c762', // application id
        'https://hrmsprodapp.azurewebsites.net',// redirect uri
        serviceConfiguration: const AuthorizationServiceConfiguration(
          authorizationEndpoint:
              'https://login.microsoftonline.com/9f01d40c-8ea1-43c5-835f-f919fadeace0/oauth2/v2.0/authorize',
          tokenEndpoint:
              'https://login.microsoftonline.com/9f01d40c-8ea1-43c5-835f-f919fadeace0/oauth2/v2.0/token',
        ),
      ),
    );

Call this method inside the onTap function of your login button.

    body: Center(
        child: ElevatedButton(
          onPressed: () => _loginWithMicrosoft(context),
          child: Text('Login with Microsoft'),
      )

Handle Authentication Result

Upon successful completion of the method, retrieve the authentication token from the response.

Conclusion

This third-party integration utilizing the “flutter_appauth” package simplifies Microsoft account login in your Flutter app. Follow these steps for a hassle-free setup.

Next step

Ready to put these ideas to work?

Talk with Athen about Microsoft 365, AI, cloud, mobility, and data for your organisation.

Let's solve somethingtogether.

  1. 01

    30-min scoping call, NDA-ready

  2. 02

    Targeted POC in 2–4 weeks

  3. 03

    Statement of Work & team start