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:

dependencies:
  flutter:
    sdk: flutter
  magic_sdk: ^0.3.0
  magic_ext_oauth: ^0.1.0

Run the following command to install dependencies:

$ 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

Future<OAuthResponse> loginWithPopup(OAuthConfiguration configuration)

class OAuthConfiguration {
    OAuthProvider provider;
    String redirectURI;
    List<String>? scope;
    String? loginHint;

    OAuthConfiguration({required this.provider, required this.redirectURI, this.scope, this.loginHint});
}
ValueTypeDefinition
providerOAuthProviderPlease check all supported providers in the social-login section
redirectURIStringEmail address of the authenticated user.
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

class OAuthResponse {
  OAuthPartialResult? oauth;
  MagicPartialResult? magic;
}

class OAuthPartialResult {
  String? provider;
  List<String>? scope;
  String? accessToken;
  String? userHandle;
  OpenIDConnectProfile? userInfo;
}

class MagicPartialResult {
  String? idToken;
  UserMetadata? userMetadata;
}

class OpenIDConnectProfile {
  String? name;
  String? familyName;
  String? givenName;
  String? middleName;
  String? nickname;
  String? preferredUsername;
  String? profile;
  String? picture;
  String? website;
  String? gender;
  String? birthdate;
  String? zoneinfo;
  String? locale;
  int? updatedAt;

  // OpenIDConnectEmail
  String? email;
  bool? emailVerified;

  // OpenIDConnectPhone
  String? phoneNumber;
  bool? phoneNumberVerified;

  // OpenIDConnectAddress
  OIDAddress? address;
}

class OIDAddress {
  String? formatted;
  String? streetAddress;
  String? locality;
  String? region;
  String? postalCode;
  String? country;
}

#Example

import 'package:magic_ext_oauth/magic_ext_oauth.dart';
import 'package:magic_sdk/magic_sdk.dart';

var configuration = OAuthConfiguration(provider: OAuthProvider.GITHUB, redirectURI: 'YOUR_APP_SCHEME://');
var result = await
magic.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.

<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
    <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="YOUR_APP_SCHEME" />
    </intent-filter>
</activity>

Server-side SDKs?

Integrate Magic with your existing backend.