[SOLVED] Web3auth & Mobile Browser & Metamask & Angular 9

devf29 · October 4, 2022, 7:57pm

In the desktop browser there is no problem, but in mobile browsers, when I login using web3auth, when I select metamask, I connect the account, and it automatically returns to my webapp, but the login process is not finished yet. I have to go back to the metamask app, click Sign, and then I can get into the webapp.

Is there any way to prevent my webapp from calling back after hitting connect, and before signing?

Thanks

alex · September 13, 2022, 7:40pm

when I login using web3auth, when I select metamask

Do you mean when connecting MetaMask via the external wallet option? Are you using moralis-v1? If so you could try using a combination of enableWeb3 and authenticate() to first get the connection working with MetaMask (site connection request) and then redirect back to it from your app to do the signature request.

devf29 · September 14, 2022, 10:52am

Thanks for your answer Glad.
Yes, im using [email protected]
The code is here, but I’ll paste a snippet for you.

github.com

foundation29org/Raito_pilot_client/blob/develop/src/app/shared/auth/moralis.service.ts

import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
import { TranslateService } from '@ngx-translate/core';
declare let Moralis: any;
@Injectable()
export class MoralisService {

  constructor(public translate: TranslateService) { }

  currentUser: any = null;
  moralisInstance: any = null;
  async initServer(): Promise<void> {
    await Moralis.start({
      appId: environment.moralisAppId,
      serverUrl: environment.moralisServerUrl
    })
    Moralis.enableEncryptedUser();
    Moralis.secret = environment.moralisSecret;
  }

This file has been truncated. show original

authenticate(){

    return Moralis.authenticate({ provider: 'web3Auth', clientId: environment.moralisClientId, appLogo: 'https://raito.care/assets/img/logo-raito.png', theme: 'light' })

      .then( (user : any) => {

        Moralis.enableWeb3({ provider: "web3Auth", clientId: environment.moralisClientId })

        this.setCurrentUser(Moralis.User.current());

        this.currentUser = this.getCurrentUser();

        var openlogin_store = JSON.parse(localStorage.getItem('openlogin_store'));

        var email = openlogin_store.email;

        var data = { moralisId: this.currentUser.id, ethAddress: user.get("ethAddress"), password: user.get("username"), lang: this.translate.store.currentLang, email: email };

        return data;

       }, (err) => {

         console.log(err);

         this.logout();

       })

  }

But even if I put enableWeb3 after the authenticate() method, the same thing happens

github.com

foundation29org/Raito_pilot_client/blob/develop/src/app/pages/land/land/land-page.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { environment } from 'environments/environment';
import { Router } from "@angular/router";
import { EventsService } from 'app/shared/services/events.service';
import { PatientService } from 'app/shared/services/patient.service';
import { AuthService } from '../../../../app/shared/auth/auth.service';
import { MoralisService } from '../../../../app/shared/auth/moralis.service';
import { TranslateService } from '@ngx-translate/core';
import { sha512 } from "js-sha512";
import Swal from 'sweetalert2';
import { ToastrService } from 'ngx-toastr';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Subscription } from 'rxjs/Subscription';
declare let Moralis: any;

@Component({
    selector: 'app-land-page',
    templateUrl: './land-page.component.html',
    styleUrls: ['./land-page.component.scss'],

This file has been truncated. show original

alex · September 14, 2022, 8:41pm

enableWeb3 would need to be used before authenticate.

enableWeb3() - site connection request

authenticate() - site connection request and signature request

So the idea is to try change the flow - enableWeb3() > connect account in wallet > return to web app > authenticate() > go back to wallet to sign - this is how it can be done with WalletConnect on mobile browsers/wallets.

This WalletConnect demo demonstrates it (you can check page source) but it may not work the same way with Web3Auth.

devf29 · September 15, 2022, 2:53pm

Ok @alex, thank you very much for your help!

It hasn’t worked for me with Web3Auth. Anyway, the flow is the one I mentioned at the beginning, but the second time it doesn’t do it automatically.

Enjoy your day!

alex · September 15, 2022, 10:58pm

Anyway, the flow is the one I mentioned at the beginning, but the second time it doesn’t do it automatically.

Can you explain this more, I’m not sure what you mean.

Yes it looks like it doesn’t work, if you run enableWeb3(), you can get the prompt through to Web3Auth > MetaMask to connect the site but then Web3Auth no longer shows the modal again after that with another enableWeb3() or authenticate() (which kind of makes sense, the connection succeeded).

I’m not sure there is a workaround there. You could add a message maybe saying to return to the mobile app.

devf29 · October 4, 2022, 5:01pm

Yes, I did, but it shows a message in the application, saying that it has pending things, either to connect, or to sign.

Thanks for your time! good day! <3