Blockstack new auth signin not working(Angular)

Hello,
I have been trying to get blockstack connect (new auth) works with Angular. I ran into the following error.
My package.json

@blockstack/connect”: “^1.0.10”,

app.component.ts

import { showBlockstackConnect } from ‘@blockstack/connect’;
import { authenticate } from ‘@blockstack/connect’;
import { UserSession, AppConfig } from ‘blockstack’;

const icon = static/cat.png;

const authOptions = {
redirectTo: ‘/’,
manifestPath: ‘/manifest.json’,
authOrigin: “http://localhost:4200/”,
sendToSignIn: true,
//userSession: this.userSession,
appDetails: {
name: ‘BlockSample’,
icon,
}
};

showBlockstackConnect(authOptions);
//authenticate(authOptions)

It shows the new auth login screen. But upon clicking get started, it’s throwing the following error

ERROR core.js:12301 ERROR Error: Uncaught (in promise): TypeError: blockstack.AppConfig is not a constructor
TypeError: blockstack.AppConfig is not a constructor
at authenticate (connect.cjs.development.js:83)
at doAuth (connect.cjs.development.js:626)
at onClick (connect.cjs.development.js:993)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:13842)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at ZoneTask.push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
at invokeTask (zone.js:1540)
at resolvePromise (zone.js:814)
at Function.ZoneAwarePromise.reject (zone.js:904)
at authenticate (connect.cjs.development.js:125)
at doAuth (connect.cjs.development.js:626)
at onClick (connect.cjs.development.js:993)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:13842)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

@markmhendrickson , could you please help us on this ?

Regards,
Devi

Thanks for the post, @dpriya90.id.blocksta.

@hank @aulneau.id @kyranjamie any guidance here?

Hi @dpriya90.id.blocksta

Thanks for checking out the new authenticator. We’ve built the current release with React, and have found a couple of issues implementing it with other frameworks.

In the meantime:

  • Can you try executing the showBlockstackConnect() call outside of Angular using NgZone?
  constructor(public zone: NgZone) {}

  ngOnInit() {
    this.buttonClick$.subscribe(() => {
      this.zone.runOutsideAngular(() => showBlockstackConnect(authOptions));
    });
  }
  • Try the latest version of Blockstack.js [email protected]. We’ll be releasing this to the stable branch this week

This issue, in the blockstack.js repo, might be of interest

1 Like

Thanks, @kyranjamie, and @markmhendrickson for your help. It seems the beta version is throwing different errors on our codebase.

But we are able to integrate it with the mentioned version below along with the following code.

package.json

“blockstack”: “19.2.1”,
@blockstack/connect”: “^2.3.1”,

Our login module function

login() {
const authOptions = {
redirectTo: ‘/’,
manifestPath: ‘/manifest.json’,
sendToSignIn: false,
userSession: this.userSession,
appDetails: {
name: ‘AppName’,
icon: ‘/favicon.ico’
}
};
showBlockstackConnect(authOptions);
// comment out existing line…
// this.userSession.redirectToSignIn();
}

Thanks again.
~Devi

2 Likes