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

To deploy your page with vercel, set your build command to

flutter build web

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 ensure webCallbackUrlScheme in main.dart is set to your deployed site and add your redirect uri in ZITADEL console. It should look like this https://your-site.com/auth.html.

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

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.

Make sure to create a native application. Add the redirects for mobile applications with your custom scheme (in our case com.zitadel.zitadelflutter) and your 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.

Copy your instance url and your clientId and set it in lib/main.dart.

Navigate to your AndroidManifest.xml and add the following activity with your scheme.

<activity
    android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
    android:exported="true">
    <intent-filter android:label="flutter_web_auth_2">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="[callback-url-scheme]" /> <!-- ex: com.example.zitadelflutter -->
    </intent-filter>
</activity>

then connect your device or run a simulator and run your application.

Make sure to connect your iPhone or run the simulator, then type

flutter run -d iphone

To run this example in your browser, make sure to run it on port 4444.

flutter run -d chrome --web-port=4444