Skip to main content
Version: 1.x

Flutter: Integrate Logto Dart SDK


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

flutter pub get logto_dart_sdk

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

git clone

Dependency settingsโ€‹


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

By default Android backups data on Google Drive. It can cause exception 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 ... >

  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 ...
<?xml version="1.0" encoding="utf-8"?>
<exclude domain="sharedpref" path="FlutterSecureStorage"/>

Please check flutter_secure_storage for more details.


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


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.


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"/>

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.


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

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


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.

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.


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โ€‹