Magic OAuth for Flutter

Magic OAuth for Flutter

#Installation

Social Logins work as an extension to Magic SDK. To add Social Login to your Magic integration, follow these steps to install the OAuth Extension:

In your Podfile, add following lines:

Yaml
01dependencies:
02  flutter:
03    sdk: flutter
04  magic_sdk: ^2.0.0
05  magic_ext_oauth: ^0.3.0

Run the following command to install dependencies:

Bash
01$ dart pub get

#Create an SDK Instance

Follow the instruction Magic Flutter SDK to get started

#Start the OAuth 2.0 login flow:

#Public Methods

Dart
01Future<OAuthResponse> loginWithPopup(OAuthConfiguration configuration)
02
03class OAuthConfiguration {
04    OAuthProvider provider;
05    String redirectURI;
06    List<String>? scope;
07    String? loginHint;
08
09    OAuthConfiguration({required this.provider, required this.redirectURI, this.scope, this.loginHint});
10}

⁠ Your App Scheme (ie. "appName://")

ValueTypeDefinition
providerOAuthProviderPlease check all supported providers in the social-login section
redirectURIString
scopeList

<String>

This field specifies a space-delimited list of access scopes that correspond to the resources that your application could access on the user's behalf

#Returns

userInfo contains the OpenID Connect profile information about the user. The schema of this object should match the OpenID spec, except that fields are camelCased instead of snake_cased. The presence of some fields may differ depending on the specific OAuth provider and the user's own privacy settings. See: https://openid.net/specs/openid-connect-basic-1_0.html#StandardClaims

Dart
01class OAuthResponse {
02  OAuthPartialResult? oauth;
03  MagicPartialResult? magic;
04}
05
06class OAuthPartialResult {
07  String? provider;
08  List<String>? scope;
09  String? accessToken;
10  String? userHandle;
11  OpenIDConnectProfile? userInfo;
12}
13
14class MagicPartialResult {
15  String? idToken;
16  UserMetadata? userMetadata;
17}
18
19class OpenIDConnectProfile {
20  String? name;
21  String? familyName;
22  String? givenName;
23  String? middleName;
24  String? nickname;
25  String? preferredUsername;
26  String? profile;
27  String? picture;
28  String? website;
29  String? gender;
30  String? birthdate;
31  String? zoneinfo;
32  String? locale;
33  int? updatedAt;
34
35  // OpenIDConnectEmail
36  String? email;
37  bool? emailVerified;
38
39  // OpenIDConnectPhone
40  String? phoneNumber;
41  bool? phoneNumberVerified;
42
43  // OpenIDConnectAddress
44  OIDAddress? address;
45}
46
47class OIDAddress {
48  String? formatted;
49  String? streetAddress;
50  String? locality;
51  String? region;
52  String? postalCode;
53  String? country;
54}

#Example

Dart
01import 'package:magic_ext_oauth/magic_ext_oauth.dart';
02import 'package:magic_sdk/magic_sdk.dart';
03
04var configuration = OAuthConfiguration(provider: OAuthProvider.GITHUB, redirectURI: 'YOUR_APP_SCHEME://');
05var result = await
06magic.oauth.loginWithPopup(configuration);
important

In order to capture the callback url in Android, the following activity needs to be added to your /main/AndroidManifest.xml.

Be sure to replace YOUR_APP_SCHEME with your actual callback url scheme, and remain unchanged for the rest.

Xml
01<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
02    <intent-filter android:label="flutter_web_auth">
03        <action android:name="android.intent.action.VIEW" />
04        <category android:name="android.intent.category.DEFAULT" />
05        <category android:name="android.intent.category.BROWSABLE" />
06        <data android:scheme="YOUR_APP_SCHEME" />
07    </intent-filter>
08</activity>

Server-side SDKs?

Integrate Magic with your existing backend.