Flutter app multiplatform app with Windows Azure oauth2 login

Question

We are working on a Flutter project where we want to access data through Windows Azure Oauth2 authentication which should work on all major platforms (at least most of them). The critical platforms are android, ios and web, but preferable also windows-native, linux, fuchsia and more.

The problem is mainly, that we haven't found (yet) any flutter library that supports the web platform (edge, chrome, safari +++) which works as expected.

We see many (often older) posts that says that the web approach is not available yet.

Are there any libraries that supports all, and do anyone have an example (full working "out of the box" against Azure on github(?) i.e.) that anyone know of, which is made available lately ?

Answer 1

You can use the package msal_js for the web, and aad_oauth for ios and android.

To combine these in a multi-platform-project, you will need to get your hands dirty.

One possible solution:

Create 4 files in your project: auth_manager_stub.dart, iAuth_manager.dart, auth_manager_native.dart, auth_manager_web.dart.

   //auth_manager_stub.dart
   import 'auth_manager.dart';

   AuthManager getManager() =>
    throw UnsupportedError('Cannot create an auth manager');


  

Our Interface-file.

import 'auth0_manager_stub.dart'
       if (dart.library.io) 'package:aad_oauth/aad_oauth.dart'
       if (dart.library.js) 'package:msal_js/msal_js.dart';

abstract class AuthManager {
  static AuthManager? _instance;

  static AuthManager? get instance {
    _instance ??= getManager();
    return _instance;
  }

  Future<User> login();
}

Our auth_manager_native.dart-file will look like this:

import 'package:aad_oauth/aad_oauth.dart';
import 'package:aad_oauth/model/config.dart';
import 'iAuth_manager.dart';
//other imports

AuthManager getManager() => Auth0Manager();

class Auth0Manager extends AuthManager {
  String? accessToken;

  @override
  Future<void> Login() async {
    //some native code....
  }

}

and our web.dart-file like this:

import 'package:msal_js/msal_js.dart';
import 'auth_manager.dart';
import 'dart:js' as js;
import 'iAuth_manager.dart';

AuthManager getManager() => Auth0ManagerForWeb();

class Auth0ManagerForWeb extends AuthManager {



  @override
  Future<String> Login() async {
    //web-specific code here
  }
}

Just implement the different login-method for each platform in the platform-specific file.

in our main.dart file we could do this:

void login() async {
   AuthManager.instance?.Login();
}

and we will call the specific strategy depending on which device we are using. Usage of the respective libraries and how we implement them is out of this questions scope.

Credit to this medium article and this