Error on Login with Provider

Help - Plug n Play PnP Web SDKs
1

Please provide the following details too when asking for help in this category:

Please provide the Web3Auth initialization and login code snippet below:
HTML

<template>
  <div>
    <h1>Web3Auth Basic Authentication</h1>
    <div class="user">
      <button class="user__btn" @click="loginWithProvider('twitter')">
        Twitter Login
      </button>
      <button class="user__btn" @click="loginWithProvider('apple')">
        Apple Login
      </button>
      <button class="user__btn" @click="loginWithProvider('google')">
        Google Login
      </button>
      <button class="user__btn" @click="logout">
        Logout
      </button>
    </div>
    <div v-if="error" class="error">
      {{ error }}
    </div>
  </div>
</template>

JS Code

async loginWithProvider(provider) {
      try {
        await this.$store.dispatch("web3Auth/loginWithProvider", provider);
        this.error = null; // Reset any previous errors
      } catch (error) {
        this.error = "Authentication failed. Please try again.";
        console.error("Authentication error:", error);
      }
    },

Additional Info
We set a different value for the VUE_APP_URL and VUE_APP_PORT environment settings because we don’t want to use the localhost as our local development URL

2

@neil.delarosa Thanks for reaching out.

Your issue is under review and we will get back with further updates.

1 Like
3

I just figure out the solution. It is important to include the localhost string in your local development and add your local development URL to the whitelists on your Web3Auth Dashboard.

4