feat: Implement Twitter (X) login using OAuth 2.0 PKCE flow via webview.
This commit is contained in:
@@ -124,8 +124,6 @@ PODS:
|
||||
- sqflite_darwin (0.0.4):
|
||||
- Flutter
|
||||
- FlutterMacOS
|
||||
- twitter_login (0.0.1):
|
||||
- Flutter
|
||||
- url_launcher_ios (0.0.1):
|
||||
- Flutter
|
||||
- webview_flutter_wkwebview (0.0.1):
|
||||
@@ -146,7 +144,6 @@ DEPENDENCIES:
|
||||
- path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
|
||||
- shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
|
||||
- sqflite_darwin (from `.symlinks/plugins/sqflite_darwin/darwin`)
|
||||
- twitter_login (from `.symlinks/plugins/twitter_login/ios`)
|
||||
- url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
|
||||
- webview_flutter_wkwebview (from `.symlinks/plugins/webview_flutter_wkwebview/darwin`)
|
||||
|
||||
@@ -198,8 +195,6 @@ EXTERNAL SOURCES:
|
||||
:path: ".symlinks/plugins/shared_preferences_foundation/darwin"
|
||||
sqflite_darwin:
|
||||
:path: ".symlinks/plugins/sqflite_darwin/darwin"
|
||||
twitter_login:
|
||||
:path: ".symlinks/plugins/twitter_login/ios"
|
||||
url_launcher_ios:
|
||||
:path: ".symlinks/plugins/url_launcher_ios/ios"
|
||||
webview_flutter_wkwebview:
|
||||
@@ -237,7 +232,6 @@ SPEC CHECKSUMS:
|
||||
PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
|
||||
shared_preferences_foundation: 5086985c1d43c5ba4d5e69a4e8083a389e2909e6
|
||||
sqflite_darwin: 5a7236e3b501866c1c9befc6771dfd73ffb8702d
|
||||
twitter_login: 2794db69b7640681171b17b3c2c84ad9dfb4a57f
|
||||
url_launcher_ios: bb13df5870e8c4234ca12609d04010a21be43dfa
|
||||
webview_flutter_wkwebview: 29eb20d43355b48fe7d07113835b9128f84e3af4
|
||||
|
||||
|
||||
107
lib/core/services/twitter_auth_service.dart
Normal file
107
lib/core/services/twitter_auth_service.dart
Normal file
@@ -0,0 +1,107 @@
|
||||
import 'dart:convert';
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:crypto/crypto.dart';
|
||||
import 'package:dio/dio.dart';
|
||||
|
||||
/// Twitter OAuth 2.0 PKCE flow for mobile.
|
||||
class TwitterAuthService {
|
||||
static const _clientId = 'eWEzaDJ0al9lX1diOGY0ejRYeXM6MTpjaQ';
|
||||
// Must match the callback URL configured in Twitter Developer Portal
|
||||
static const _redirectUri = 'https://dev.re-quest.com/auth/callback/twitter';
|
||||
static const _scope = 'tweet.read users.read offline.access';
|
||||
|
||||
late final String _codeVerifier;
|
||||
late final String _codeChallenge;
|
||||
late final String _stateParam;
|
||||
|
||||
TwitterAuthService() {
|
||||
_codeVerifier = _generateCodeVerifier();
|
||||
_codeChallenge = _generateCodeChallenge(_codeVerifier);
|
||||
_stateParam = _generateRandomString(32);
|
||||
}
|
||||
|
||||
/// Build the Twitter authorization URL to open in a webview.
|
||||
String get authorizationUrl {
|
||||
final params = {
|
||||
'response_type': 'code',
|
||||
'client_id': _clientId,
|
||||
'redirect_uri': _redirectUri,
|
||||
'scope': _scope,
|
||||
'state': _stateParam,
|
||||
'code_challenge': _codeChallenge,
|
||||
'code_challenge_method': 'S256',
|
||||
};
|
||||
final query = params.entries
|
||||
.map((e) => '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
|
||||
.join('&');
|
||||
return 'https://twitter.com/i/oauth2/authorize?$query';
|
||||
}
|
||||
|
||||
/// Check if a URL is the redirect callback and extract the auth code.
|
||||
String? extractCodeFromUrl(String url) {
|
||||
if (!url.startsWith(_redirectUri)) return null;
|
||||
final uri = Uri.parse(url);
|
||||
final state = uri.queryParameters['state'];
|
||||
if (state != _stateParam) return null;
|
||||
return uri.queryParameters['code'];
|
||||
}
|
||||
|
||||
/// Exchange the auth code for tokens and fetch user info.
|
||||
Future<Map<String, dynamic>?> exchangeCodeForUser(String code) async {
|
||||
final dio = Dio();
|
||||
|
||||
// Exchange code for access token
|
||||
final tokenResponse = await dio.post(
|
||||
'https://api.twitter.com/2/oauth2/token',
|
||||
options: Options(
|
||||
contentType: 'application/x-www-form-urlencoded',
|
||||
headers: {
|
||||
'Authorization': 'Basic ${base64Encode(utf8.encode('$_clientId:'))}',
|
||||
},
|
||||
),
|
||||
data: {
|
||||
'code': code,
|
||||
'grant_type': 'authorization_code',
|
||||
'redirect_uri': _redirectUri,
|
||||
'code_verifier': _codeVerifier,
|
||||
},
|
||||
);
|
||||
|
||||
final accessToken = tokenResponse.data['access_token'] as String?;
|
||||
if (accessToken == null) return null;
|
||||
|
||||
// Fetch user info
|
||||
final userResponse = await dio.get(
|
||||
'https://api.twitter.com/2/users/me',
|
||||
queryParameters: {'user.fields': 'id,name,username,profile_image_url'},
|
||||
options: Options(
|
||||
headers: {'Authorization': 'Bearer $accessToken'},
|
||||
),
|
||||
);
|
||||
|
||||
final userData = userResponse.data['data'] as Map<String, dynamic>?;
|
||||
if (userData == null) return null;
|
||||
|
||||
return {
|
||||
'id': userData['id'],
|
||||
'name': userData['name'],
|
||||
'username': userData['username'],
|
||||
'avatar': userData['profile_image_url'],
|
||||
};
|
||||
}
|
||||
|
||||
String _generateRandomString(int length) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
|
||||
final random = Random.secure();
|
||||
return List.generate(length, (_) => chars[random.nextInt(chars.length)]).join();
|
||||
}
|
||||
|
||||
String _generateCodeVerifier() => _generateRandomString(64);
|
||||
|
||||
String _generateCodeChallenge(String verifier) {
|
||||
final bytes = utf8.encode(verifier);
|
||||
final digest = sha256.convert(bytes);
|
||||
return base64Url.encode(digest.bytes).replaceAll('=', '');
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@ import 'package:real_estate_mobile/features/auth/data/auth_repository.dart';
|
||||
import 'package:real_estate_mobile/features/auth/data/models/register_request.dart';
|
||||
import 'package:real_estate_mobile/features/auth/data/models/user_model.dart';
|
||||
import 'package:real_estate_mobile/features/messaging/data/socket_service.dart';
|
||||
import 'package:twitter_login/twitter_login.dart';
|
||||
|
||||
// Auth state
|
||||
enum AuthStatus { initial, loading, authenticated, error }
|
||||
@@ -291,7 +290,8 @@ class AuthNotifier extends StateNotifier<AuthState> {
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> signInWithTwitter() async {
|
||||
/// Complete Twitter/X login after webview returns user data.
|
||||
Future<void> completeTwitterLogin(Map<String, dynamic> twitterUser) async {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.loading,
|
||||
errorMessage: null,
|
||||
@@ -299,35 +299,12 @@ class AuthNotifier extends StateNotifier<AuthState> {
|
||||
);
|
||||
|
||||
try {
|
||||
final twitterLogin = TwitterLogin(
|
||||
apiKey: 'eWEzaDJ0al9lX1diOGY0ejRYeXM6MTpjaQ',
|
||||
apiSecretKey: 'HadGMSRKKswfXOajbmggrnmLAn9cxJsl8GtFxGHqjX-CJ0A2Tu',
|
||||
redirectURI: 'request://',
|
||||
);
|
||||
|
||||
final authResult = await twitterLogin.login();
|
||||
|
||||
if (authResult.status == TwitterLoginStatus.cancelledByUser) {
|
||||
state = state.copyWith(status: AuthStatus.initial);
|
||||
return;
|
||||
}
|
||||
|
||||
if (authResult.status != TwitterLoginStatus.loggedIn) {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.error,
|
||||
errorMessage: authResult.errorMessage ?? 'Twitter login failed',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
final twitterUser = authResult.user!;
|
||||
|
||||
final user = await _repository.socialAuth(
|
||||
provider: 'twitter',
|
||||
providerId: twitterUser.id.toString(),
|
||||
email: '${twitterUser.screenName}@twitter.placeholder',
|
||||
name: twitterUser.name,
|
||||
avatar: twitterUser.thumbnailImage,
|
||||
providerId: twitterUser['id'] as String,
|
||||
email: '${twitterUser['username']}@x.com',
|
||||
name: twitterUser['name'] as String?,
|
||||
avatar: twitterUser['avatar'] as String?,
|
||||
);
|
||||
|
||||
state = state.copyWith(
|
||||
@@ -345,7 +322,7 @@ class AuthNotifier extends StateNotifier<AuthState> {
|
||||
debugPrint('Twitter sign-in error: $e');
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.error,
|
||||
errorMessage: 'Twitter sign-in failed. Please try again.',
|
||||
errorMessage: 'X/Twitter sign-in failed. Please try again.',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
144
lib/features/auth/presentation/screens/twitter_login_screen.dart
Normal file
144
lib/features/auth/presentation/screens/twitter_login_screen.dart
Normal file
@@ -0,0 +1,144 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
import 'package:real_estate_mobile/core/services/twitter_auth_service.dart';
|
||||
import 'package:webview_flutter/webview_flutter.dart';
|
||||
|
||||
/// Opens a webview for Twitter OAuth 2.0 PKCE login.
|
||||
/// Returns the user data map on success, or null on cancel/failure.
|
||||
class TwitterLoginScreen extends StatefulWidget {
|
||||
const TwitterLoginScreen({super.key});
|
||||
|
||||
@override
|
||||
State<TwitterLoginScreen> createState() => _TwitterLoginScreenState();
|
||||
}
|
||||
|
||||
class _TwitterLoginScreenState extends State<TwitterLoginScreen> {
|
||||
late final TwitterAuthService _authService;
|
||||
late final WebViewController _webViewController;
|
||||
bool _isExchanging = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_authService = TwitterAuthService();
|
||||
_webViewController = WebViewController()
|
||||
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
||||
..setUserAgent(
|
||||
'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) '
|
||||
'AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 '
|
||||
'Mobile/15E148 Safari/604.1',
|
||||
)
|
||||
..setNavigationDelegate(NavigationDelegate(
|
||||
onPageStarted: (url) {
|
||||
final code = _authService.extractCodeFromUrl(url);
|
||||
if (code != null) {
|
||||
_handleCode(code);
|
||||
}
|
||||
},
|
||||
onNavigationRequest: (request) {
|
||||
final code = _authService.extractCodeFromUrl(request.url);
|
||||
if (code != null) {
|
||||
_handleCode(code);
|
||||
return NavigationDecision.prevent;
|
||||
}
|
||||
// User cancelled — Twitter redirects to main page or login
|
||||
final url = request.url;
|
||||
if (url == 'https://twitter.com/' ||
|
||||
url == 'https://x.com/' ||
|
||||
url.startsWith('https://twitter.com/home') ||
|
||||
url.startsWith('https://x.com/home') ||
|
||||
url.startsWith('https://twitter.com/i/flow/login') ||
|
||||
url.startsWith('https://x.com/i/flow/login')) {
|
||||
Navigator.pop(context, null);
|
||||
return NavigationDecision.prevent;
|
||||
}
|
||||
return NavigationDecision.navigate;
|
||||
},
|
||||
))
|
||||
..loadRequest(Uri.parse(_authService.authorizationUrl));
|
||||
}
|
||||
|
||||
Future<void> _handleCode(String code) async {
|
||||
if (_isExchanging) return;
|
||||
setState(() => _isExchanging = true);
|
||||
|
||||
try {
|
||||
final userData = await _authService.exchangeCodeForUser(code);
|
||||
if (mounted) Navigator.pop(context, userData);
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('X login failed. Please try again.')),
|
||||
);
|
||||
Navigator.pop(context, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Minimal top bar with back button
|
||||
SizedBox(
|
||||
height: 44,
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.arrow_back_ios_new_rounded,
|
||||
size: 18, color: AppColors.primaryDark),
|
||||
onPressed: () => Navigator.pop(context, null),
|
||||
),
|
||||
const Expanded(
|
||||
child: Text(
|
||||
'Sign in with X',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 48),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Webview
|
||||
Expanded(
|
||||
child: Stack(
|
||||
children: [
|
||||
WebViewWidget(controller: _webViewController),
|
||||
if (_isExchanging)
|
||||
Container(
|
||||
color: Colors.white.withValues(alpha: 0.8),
|
||||
child: const Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
CircularProgressIndicator(
|
||||
color: AppColors.accentOrange),
|
||||
SizedBox(height: 16),
|
||||
Text('Signing in...',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
color: AppColors.primaryDark,
|
||||
)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/screens/twitter_login_screen.dart';
|
||||
|
||||
class SocialLoginButtons extends ConsumerWidget {
|
||||
const SocialLoginButtons({super.key});
|
||||
@@ -17,6 +18,16 @@ class SocialLoginButtons extends ConsumerWidget {
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _handleTwitterLogin(BuildContext context, WidgetRef ref) async {
|
||||
final result = await Navigator.push<Map<String, dynamic>?>(
|
||||
context,
|
||||
MaterialPageRoute(builder: (_) => const TwitterLoginScreen()),
|
||||
);
|
||||
if (result != null) {
|
||||
ref.read(authProvider.notifier).completeTwitterLogin(result);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final authState = ref.watch(authProvider);
|
||||
@@ -51,7 +62,7 @@ class SocialLoginButtons extends ConsumerWidget {
|
||||
_SocialButton(
|
||||
onTap: isLoading
|
||||
? null
|
||||
: () => ref.read(authProvider.notifier).signInWithTwitter(),
|
||||
: () => _handleTwitterLogin(context, ref),
|
||||
child: SvgPicture.asset(
|
||||
'assets/icons/x.svg',
|
||||
width: 24,
|
||||
|
||||
@@ -17,7 +17,6 @@ import package_info_plus
|
||||
import path_provider_foundation
|
||||
import shared_preferences_foundation
|
||||
import sqflite_darwin
|
||||
import twitter_login
|
||||
import url_launcher_macos
|
||||
import webview_flutter_wkwebview
|
||||
|
||||
@@ -34,7 +33,6 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
|
||||
PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
|
||||
SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
|
||||
SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
|
||||
TwitterLoginPlugin.register(with: registry.registrar(forPlugin: "TwitterLoginPlugin"))
|
||||
UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
|
||||
WebViewFlutterPlugin.register(with: registry.registrar(forPlugin: "WebViewFlutterPlugin"))
|
||||
}
|
||||
|
||||
10
pubspec.lock
10
pubspec.lock
@@ -218,7 +218,7 @@ packages:
|
||||
source: hosted
|
||||
version: "0.3.5+2"
|
||||
crypto:
|
||||
dependency: transitive
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: crypto
|
||||
sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf
|
||||
@@ -1349,14 +1349,6 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.0.2"
|
||||
twitter_login:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: twitter_login
|
||||
sha256: "31ff9db2e37eda878b876a4ce6d1525f51d34b6cd9de9aa185b07027a23ab95b"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.4.2"
|
||||
typed_data:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
||||
@@ -48,7 +48,7 @@ dependencies:
|
||||
# Social Login
|
||||
google_sign_in: ^6.2.2
|
||||
flutter_facebook_auth: ^7.1.1
|
||||
twitter_login: ^4.4.2
|
||||
crypto: ^3.0.6
|
||||
|
||||
# Pin to avoid objective_c crash on iOS 26 simulator
|
||||
path_provider_foundation: 2.4.0
|
||||
|
||||
Reference in New Issue
Block a user