Skip to main content
Version: 1.x

Flutter: Integrate Logto Dart SDK

note

This tutorial assumes you have created an Application of type "Native App" in Admin Console. If you are not ready, read this before continuing.

Add Logto SDK as a dependency​

Our flutter SDK package is published on pub.dev.

flutter pub get logto_dart_sdk

Or you may directly get your own copy of the SDK from github

git clone https://github.com/logto-io/dart

Dependency settings​

flutter_secure_storage

We use flutter_secure_storage to implement the cross-platform persistent secure token storage.

  • Keychain is used for iOS
  • AES encryption is used for Android.

Config Android version:​

In [project]/android/app/build.gradle set minSdkVersion to >= 18.

android {
    ...

    defaultConfig {
        ...
        minSdkVersion 18
        ...
    }
}
note

By default Android backups data on Google Drive. It can cause exception java.security.InvalidKeyException:Failed to unwrap key. You will need to:

  • disable autobackup,
  • or exclude sharedprefs FlutterSecureStorage used by the plugin
  1. To disable auto backup, go to your app manifest file and set the boolean value android:allowBackup:
<manifest ... >
    ...
    <application
      android:allowBackup="false"
      android:fullBackupContent="false"
      ...
    >
        ...
    </application>
</manifest>

  1. Exclude sharedprefs FlutterSecureStorage.

If you need to enable the android:fullBackupContent for your app. Set up a backup rule to exclude the prefs used by the plugin:

<application ...
  android:fullBackupContent="@xml/backup_rules">
</application>
<?xml version="1.0" encoding="utf-8"?>
<full-backup-content>
  <exclude domain="sharedpref" path="FlutterSecureStorage"/>
</full-backup-content>

Please check flutter_secure_storage for more details.

flutter_web_auth

flutter_web_auth is used behind Logto's flutter SDK. We rely on its webview-based interaction interface to open Logto's authorization pages.

note

Under the hood, this plugin uses ASWebAuthenticationSession on iOS 12+ and macOS 10.15+, SFAuthenticationSession on iOS 11, Chrome Custom Tabs on Android and opens a new window on Web. You can build it with iOS 8+, but it is currently only supported by iOS 11 or higher.

Andorid:

In order to capture the callback url from Logto's sign-in web page, you will need to register your sign-in redirectUri to the AndroidManifest.xml.

<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
    <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="io.logto"/>
    </intent-filter>
</activity>

Init LogtoClient​

import 'package:logto_dart_sdk/logto_dart_sdk.dart';
import 'package:http/http.dart' as http;

// ...
late LogtoClient logtoClient;

// LogtoConfig
final logtoConfig = const LogtoConfig(
  endpoint: "<your-logto-endpoint>", // E.g. http://localhost:3001
  appId: "<your-app-id>"
  ...
);

void _init() async  {
  logtoClient = LogtoClient(
    config: logtoConfig,
    httpClient: http.Client(), // Optional http client
  );
}

Sign in​

Configure Redirect URI​

Let's switch to the Application details page of Admin Console in this section. Add a Redirect URI io.logto://callback and click "Save Changes".

Redirect URI in Admin Console

Redirect URI is an OAuth 2.0 concept which implies the location should redirect after authentication.

note

Before calling .signIn(redirectUri), make sure you have correctly configured Redirect URI in Admin Console.

void signIn() async {
  await logtoClient.signIn(redirectUri);
}

SignOut​

Calling .signOut() will clean all the Logto data in secret storage, if it has.

void signOut() async {
  await logtoClient.signOut();
}

Fetch user information​

Logto SDK helps you fetch the user information from the OIDC UserInfo Endpoint.

You can get the user information by calling logtoClient.getUserInfo() after signing in.

The user information response will vary based on the scopes used in the LogtoConfig while initializing the LogtoClient; and the following table lists the relations between user information and scopes:

Field NameTypeRequired ScopeNotes
substringopenidThe openid scope is added by default.
namestringprofileThe profile scope is added by default.
usernamestringprofileThe profile scope is added by default.
picturestringprofileThe profile scope is added by default.
emailstringemail
email_verifiedbooleanemail
phone_numberstringphone
phone_number_verifiedbooleanphone
custom_dataobjectcustom_data
identitiesobjectidentities

Backend API authorization​

Add your API resource indicators to the Logto SDK configs:

const config = LogtoConfig(
  endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
  clientId: '<your-client-id>',
  resources: ['<your-resource-indicators>'],
  scopes: ['<your-resource-scopes>'],
);

logtoClient = LogtoClient(config: config);

Claim an authorization token from Logto before making your API request:

final accessToken = await logtoClient.getAccessToken(
  resource: '<your-target-api-resource>',
  scopes: ['<your-target-api-scopes>'],
);

With the user's authorization status, a JWT format access_token will be granted and issued by Logto, specifically for the requested API resource. Encrypted and audience-restricted with an expiration time. The token carries all the necessary info to represent the authority of this request.

Put the token in the Authorization field of HTTP headers with the Bearer format (Bearer YOUR_TOKEN), and you are good to go.

note

The Bearer Token's integration flow may vary based on the framework or requester you are using. Choose your own way to apply the request Authorization header.

Further readings​