Calling googleapis_auth flow from AngularDart component

Question

I'm trying to trigger OAuth flow using the googleapis_auth package from an AngularDart component (MaterialButtonComponent).

The examples from googleapis_examples (here) show how to do this with a raw ButtonElement to avoid the pop-up being blocked by the browser. However, when I follow the same pattern using the AngularDart style using (trigger)="method()" or (click)="method()"syntax my pop-up gets blocked.

Current code:

drive_component.html:

<material-button icon (trigger)="save()"
             class="icon-button">
<material-icon icon="archive"></material-icon>

drive_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:blue_rose_character_creator/src/character/character.dart';
import 'package:googleapis_auth/auth_browser.dart';
import 'package:googleapis/drive/v3.dart';

final identifier = new ClientId(
    "<my-client>.apps.googleusercontent.com",
    null);
const scopes = const [DriveApi.DriveScope];

@Component(
  selector: 'drive',
  templateUrl: 'drive_component.html',
  styleUrls: const ['drive_component.css'],
  directives: const [CORE_DIRECTIVES, materialDirectives],
  providers: const [materialProviders],
)
class DriveComponent {
  @Input() Character character;

  void save() {
    createImplicitBrowserFlow(identifier, scopes)
        .then((BrowserOAuth2Flow flow) {
      // Try getting credentials without user consent.
      // This will succeed if the user already gave consent for this application.
      return flow.clientViaUserConsent(immediate: true).catchError((_) {

        //I've removed the loginButton from the flow, since AngularDart
        //doesn't pass this around.
        //loginButton.text = 'Authorize';
        //return loginButton.onClick.first.then((_) {
        return flow.clientViaUserConsent(immediate: false);
      }, test: (error) => error is UserConsentException);
    });
  }

What would be the correct AngularDart style to get the pop-up unblocked? Is there one?

Answer 1

I think the issue is you have an async operation between the save call an the clientViaUserConsent call.

I'd try calling createImplicitBrowserFlow when the component loads – and don't enable save until you have a flow object stored.

Make sense?