This project is a starting point for a Flutter application with ZITADEL integration.
It uses package:oidc to handle the user management logic.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
To deploy your page with vercel, go to settings (Build & Development Settings), then override your build command to (make sure to replace [zitadel-url]
and [zitadel-client-id]
):
flutter/bin/flutter build web --dart-define zitadel_url=[zitadel-url] --dart-define zitadel_client_id=[zitadel-client-id]
output directory is
build/web
install command is
if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web
then add your redirect uri in ZITADEL console. It should look like this https://your-site.com/auth.html
.
- Make sure to create a native application.
- Add the redirects:
- mobile applications with your custom scheme (in our case
com.zitadel.zitadelflutter:/
) - web redirect (in our case for local development
http://localhost:4444/auth.html
) and make sure to have enabled devMode.
- mobile applications with your custom scheme (in our case
- To get a
refresh_token
, check the checkbox for Refresh Token and add theoffline_access
scope.
-
Copy your instance url and your
clientId
and set it inlib/main.dart
to thezitadelIssuer
andzitadelClientId
variables. -
Search for every instance of
com.example.zitadelflutter
in the code and replace it with your app identifier (note that having underscore_
in the callback schema is disallowed).This exists in the following locations:
- android/app/build.gradle
- ios/Runner/Info.plist
- macos/Runner/Info.plist
- lib/main.dart
To run this example in your browser, make sure to run it on port 4444.
flutter run -d chrome --web-port=4444 --dart-define zitadel_url=[zitadel-url] --dart-define zitadel_client_id=[zitadel-client-id]
If you want to access more features, and use this app on other platforms (e.g. desktop), Make sure to read the package:oidc wiki