flutter_appauth with keycloak identity server

[SameerChorge94]

Hello,

Is there any reference example or documentation for using the flutter_appauth with keycloak identity server. as per our project requirement we want the package that supports both flutter web and the mobile devices (android and IOS) . Any references for connection with keycloak are appreciable.

Thank you.

[schuster-rainer]

You should be fine following the auth0 setup or Azure B2C. I've been adding B2C login. The key to this is to use the discovery url for the client. Here is my code I used. Just give it a try.

import 'package:flutter_appauth/flutter_appauth.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class AzureB2CClient {
  final AzureB2CConfig config;
  FlutterSecureStorage storage = FlutterSecureStorage();

  AzureB2CClient(this.config);

  login() async {
    var idToken = await storage.read(key: 'token');
    // await storage.write(key: 'refreshToken', value: response.refreshToken);
    if (idToken == null) {
      FlutterAppAuth _appAuth = FlutterAppAuth();
      AuthorizationTokenResponse response;
      print("logging in");
      response = await _appAuth.authorizeAndExchangeCode(
        AuthorizationTokenRequest("<your client id>", 
          // on iOS it's important to add a trailing / to the redirect uri. i.e.: com.mycompany.app://oauthredirect/
           "<your redirect ur>",
            // App ID
            issuer:
                "<your issuer here>",
            discoveryUrl: "<your discovery url here",
            scopes: config.scopes),
      );

      idToken = response.idToken;
      print(response.tokenAdditionalParameters);

      await storage.write(key: 'token', value: idToken);
      await storage.write(key: 'refreshToken', value: response.refreshToken);
    }
  }

  Future refreshAuth() async {
    FlutterAppAuth _appAuth = FlutterAppAuth();
    final TokenResponse response = await _appAuth.token(TokenRequest(
        config.clientId, config.redirectURL,
        discoveryUrl: config.discoveryURL,
        refreshToken: await storage.read(key: 'refreshToken'),
        scopes: config.scopes));

    await storage.write(key: 'token', value: response.refreshToken);
    await storage.write(key: 'refreshToken', value: response.refreshToken);
  }
}

You can lookup your discovery url from the documentation: https://www.keycloak.org/docs/4.8/authorization_services/#_service_authorization_api

[SameerChorge94]

Thanks,

for flutter web also i need to follow the above structure? as per one existing issues https://github.com/MaikuB/flutter_appauth/issues/70#issuecomment-690687869 there's one zip package for flutter web support.

[schuster-rainer]

Didn't test web, as I don't have a use case for it right now. You have to do that on your own. You are welcome to share your findings here for others to come across this issue.

[SameerChorge94]

ok.

i added the package in yaml file and run the project as per above implementation but getting the error, for which i created the below issue. can you suggest any solution for this issue https://github.com/MaikuB/flutter_appauth/issues/156

[MaikuB]

There isn't a guide for using this with keycloak. There are many identity providers out there that it's unlikely you'd find guides for using each provider for each different library. So long as the provider is OAuth 2.0 compliant then it should work and there's others who mentioned they have gotten it to work with keycloak. If you're not familiar with OAuth, then that is something I would look up to read further on too. You should also check the docs for keycloak to see what they need, make sure you setup your app to make their requirements and make use of the appropriate plugin APIs. There's an example app in the repo that makes of IdentityServer that sends to authorisation requests that can be used as a reference if needed. Even if it's using IdentityServer, it should still be of use as authorisation is a standard process

If you're still stuck then you should reach out to the wider community for help e.g. go to Stack Overflow, Slack, Discord etc