Unable to fetch result from OAuth login

[suyash515]

I am getting the following issue on my end and these are the steps to reproduce the error:

1. Create a Custom Auth (Login Provider: Custom)
2. JWT Verifier ID: Sub
3. Set up the JWK Endpoint
4. JWT Validation: iss field set up
5. Set up a Plug and Play Project and using EVM based chain
6. Using the following code for the integration:

const web3authCore = new Web3AuthCore({
			chainConfig: { // this is ethereum chain config, change if other chain(Solana, Polygon)
				chainNamespace: CHAIN_NAMESPACES.EIP155,
				chainId: "0x1",
				rpcTarget: "mainnet_infura_url",
				blockExplorer: "https://etherscan.io/",
				ticker: "ETH",
				tickerName: "Ethereum"
			},
		});
		const adapter = new OpenloginAdapter({ adapterSettings: {
			network: "testnet",
			clientId: "client_id_from_web3auth_from_plugnplay",
			uxMode: "popup", // other option: popup
			loginConfig: {
				jwt: {
					name: "any name",
					verifier: "test",
					typeOfLogin: "jwt",
					clientId: "client_id_from_our_custom_login_provider",
				},
			},
		}});
		web3authCore.configureAdapter(adapter);
		await web3authCore.init();

		// call below code when user clicks on login button
		// it will use custom login with openlogin's authentication
		await web3authCore.connectTo(adapter.name, { 
			loginProvider: "jwt",
			extraLoginOptions: {
				domain: "redirect_uri_to_custom_login_provider",
				verifierIdField: "sub", 
				response_type: "token",
				scope:"email", // e.g. email openid
			}
		});

Originally posted by @suyash515 in #446 (comment)

[rinzler99]

pls share console errors, if any

[suyash515]

@rinzler99 console errors.

[shahbaz17]

Hey @suyash515

Which login provider are you using? This looks like the authentication didn't happen.

If you're, you are using a custom authentication provider(that are not natively supported on the verifier dashboard) that returns idToken after successful authentication. Then, simply use the below code to log in with Web3Auth:

import { Web3AuthCore } from "@web3auth/core";
import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from "@web3auth/base";

const web3auth = new Web3AuthCore({
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155, // SOLANA, OTHER
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
    displayName: "Ethereum Mainnet",
    blockExplorer: "https://etherscan.io",
    ticker: "ETH",
    tickerName: "Ethereum",
  },
});

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId: "YOUR-WEB3AUTH-CLIENT-ID-FROM-PLUG-AND-PLAY",
    network: "testnet",
    uxMode: "redirect", // also support popup
    loginConfig: {
      jwt: {
        name: "Name of your choice",
        verifier: "YOUR-VERIFIER-NAME-ON-WEB3AUTH-DASHBOARD-FROM-CUSTOM-AUTH",
        typeOfLogin: "jwt",
        clientId: "YOUR-WEB3AUTH-CLIENT-ID-FROM-PLUG-AND-PLAY",
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);

await web3auth.init();

await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "jwt",
  extraLoginOptions: {
    id_token: idToken,
    verifierIdField: "sub", // same as your JWT Verifier ID
    domain: "https://YOUR-APPLICATION-DOMAIN" || "http://localhost:3000",
  },
});

Also, Please follow each step mentioned https://web3auth.io/docs/custom-authentication/byo-jwt-providers#set-up-custom-jwt-verifier for setting a Verifier.

[suyash515]

Hey @suyash515

Which login provider are you using? This looks like the authentication didn't happen.

If you're, you are using a custom authentication provider(that are not natively supported on the verifier dashboard) that returns idToken after successful authentication. Then, simply use the below code to log in with Web3Auth:

import { Web3AuthCore } from "@web3auth/core";
import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from "@web3auth/base";

const web3auth = new Web3AuthCore({
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155, // SOLANA, OTHER
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
    displayName: "Ethereum Mainnet",
    blockExplorer: "https://etherscan.io",
    ticker: "ETH",
    tickerName: "Ethereum",
  },
});

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId: "YOUR-WEB3AUTH-CLIENT-ID-FROM-PLUG-AND-PLAY",
    network: "testnet",
    uxMode: "redirect", // also support popup
    loginConfig: {
      jwt: {
        name: "Name of your choice",
        verifier: "YOUR-VERIFIER-NAME-ON-WEB3AUTH-DASHBOARD-FROM-CUSTOM-AUTH",
        typeOfLogin: "jwt",
        clientId: "YOUR-WEB3AUTH-CLIENT-ID-FROM-PLUG-AND-PLAY",
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);

await web3auth.init();

await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "jwt",
  extraLoginOptions: {
    id_token: idToken,
    verifierIdField: "sub", // same as your JWT Verifier ID
    domain: "https://YOUR-APPLICATION-DOMAIN" || "http://localhost:3000",
  },
});

Also, Please follow each step mentioned https://web3auth.io/docs/custom-authentication/byo-jwt-providers#set-up-custom-jwt-verifier for setting a Verifier.

@shahbaz17 Thanks so much for the reply.
So, if I understand well, the custom login provider should return an additional parameter called idToken, right? What should the parameter contain?

The reason is that we have control over the custom login provider and can have any required values returned based on your requirements.

[shahbaz17]

Yes, that's correct. That should return an idToken in JWT format.

