IDP Kit Login with SSI | Next.js

[mwaheed-dev]

Hi All,
I am trying to run IDP Kit Login with SSI | Next.js setup on my local machine, IDP kit and front end is working, but I am not able to login as getting 403 error,
http://localhost:5000/api/oidc/authorize?client_id=QpLhgHdsurF_-lx79H8Fka2QZgrUGawyJ2T_ms05xhc&scope=openid%20profile&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fwalt-id-ssi&state=E3PptjV73PGFKdvKbaTqn9gm9NFT5wpGcXisO9rR104

Note: I am not using keyClock, do I need to setup and configure Keycloak for Login with SSI | Next.js as in documents only mentioned for NFT with Keycloak ?

Client Id

[main] INFO id.walt.idp.oidc.OIDCClientRegistry - Parsing OIDC client info
* QpLhgHdsurF_-lx79H8Fka2QZgrUGawyJ2T_ms05xhc:
{
    "client_secret_expires_at":0,
    "all_redirect_uris":true,
    "registration_client_uri":"http:\/\/localhost:5000\/api\/oidc\/clients\/QpLhgHdsurF_-lx79H8Fka2QZgrUGawyJ2T_ms05xhc",
    "client_id_issued_at":1692199086,
    "client_secret":"zY1XbO7RmDYxrtEPOUGnkWbf-GefwOcM7lQHgTvcUx8",
    "redirect_uris":[
        
    ],
    "registration_access_token":"eyJraWQiOiJmMGYxZGE5NGEzYmY0ZmQwOWRhNmQyMTk0MzRiOGJmMCIsInR5cCI6IkpXVCIsImFsZyI6IlJTMjU2In0.eyJzdWIiOiJRcExoZ0hkc3VyRl8tbHg3OUg4RmthMlFaZ3JVR2F3eUoyVF9tczA1eGhjIn0.VxA1TkXOBwyC7DIjudRcVpD9PKzYSXQQ5ScSZ3WFnWGbLBMBSBpvEmpKdO-coyeSQ76YdSj-t5ZylJlyJ3E-zS6DgDDRGugidwmVrSQWwGLhiAA0wEkFS0PQhB65tf9lBSMun4wtV3JEDvF3QbY-N9ymlpSvv3f5ID7_IyJb7zgQ7LIlcCPc2zVArkrFe5wzsRwpL2gR7vcaUXgbrjlLMuihD3L7CHwpcjg1UYsVIjaG_ply_8zpg1kMXvqVCzX",
    "client_name":"myFrontend",
    "client_id":"QpLhgHdsurF_-lx79H8Fka2QZgrUGawyJ2T_ms05xhc"
}

Here is my config files

idp-config.json:

{
  "externalUrl": "http://localhost:5000",
  "jsProjectExternalUrl": "http://localhost:5000",
  "keyId": "f0f1da94a3bf4fd09da6d219434b8bf0",
  "openClientRegistration": false,
  "fallbackAuthorizationMode": "SIOP",
  "claimConfig": {
    "vc_mappings": [
      {
        "scope": ["gaiax"],
        "claim": "name",
        "credentialType": "ParticipantCredential",
        "valuePath": "$.credentialSubject.hasLegallyBindingName"
      },
      {
        "scope": ["gaiax"],
        "claim": "country",
        "credentialType": "LegalPerson",
        "valuePath": "$.credentialSubject.gx-participant:legalAddress.gx-participant:addressCountryCode"
      },
      {
        "scope": ["profile"],
        "claim": "name",
        "credentialType": "VerifiableId",
        "valuePath": "$.credentialSubject.firstName $.credentialSubject.familyName"
      },
      {
        "scope": ["profile"],
        "claim": "family_name",
        "credentialType": "VerifiableId",
        "valuePath": "$.credentialSubject.familyName"
      },

verifier-config.json

{
  "verifierUiUrl": "http://localhost:5000/sharecredential?state=",
  "verifierApiUrl": "http://localhost:5000/api/siop/default",

  "wallets": {
    "walt.id": {
      "id": "waltid",
      "url": "https://wallet.walt-test.cloud",
      "presentPath": "api/siop/initiatePresentation/",
      "receivePath": "api/siop/initiateIssuance/",
      "description": "walt.id web wallet"
    },
    "local": {
      "id": "local",
      "url": "https://wallet.walt-test.cloud",
      "presentPath": "api/siop/initiatePresentation/",
      "receivePath": "api/siop/initiateIssuance/",
      "description": "local wallet"
    }
  }
}

[taminobaumann]

Hey @mwaheed-dev,

thanks for reaching out. On which machine are you developing?

If it's mac the issue could be caused by macs system settings which block ports 5000 and 7000 by default.

Therefore you have two options:

1. Disabled in the system settings AirPlay Receiver, which can be found under AirDrop & Handoff. After that you should be able to access it.
2. Chang the port in the nuxt.config.js (IDP-Kit UI project) to none of the above. Please note, you also then have to update the verifierUiUrl and verifierApiUrl in the verifier.config.js in the IDP-Kit.

Hope it helps!!

Best,
Tamino

[mwaheed-dev]

Thank you for your response. Yes, it was a macOS issue, and I discovered it during the debugging of the backend services when the call wasn't reaching the backend. Could you please update this information in the deployment guide documents? I struggled with this issue for almost a week.