Problem in google login in canva through webview in flutter - flutter

Question

I wanted to upload pics through canva from my flutter app that is why I am using the flutter-webview-plugin for the first time and therefore I am not able to solve this issue.
Code for the same is:-
import 'package:flutter/material.dart';
import 'package:kf_drawer/kf_drawer.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
class SettingsPage extends KFDrawerContent {
#override
_SettingsPageState createState() => _SettingsPageState();
}
class _SettingsPageState extends State<SettingsPage> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Center(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
....
],
),
Expanded(
child: Container(
height: 500,
child: WebView(
initialUrl: "https://shree-hari.github.io/laxmi_canva/index.html",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController){
_controller.complete(webViewController);
},
),
),
)
],
),
),
);
}
}
Please Help me to address this issue 🙄.

Answer 1

Google not allow native Flutter Web-Views to initiate OAuth.
For more info read Google Blog
In your case, I can suggest 3 Possible Solutions.
Try to Sign in with Email/Password instead of Google Sign In.
Use url_launcher to redirect the user to the browser.
If you don't want the user to leave your app
then you can use flutter_custom_tabs
this plugin use Chrome Custom Tabs to create a native experience inside the Flutter App.

Answer 2

You can add this userAgent :
WebView(
initialUrl: url,
userAgent: Platform.isIOS ? 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_2 like Mac OS X) AppleWebKit/605.1.15' +
' (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1' :
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) ' +
'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36',
...

Answer 3

Use this package, it works like a charm
https://github.com/LinusU/flutter_web_auth
In the background, this plugin uses ASWebAuthenticationSession on iOS 12+ and macOS 10.15+, SFAuthenticationSession on iOS 11, Chrome Custom Tabs on Android and opens a new window on Web.
Your auth flow must land in the scheme you provide in callbackUrlScheme property. Then just parse the callback url and implement you own business logic around signin/signup
import 'package:flutter_web_auth/flutter_web_auth.dart';
// Present the dialog to the user
final result = await FlutterWebAuth.authenticate(url: "https://my-custom-app.com/connect", callbackUrlScheme: "my-custom-app");
// Extract token from resulting url
final token = Uri.parse(result).queryParameters['token']

Answer 4

https://stackoverflow.com/a/71297966/18723243
Using webview_flutter package you can fix the problem by adding userAgent: 'random', in the web view constructor. So, it will look like this:
WebView(
userAgent: 'random',
)