Configuring Multi-tenant Domain resolver for Vue JS app #9954

3 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  To properly configure multi-tenant domain resolution for your Vue.js app using the ABP microservice backend, you should leverage ABP's wildcard domain support for OpenIddict, as described in the official documentation. This approach is independent of the frontend framework (Vue, Angular, etc.) and is handled entirely on the backend (AuthServer).

  Here’s how to set it up so you do not need to manually update the OpenIddictApplications table after each reseed:

  1. In your AuthServer module's PreConfigureServices, enable wildcard domain support and add your domain formats:

  PreConfigure<AbpOpenIddictWildcardDomainOptions>(options =>
     {
         options.EnableWildcardDomainSupport = true;
         options.WildcardDomainsFormat.Add("https://{0}.mydomain.dev");
         // Add other formats as needed, e.g.:
         // options.WildcardDomainsFormat.Add("https://{0}.mydomain.dev/signin-oidc");
         // options.WildcardDomainsFormat.Add("https://{0}.mydomain.dev/auth/silent-refresh");
         // etc.
     });
  

  2. In your AuthServer's appsettings.json, add the wildcard domain formats:

  "WildCardDomains": {
       "VueApp": "https://{0}.mydomain.dev"
     }
  

  Then, in PreConfigureServices, load these from configuration:

  var configuration = context.Services.GetConfiguration();
     PreConfigure<AbpOpenIddictWildcardDomainOptions>(options =>
     {
         options.EnableWildcardDomainSupport = true;
         options.WildcardDomainsFormat.Add(configuration["WildCardDomains:VueApp"]);
     });
  

  3. Do NOT manually edit the OpenIddictApplications table to add wildcards. Instead, ensure your OpenIddict client seeding (usually in your data seeder or migration) does NOT hardcode tenant-specific redirect URIs. The wildcard support will allow any subdomain matching the pattern to be accepted for redirect and post-logout URIs.

  4. When seeding clients, use a base URL (e.g., "https://{0}.mydomain.dev") in your configuration, and let the wildcard domain support handle the rest. You do not need to list every possible tenant domain.

  5. This approach works regardless of your frontend technology (Vue, Angular, React, etc.), as the redirect URI validation is handled by the backend.

  6. If you are using multiple environments (dev, prod), add the appropriate domain patterns for each.

  By following these steps, you will not need to manually update the OpenIddictApplications table after each reseed, and your multi-tenant Vue.js app will work seamlessly with ABP's domain-based tenant resolution.

  Sources:

  • Multi-tenant Domain Resolving in Microservice Solution (ABP Docs)

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  rogercprops created 18 hours ago

  We've already done the above. We added "https://{0}.mydomain.dev/" to the appsettings in the Identity service and it threw an error that it's a malformed url in the CreateOrUpdateApplicationAsync of OpenIddictDataSeeder.cs.

  Save Cancel
• 

  0

  maliming created 10 hours ago

  Support Team Fullstack Developer

  hi

  What error/exception did you get now?

  Thanks.

  Save Cancel