keycloak_flutter 0.0.1-pre 
keycloak_flutter: ^0.0.1-pre copied to clipboard
devappliance.comKeycloak client adapter for flutter based on the keycloak-js implementation.
This library is the dart/flutter implementation of keycloak client adapter.
With this library, you can interact directly with your keycloak authentication servers right in your flutter for web code. (see example)
Usage #
Firstly, you need to have keycloak configured. Duh!
Include keycloak_flutter as a dependency in the dependencies section of your pubspec.yaml file :
dependencies:
flutter_web_plugins:
sdk: flutter
keycloak_flutter: ^latest.version
Next, your application needs to be properly configured to use the regular url scheme (http://localhost.com) instead of
the default that comes with flutter (http://localhost.com/#/). Follow the instructions below to do this.
- Add
<base href="/">inside the section of yourweb/index.htmlfile. This will be added automatically for new projects created by flutter create. But for existing apps, the developer needs to add it manually. - Add the below code as the first line in your main function
void main() {
configureUrlStrategy();
runApp(MyApp());
}
The configureUrlStrategy() above uses a custom implementation of the PathUrlStrategy which cleans out your url to be
more like a regular web application url. This is required for keycloak to work properly. More
info here
Next, In your web/index.html, you need to add a script with a source that references your keycloak.js file. You can
find v10.0.2 in the example project. Your head tag should look as below.
<!DOCTYPE html>
<html>
<head>
<base href="/">
<!-- CODE REMOVED FOR BREVITY -->
<link rel="manifest" href="manifest.json">
<script src="js/keycloak.js"></script>
</head>
<body>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
You can now use keycloak in your app.
- Read more about keycloak client adapter here
Example #
void main() {
configureUrlStrategy();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
Provider(
create: (_) {
var keycloakService = KeycloakService();
keycloakService.keycloakEventsStream.listen((event) {
if (event.type == KeycloakEventType.OnAuthSuccess) {
// User is authenticated
}
});
return keycloakService
..init(
config: KeycloakConfig(
url: 'http://localhost:8080/auth', // Keycloak auth base url
realm: 'securegate',
clientId: 'securegate-frontend'),
initOptions: KeycloakInitOptions(
onLoad: 'check-sso',
silentCheckSsoRedirectUri:
'${window.location.origin}/silent-check-sso.html',
),
);
},
),
],
child: MaterialApp(
title: 'Keycloak Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Keycloak demo'),
),
);
}
}
Features and bugs #
Please file feature requests and bugs at the issue tracker.
Metadata
Publisher
Metadata
Keycloak client adapter for flutter based on the keycloak-js implementation.
Repository (GitHub)
View/report issues
License
unknown (license)
Dependencies
flutter, flutter_web_plugins, js, logger
