[Flutter Web] doesn't login facebook on [iOS 15.5 Browser Safari]

[iamar1k92]

What version are you using?

4.4.1

What OS and version are you using to local deploy your application?

macOS 12.5

What platforms are you seeing the problem on?

web

pubspec.yaml

name: cheemaenterprises
description: Cheema Enterprises for Car
publish_to: "none" 
version: 1.0.0+5

environment:
  sdk: ">=2.17.6 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.20.1
  cloud_firestore: ^3.4.4
  get:
  responsive_framework: ^0.2.0
  google_fonts: ^3.0.1
  cached_network_image: ^3.2.1
  intl: ^0.17.0
  url_launcher: ^6.1.5
  flutter_login_facebook: ^1.6.0
  extended_image: ^6.2.1
  firebase_auth: ^3.6.3
  flutter_spinkit: ^5.1.0
  just_audio: ^0.9.28
  get_storage: ^2.0.3
  image_picker: ^0.8.5+3
  firebase_storage: ^10.3.5
  flutter_animated_dialog: ^2.0.1
  maps_launcher: ^2.0.1
  photo_view: ^0.14.0
  transparent_image: ^2.0.0
  smooth_page_indicator: ^1.0.0+2
  image_network: ^2.5.1
  flutter_facebook_auth: ^4.4.1
  universal_html: ^2.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/images/icons/

Describe the Bug

i have deployed webapp on https://cheema-enterprises.web.app

Facebook login works perfectly on website (PC/Desktop) and also on android using the above website, but when i try to login from iOS device from same website, it doesn't work.

Expected Behavior

It should login from safari from iOS device on website https://cheema-enterprises.web.app, which works fine in android/Desktop.

To Reproduce

Try login from simulator or physical iOS device to login from facebook in the https://cheema-enterprises.web.app/#/ website

Relevant log output

No response

flutter doctor -v

sultan@Sultans-MacPro ~ % flutter doctor -v
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-arm, locale
    en-PK)
    • Flutter version 3.0.5 at /Users/sultan/Developments/softwares/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (6 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/sultan/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = /Users/sultan/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • SultanPro (mobile) • 80453EA4-960F-407D-BAC6-48A546744DC5 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
    • macOS (desktop)    • macos                                • darwin-arm64
      • macOS 12.5 21G72 darwin-arm
    • Chrome (web)       • chrome                               • web-javascript
      • Google Chrome 104.0.5112.101

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Info.plist (iOS)

No response

Podfile (iOS)

# Uncomment this line to define a global platform for your project
platform :ios, '11.0'

# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

project 'Runner', {
  'Debug' => :debug,
  'Profile' => :release,
  'Release' => :release,
}

def flutter_root
  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
  unless File.exist?(generated_xcode_build_settings_path)
    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
  end

  File.foreach(generated_xcode_build_settings_path) do |line|
    matches = line.match(/FLUTTER_ROOT\=(.*)/)
    return matches[1].strip if matches
  end
  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
end

require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)

flutter_ios_podfile_setup

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end

AndroidManifest.xml

No response

MainActivity.java

No response

MainActivity.kt

No response

index.html

No response

Info.plist (macOS)

No response

[iamar1k92]

AppDeletegate.swift

import UIKit import Flutter

@UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } }

[iamar1k92]

Again :

https://cheema-enterprises.web.app/#/

I want to make this website facebook login work in iOS device browser, either in safari or chrome.

It works fine in Android (https://cheema-enterprises.web.app) and desktop itself. Hope you'll get the problem. Let me know what more requirements for resolution

[iamar1k92]

Also tested on latest iOS devices, iPhone 13 Pro Max & Simulator (Latest)

[iamar1k92]

iOS 15.5 version

[darwin-morocho]

@iamar1k92 try this

[iamar1k92]

physical device?

[iamar1k92]

okay fixed, thank you!

[juanagu]

This issue shouldn't be closed, On production you will force to your users to disable the popup blocker on Safari. Is it possible to implement a better workaround here? @darwin-morocho

[darwin-morocho]

This issue shouldn't be closed, On production you will force to your users to disable the popup blocker on Safari. Is it possible to implement a better workaround here? @darwin-morocho

We cannot disable the popup blocker. You can do something like "Before call to login check if the user doesn't have the facebook app installed then show a popup with instructions that the login flow will be handled in safari and the user must disable the blocker before perform the login flow"