Microsoft Azure Authentication using Flutter Web - flutter-web

Question

I am new to Flutter and I am stuck at a point where I need to authenticate my web app using Microsoft authentication. I didn't find any document related to this neither flutter have package to do so. I guess I need to write code in native platform and connect it to flutter. Help !!

Answer 1

Found one Flutter Microsoft authentication package you can try with importing in your flutter code.
import the Flutter Microsoft Authentication package into your flutter application by adding it to the list of dependencies in your pubsec.yaml file.
dependencies:
flutter_microsoft_authentication: ^0.1.0
Reference: https://pub.dev/packages/flutter_microsoft_authentication

Answer 2

1 year later I faced the same problem and didn't find any clear and working solution despite my searches.
Here is what I did. It may help some people until a clean and easy package is released supporting Flutter web too.
The concept is simple. In order to not handle user authentication, I want the user to challenge his credentials against an Identity Provider (IP): Azure Active Directory, and let Azure redirect him to my application with a security token.
The client application redirects the user to Microsoft authentication web application and pass a “callback url” that Azure will use to redirect the user once he is authenticated. By redirecting to the client app, Azure passes also an Access Token giving eventually some information regarding roles or permissions the recipient of this token may need to know. We can keep the token somewhere. Let’s say in a global variable:
class Globals {
String azureAccessToken = "";
Globals._privateConstructor();
static final Globals _instance = Globals._privateConstructor();
static Globals get instance => _instance;
}
The application handles routes and display either the main app widget if the token is known or the authenticate widget if no token are yet known
import 'package:flutter/material.dart';
import 'package:flutterweb_azuread_authentication/helpers/globals.dart';
import 'authenticate.dart';
import 'main_app.dart';
class FlutterAuthenticationApp extends StatefulWidget {
const FlutterAuthenticationApp({super.key});
#override
State<FlutterAuthenticationApp> createState() => _FlutterAuthenticationAppState();
}
class _FlutterAuthenticationAppState extends State<FlutterAuthenticationApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
routes:
{
"/":(context)=>Globals.instance.azureAccessToken==""?const Authenticate():const MainApp(),
}
)
;
}
}
The MainApp will simply display a message giving the token
import 'package:flutter/material.dart';
import 'package:flutterweb_azuread_authentication/helpers/globals.dart';
class MainApp extends StatefulWidget {
const MainApp({super.key});
#override
State<MainApp> createState() => _MainAppState();
}
class _MainAppState extends State<MainApp> {
#override
Widget build(BuildContext context) {
return
SelectableText("Seems you're authenticated. Your token is ${Globals.instance.azureAccessToken}");
}
}
The Authenticate widget displays a login button. When the user clicks login, he should be redirected to the Microsoft login app and then redirected to the app.
import 'package:flutter/material.dart';
import 'package:openid_client/openid_client_browser.dart' as open_id;
class Authenticate extends StatefulWidget {
const Authenticate({super.key});
#override
State<Authenticate> createState() => _AuthenticateState();
}
class _AuthenticateState extends State<Authenticate> {
#override
Widget build(BuildContext context) {
var tenantId = "<your tenant id>";
var clientId = "<your app registration id>";
var scope = "api://<your scope>";
return Scaffold(
appBar: AppBar(title: const Text("Authenticate with Azure AD")),
body: Center(
child: ElevatedButton(
child: const Text("Login"),
onPressed: null,
),
),
);
}
}
When the user clicks on login, we need to redirect the application to Azure AD authentication, passing the relevant parameters including callback url. This call back url will have to get the token sent by Azure AD and finalize the flow.
Looking for existing package, I got into trouble with the following:
aad_oauth: for any reason, this package was not working for me. I was facing many dependencies issues and I think despite what is announced, this is not supporting Flutter Web.
flutter_aad_auth: not supporting web
azure_ad_authentication: not supporting web
Finally, I had to get my own solution using openid_client package, more precisely openid_client_browser.
This package handles the flow and especially redirect the Flutter Web app to Microsoft Azure authentication.
In order to use Azure AD, we obviously need an Active Directory configured. I will not describe it here. Be aware you'll need your tenandId, the Registration app ID and a scope. I try to explain a bit more in this article.
Now let’s use openid_client_browser to redirect to Azure AD authentication and observe what happens…
import 'package:flutter/material.dart';
import 'package:openid_client/openid_client_browser.dart' as open_id;
class Authenticate extends StatefulWidget {
const Authenticate({super.key});
#override
State<Authenticate> createState() => _AuthenticateState();
}
class _AuthenticateState extends State<Authenticate> {
#override
Widget build(BuildContext context) {
var tenantId = "<your tenant id>";
var clientId = "<your app registration id>";
var scope = "api://<your scope>";
return Scaffold(
appBar: AppBar(title: const Text("Authenticate with Azure AD")),
body: Center(
child: ElevatedButton(
child: const Text("Login"),
onPressed: () { authenticate(Uri.parse("https://login.microsoftonline.com/$tenantId/v2.0"), clientId, [scope]);
},
),
),
);
}
}
authenticate(Uri uri, String clientId, List<String> scopes) async {
var issuer = await open_id.Issuer.discover(uri);
var client = open_id.Client(issuer, clientId);
var authenticator = open_id.Authenticator(client, scopes: scopes);
await authenticator.credential;
authenticator.authorize();
}
When you click on the login button, the Microsoft login page displayed. Once you enter your credentials and finalize the login process, Azure redirects your browser to the root of your Flutter Web app adding #access_token=xxx
A bit strange to me that it is not using regular query parameters with ?access_token but we'll survive.
Now we have to extract the token from the URI as soon as we receive it.
So just before your main entry point run the App,
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutterweb_azuread_authentication/helpers/globals.dart';
import 'widget/flutter_authentication_app.dart';
void main() {
if (Uri.base.toString().contains("access_token=")) {
var idxStart = Uri.base.toString().indexOf("access_token=") + "access_token=".length;
var idxEnd = min(Uri.base.toString().length - 1, Uri.base.toString().indexOf("&token_type="));
var accessToken = Uri.base.toString().substring(idxStart, idxEnd);
Globals.instance.azureAccessToken = accessToken;
}
runApp(const FlutterAuthenticationApp());
}
It doesn't look super pretty due to the way I extract the token, but it does the job.
Sorry if this answer is a bit long but I wanted to be as clear as possible.
You can find the code on github