Skip to content

Latest commit

 

History

History
75 lines (47 loc) · 2.8 KB

README.md

File metadata and controls

75 lines (47 loc) · 2.8 KB
Raw

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:

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

Deploy with Vercel

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