Flutter SDK
How to integrate with a Flutter app
This guide provides instructions to integrate Authgear with a Flutter app. Supported platforms include:
  • Android
  • iOS

Setup Application in Authgear

Signup for an account in https://portal.authgearapps.com/ and create a project. Or you can use your self-deployed Authgear.
After that, we will need to create an application in Authgear.
Portal
authgear.yaml (self-deployed)
Create an application
  1. 1.
    Go to "Applications".
  2. 2.
    Click "Add Application" in the top right corner
  3. 3.
    Input the name of your application, this is for reference only
  4. 4.
    Defining a custom scheme that the users will be redirected back to your app after they have authenticated with Authgear. Add the URI to "Redirect URIs". (e.g. com.myapp.example://host/path).
  5. 5.
    Click "Save" and keep the client id. You can also obtain the client id from the list later.
If you want to validate JWT access token in your server, select Issue JWT as access token. If you will forward incoming requests to Authgear Resolver Endpoint for authentication, leave this unchecked. See comparisons in Backend Integration.
1
oauth:
2
clients:
3
- name: your_app_name
4
client_id: a_random_generated_string
5
redirect_uris:
6
- "com.myapp.example://host/path"
7
grant_types:
8
- authorization_code
9
- refresh_token
10
response_types:
11
- code
12
- none
Copied!

Create a Flutter app

Follow the documentation of Flutter to see how you can create a new Flutter app.
1
flutter create myapp
2
cd myapp
Copied!

Install the SDK

1
flutter pub add flutter_authgear
Copied!

Platform Integration

To finish the integration, setup the app to handle the redirectURI specified in the application. This part requires platform specific integration.

Android

Add the following activity entry to the AndroidManifest.xml of your app. The intent system would dispatch the redirect URI to OAuthRedirectActivity and the sdk would handle the rest.
1
<!-- Your application configuration. Omitted here for brevity -->
2
<application>
3
<!-- Other activities or entries -->
4
5
<!-- Add the following activity -->
6
<activity android:name="com.authgear.flutter.OAuthRedirectActivity"
7
android:launchMode="singleTask">
8
<intent-filter>
9
<action android:name="android.intent.action.VIEW" />
10
<category android:name="android.intent.category.DEFAULT" />
11
<category android:name="android.intent.category.BROWSABLE" />
12
<!-- Configure data to be the exact redirect URI your app uses. -->
13
<!-- Here, we are using com.authgear.example://host/path as configured in authgear.yaml. -->
14
<!-- NOTE: The redirectURI supplied in AuthorizeOptions *has* to match as well -->
15
<data android:scheme="com.myapp.example"
16
android:host="host"
17
android:pathPrefix="/path"/>
18
</intent-filter>
19
</activity>
20
</application>
Copied!

iOS

Declare URL Handling in Info.plist

In Info.plist, add the matching redirect URI.
1
<?xml version="1.0" encoding="UTF-8"?>
2
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3
<plist version="1.0">
4
<dict>
5
<!-- Other entries -->
6
<key>CFBundleURLTypes</key>
7
<array>
8
<dict>
9
<key>CFBundleTypeRole</key>
10
<string>Editor</string>
11
<key>CFBundleURLSchemes</key>
12
<array>
13
<string>com.myapp.example</string>
14
</array>
15
</dict>
16
</array>
17
</dict>
18
</plist>
Copied!

Try authenticate

Add this code to your app. This snippet configures authgear to connect to an authgear server deployed at endpoint with the client you have just setup via clientID, opens a browser for authorization, and then upon success redirects to the app via the redirectURI specified.
1
import 'package:flutter/material.dart';
2
import 'package:flutter_authgear/flutter_authgear.dart';
3
4
void main() {
5
runApp(const MyApp());
6
}
7
8
class MyApp extends StatefulWidget {
9
const MyApp({Key? key}) : super(key: key);
10
11
@override
12
State<MyApp> createState() => _MyAppState();
13
}
14
15
16
class _MyAppState extends State<MyApp> {
17
late Authgear _authgear;
18
19
@override
20
void initState() {
21
super.initState();
22
_init();
23
}
24
25
Future<void> _init() async {
26
_authgear = Authgear(endpoint: "ENDPOINT", clientID: "CLIENT_ID");
27
await _authgear.configure();
28
}
29
30
@override
31
Widget build(BuildContext context) {
32
return MaterialApp(
33
title: "MyApp",
34
home: Scaffold(
35
appBar: AppBar(title: const Text("MyApp")),
36
body: TextButton(
37
child: Text("Authenticate"),
38
onPressed: _onPressedAuthenticate,
39
),
40
),
41
);
42
}
43
44
Future<void> _onPressedAuthenticate() async {
45
try {
46
await _authgear.authenticate(redirectURI: "REDIRECT_URI");
47
} on CancelException {
48
}
49
}
50
}
Copied!

Using the Access Token in HTTP Requests

To include the access token to the HTTP requests to your application server, use wrapHttpClient.
The wrapped client will include the Authorization header in every HTTP request, and refresh access token automatically.
1
final originalClient = ...
2
final client = authgear.wrapHttpClient(originalClient);
Copied!

Logout

To log out the user from the current app session, you need to invoke thelogoutfunction.
1
await authgear.logout();
Copied!

Next steps

To protect your application server from unauthorized access. You will need to integrate your backend with Authgear.

Flutter SDK Reference

For detailed documentation on the Flutter SDK, visit Flutter SDK Reference