• JWT token header must contain the kid field.
• JWT token payload data must contain iat field.
• JWT token payload data must contain iss field. The value of this field will be used in JWT Validation field of Custom Auth Verifier on Web3Auth Dashboard..
• JWT token payload data must contain aud field. The value of this field will be used in JWT Validation field of Custom Auth Verifier on Web3Auth Dashboard.
• JWKS used to sign the token, should be exposed to Web3Auth. This endpoint URL to be used in the JWKS Endpoint field of Custom Auth Verifier on Web3Auth Dashboard.

Check https://web3auth.io/docs/custom-authentication/byo-jwt-providers#using-jsonwebtoken for more details on how to generate an idToken.

Using jose, it would look something like this:

import * as jose from "jose";

import fs from "fs";
// openssl genrsa -out privateKey.pem 512
var privateKey = fs.readFileSync("privateKey.pem");
// openssl rsa -in privateKey.pem -pubout -out publicKey.pem
var publicKey = fs.readFileSync("publicKey.pem");
// https://my-authz-server/.well-known/jwks.json -> to be used in Custom Authentication as JWK Endpoint.

// Signing the JWT
const jwt = await new jose.SignJWT({ "urn:example:claim": true })
  .setProtectedHeader({ alg: "RS256", kid: "1bb9605c36e{your_kid}69386830202b2d" })
  .setIssuedAt()
  .setIssuer("https://my-authz-server")
  .setAudience("urn:my-resource-server")
  .setExpirationTime("2h")
  .sign(privateKey);

[suyash515]

@shahbaz17 Thank you. Let me try this and revert back.

[shahbaz17]

Hey @suyash515

Have you tried this?

[suyash515]

@shahbaz17 We are still working on this. I will have an update on this later today.

[suyash515]

@shahbaz17 we have tried the above solution but getting the following error:

This is the code that I am using:

        `payload = {
            sub: "access_token_that_we_generated"
        }

        const [key] = keyStore.all({
            use: "sig"
        });

        const opt = {
            compact: true,
            jwk: key,
            fields: {
                typ: "jwt",
                iss: "https://lootverse.com/",
                kid: keyStore.toJSON().keys[0].kid,
                aud: "versa",
                algorithm: "RS256"
            }
        };

        token = await jose.JWS.createSign(opt, key).update(JSON.stringify(payload)).final();`

Basically, we are redirecting back to https://beta.openlogin.com/auth?idToken=token

[shahbaz17]

Please read https://web3auth.io/docs/guides/cognito#additional-reading-setup-custom-authentication-using-aws-cognito-authorization-code-flow or https://web3auth.io/docs/guides/auth0#additional-reading-setup-custom-authentication-using-auth0-rwa to understand how and why we need this way.

[shahbaz17]

This is what we want to achieve here. Since you already have a way to generate idToken, you're passing that token to web3auth to help you with the private-public key pair.

[suyash515]

@shahbaz17 we changed our implementation and we went one step further in the process but now encountering the one of the following errors:

1. unable to detect login share from the Auth Network. This may be due to slow internet connection...
2. there seems to be some bug in the code. Please contact support to fix this. You system time is incorrect. Please correct your system time and login again.

However, in our dashboard in Web3Auth, we can see that we have 2 connected users.

[suyash515]

@shahbaz17 Hey there.

Do you have any idea what the above error could be related to? Thank you.

[shahbaz17]

Hey @suyash515

Is there a way to see your code?

Meanwhile, can you schedule a call with our team, and we can go together to debug your code?

Add this discussion link while scheduling the call.

[ChaviJ28]

Hi @shahbaz17
The following code is being used to login :

    const web3authCore = new Web3AuthCore({
      chainConfig: { // this is ethereum chain config, change if other chain(Solana, Polygon)
        chainNamespace: CHAIN_NAMESPACES.EIP155,
        chainId: "0x1",
        rpcTarget: "https://mainnet.infura.io/v3/776218ac4734478c90191dde8cae483c",
        blockExplorer: "https://etherscan.io/",
        ticker: "ETH",
        tickerName: "Ethereum"
      },
    });

    const adapter = new OpenloginAdapter({
      adapterSettings: {
        network: "testnet",
        clientId: CLIENT_ID_WEB3AUTH,
        uxMode: "popup", // other option: popup, redirect
        loginConfig: {
          jwt: {
            name: "any name",
            verifier: "codevigor-lootverse-testnet",
            typeOfLogin: "jwt",
            clientId: LOOTVERSE_CLIENT_ID,
          },
        },
      }
    });
    web3authCore.configureAdapter(adapter);
    await web3authCore.init();

    // call below code when user clicks on login button
    // it will use custom login with openlogin's authentication
    await web3authCore.connectTo(adapter.name, {
      loginProvider: "jwt",
      extraLoginOptions: {
        domain: "https://public-api-staging.lootnft.io/",
        id_token: idToken,
        verifierIdField: "sub",
      }
    });

idToken is in JWT format containing the following data:

{
  "sub": LOOTVERSE_ACCESS_TOKEN,
  "iat": 1663593984,
  "exp": 1663680384,
  "iss": "beta.lootverse.com",
  "aud": "versa"
}

[suyash515]

@shahbaz17 thanks for your reply. Please see above the code that we are using. I also booked a call with the team tomorrow. Thank you for your help.

[shahbaz17]

This is resolved now.

[himanshuchawla009]

is your issue resolved, If not , Can you also attach console logs along with the screenshots that you posted above. Also can you check if your third party cookies are blocked while using solana wallet.