[Archive] Cannot login with custom jwt

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by denisa.halmaghi on 4/10/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

Hello! I’m having trouble with the custom JWT authentication. I’m currently trying to integrate web3auth with keycloak. I followed the points in the documentation but it does not seem to work.

It appears that when it tries to get the jwt verifier from loginConfig it does not find anything and I think this might be because loginConfig is not present in the request, but I don’t know why and am currently stuck here.

In case it helps, this is the request object:

 const r = req as ValidatedJRPCRequest<Record<string, unknown>[]>;

    

  1. clientId: “XXXXX”
    2. 

  2. loginConfig: {}
    3. 

  3. method: “openlogin_login”
    4. 

  4. origin: “http://localhost:5173”
    5. 

  5. params: [{…}]
    6. 

  6. pid: “XXXXX”
    7. 

  7. popupWindow: false
    8. 

  8. redirect: true
    9. 

  9. sessionId: “XXXXX”
    10. 

  10. user: “”
    11. 

  11. _sessionNamespace: undefined

Additionally, Typescript is yelling at me and telling me that loginConfig is not present in OpenloginAdapterOptions (maybe this helps somehow).

  • Related to Custom Authentication? Please provide the following info too: (Optional)
    • Verifier Name: web3-auth-verifier-test
    • JWKS Endpoint: “https://lemur-4.cloud-iam.com/auth/realms/web3auth-keycloak-test-deployment/protocol/openid-connect/certs”
    • Sample idToken(JWT) : eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJJSE9oaXlFdnlVa1RKeGJ1ZzRReGFYLUltblhDd044Mnk1cUxtalRELURjIn0.eyJleHAiOjE2ODExMjA1NTIsImlhdCI6MTY4MTEyMDI1MiwiYXV0aF90aW1lIjoxNjgxMTIwMjUxLCJqdGkiOiJiYzY0NDY2ZC02NGVmLTQyM2MtYTY2Yi1kMGRmNTQ2NTgwMzAiLCJpc3MiOiJodHRwczovL2xlbXVyLTQuY2xvdWQtaWFtLmNvbS9hdXRoL3JlYWxtcy93ZWIzYXV0aC1rZXljbG9hay10ZXN0LWRlcGxveW1lbnQiLCJhdWQiOiJjbGllbnQxIiwic3ViIjoiMjQ4NGQzZGEtMjBhYS00NmE1LWE5NDctMjdiMDE5NGYyMzZlIiwidHlwIjoiSUQiLCJhenAiOiJjbGllbnQxIiwibm9uY2UiOiJkOWMzYmFmZS0wNTc3LTRlMWQtODAyYS1lNjQ3OGEzMzU2ZDgiLCJzZXNzaW9uX3N0YXRlIjoiMmI2YTUwNTItZjA5Yi00ZjQ0LTkwNTAtM2NiNWI5ODQxNWUyIiwiYXRfaGFzaCI6ImFycm9QbVJOSXZ4T0VPTllJVWU1bnciLCJhY3IiOiIxIiwic2lkIjoiMmI2YTUwNTItZjA5Yi00ZjQ0LTkwNTAtM2NiNWI5ODQxNWUyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsIm5hbWUiOiJ3ZWIzYXV0aC1rZXljbG9hay10ZXN0LWRlcGxveW1lbnQgQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IndlYjNhdXRoLWtleWNsb2FrLXRlc3QtZGVwbG95bWVudCIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AZW1haWwuY29tIn0.D5kwg7WoVp2eJGTsV2C-FZrTMlfYLuEzYVVN-DO9YEdhVuJGclpysxENNsF2xnnktAev1dOtYIuyeKR9eccE1YI9D5uAFzZFCxjcmEhFb7nFjfGTJi-5Y1N4_yFVL4BJVhmy1J5AHqZT-BKn2AGtVGM75gm4Z9NKbENMl4xkVlzF6GTtNY3YykQE9wMA8d7AYZlBW0aVGTAK5NllEXJlctNNmyg02R_rjqBPQ0roNmVklOt5gptpkowYOHE-wm_JshCT231gmB7iEBXqKqKilzoAtOKuHbouRdXOA7glYYJhs3InGeghiOaosl-8yF-9F1GIzsv_3n4m9h4_htOhEA

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

  async function init() {
    const auth = new Web3AuthNoModal(web3AuthConfig);

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    uxMode: 'redirect',
  },
  loginSettings: {
    mfaLevel: 'none',
    redirectUrl: 'http://localhost:5173/auth/login',
  },

  loginConfig: {
    jwt: {
      verifier: 'web3-auth-verifier-test',
      typeOfLogin: 'jwt',
      clientId: 'client1',
      domain:
        'https://lemur-4.cloud-iam.com/auth/realms/web3auth-keycloak-test-deployment/protocol/openid-connect/auth',
    },
  },
});

const metamaskAdapter = new MetamaskAdapter({});

auth.configureAdapter(metamaskAdapter);
auth.configureAdapter(openloginAdapter);

StaticWrapper.web3Auth = auth;

await auth.init();

if (auth.provider) {
  provider.value = auth.provider;
}



}

login:

    provider.value = await StaticWrapper.web3Auth.connectTo(
      WALLET_ADAPTERS.OPENLOGIN,
      {
        loginProvider: 'jwt',
        extraLoginOptions: {
          id_token: 'idToken', // in JWT Format
          verifierIdField: 'sub', // same as your JWT Verifier ID
          response_type: 'token', //! check if correct
          redirectUrl: 'http://localhost:5173/auth/login',
        },
      }
    );
2

Hey @denisa.halmaghi

Please remove the clientId and domain from here.

And remove response_type and redirectUrl from here. Also, I assume the idToken passed here is the unused recently generated one.

Please try again after changing the suggested edits.

3

I made the changes, I get the same error:

loglevelSentry.esm.js:56 Error: unknown
    at s.translateError (loglevelSentry.esm.js:16:59)
    at l.error (loglevelSentry.esm.js:54:53)
    at openloginJrpc.esm.js:237:13
    at openloginJrpc.esm.js:463:9
    at new Promise (<anonymous>)
    at T._runReturnHandlers (openloginJrpc.esm.js:462:13)
    at async T._processRequest (openloginJrpc.esm.js:627:46)
    at async T._handle (openloginJrpc.esm.js:602:5) 'OpenLogin - RPC Error: Invalid loginProvider or custom loginProvider data not available' {code: -32602, message: 'Invalid loginProvider or custom loginProvider data not available', data: undefined}
4

Also, I thought it should also work if i do not provide the token? I was expecting the openlogin window to redirect me to the specified domain (like it happens with google, facebook etc.) and that the login flow should proceed from there

5

Hey @denisa.halmaghi

Did you create this verifier? On which web3auth network?

Also, please refer to this code while initializing for a custom login provider.

For custom login providers, id_token is needed. For other login providers like google, facebook, twitch, discord and auth0 you don’t need to, but in that case, one has to provide clientId and domains, respectively.

6

Yes, i created the verifier and it is also active:

Screenshot 2023-04-10 at 15.26.08
Screenshot 2023-04-10 at 15.26.08720Ă—406 22.5 KB

7

I adapted the code according to the github example you provided and it worked. Thank you!