Problem in google login in canva through webview in flutter

Question

GIF

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 🙄.

Aditya Birangal · Accepted Answer · 2020-10-19 08:14:26Z

8

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.

edited Oct 19, 2020 at 8:14

answered Jul 6, 2020 at 14:54

Aditya Birangal

1227 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AnV Over a year ago

If I use url_launcher, how will the flutter app know whether sign is successful or not? Because, sign in is happening in browser. Is there a callback?

Osama Ali · Accepted Answer · 2021-02-01 23:13:26Z

8

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',
    ...

answered Feb 1, 2021 at 23:13

Osama Ali

1311 silver badge2 bronze badges

Comments

Sana Begum · Accepted Answer · 2022-04-06 09:26:01Z

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',
)

answered Apr 6, 2022 at 9:26

Sana Begum

412 bronze badges

1 Comment

Alessio Di Salvo Over a year ago

In newer versions you should add ..setUserAgent("random") in the WebViewController(). _controller = WebViewController() ..setUserAgent("random")

George Papadakis · Accepted Answer · 2021-12-17 11:10:59Z

2

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']

edited Dec 17, 2021 at 11:10

answered Dec 16, 2021 at 16:10

George Papadakis

1,38814 silver badges26 bronze badges

Collectives™ on Stack Overflow

Problem in google login in canva through webview in flutter

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related