zitadel_flutter

This project is a starting point for a Flutter application with ZITADEL integration.

It uses package:oidc to handle the user management logic.

Getting Started

A few resources to get you started if this is your first Flutter project:

• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Deploy your own

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.

ZITADEL configuration

• 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.
• To get a refresh_token, check the checkbox for Refresh Token and add the offline_access scope.

Run

1. Copy your instance url and your clientId and set it in lib/main.dart to the zitadelIssuer and zitadelClientId variables.

2. 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

Web

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]

Further Development

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