Multi-tenant (white-label app) design with subdomains
Hi, my nextjs app allows users to create their own apps to service their users, accessed by a subdomain (aka white labelling). I’m developing on localhost and getting state errors in the auth routing.
ITEM 1:
Main app is working fine using a custom login page with http://localhost:3000 but I get state error (different id) with “app” subdomain:-
HOME and LOGOUT URIs: http://localhost:3000 (can use http://app.localhost:3000 if fix requires it)
LOGIN URI: http://app.localhost:3000/login
REDIRECTS: http://app.localhost:3000/api/auth/kinde_callback , http://app.localhost:3000/api/auth/login-callback
KINDE_COOKIE_DOMAIN= “.localhost”
I’m testing with Google auth. They don’t allow localhost redirects in allowed callbacks on their site and I wonder if redirecting back to “app.localhost” is a problem???
ITEM 2:
Client apps essentially have the same URL pattern as above except for using their subdomain vs. “app” subdomain. I programmatically create a new application in Kinde when a user deploys their app. Callbacks as follows: -
HOME and LOGOUT URIs: http://someapp.localhost:3000
LOGIN URI: http://someapp.localhost:3000/login
REDIRECTS: http://someapp.localhost:3001/api/auth/kinde_callback , http://someapp.localhost:3001/api/auth/login-callback
NB: I’m using org_codes to represent organizations of users. One user database across all apps and app access granted to organization by subscription (using features).
1) Do I need a Kinde application for each “app”, or can I leverage subdomain wildcards and KINDE_COOKIE_DOMAIN? All subdomain apps will use the same authentication methods (Google, email etc) but each app will have its own custom login pages for uniqueness and white labelling.
2) Why am I getting state errors for app.localhost? Do I need to use a domain like "localtest.me" or explicitly add entries in hosts file for local development?
3) Am I using Kinde the best way for my app? Is there a better alternative design?
ITEM 1:
Main app is working fine using a custom login page with http://localhost:3000 but I get state error (different id) with “app” subdomain:-
HOME and LOGOUT URIs: http://localhost:3000 (can use http://app.localhost:3000 if fix requires it)
LOGIN URI: http://app.localhost:3000/login
REDIRECTS: http://app.localhost:3000/api/auth/kinde_callback , http://app.localhost:3000/api/auth/login-callback
KINDE_COOKIE_DOMAIN= “.localhost”
I’m testing with Google auth. They don’t allow localhost redirects in allowed callbacks on their site and I wonder if redirecting back to “app.localhost” is a problem???
ITEM 2:
Client apps essentially have the same URL pattern as above except for using their subdomain vs. “app” subdomain. I programmatically create a new application in Kinde when a user deploys their app. Callbacks as follows: -
HOME and LOGOUT URIs: http://someapp.localhost:3000
LOGIN URI: http://someapp.localhost:3000/login
REDIRECTS: http://someapp.localhost:3001/api/auth/kinde_callback , http://someapp.localhost:3001/api/auth/login-callback
NB: I’m using org_codes to represent organizations of users. One user database across all apps and app access granted to organization by subscription (using features).
1) Do I need a Kinde application for each “app”, or can I leverage subdomain wildcards and KINDE_COOKIE_DOMAIN? All subdomain apps will use the same authentication methods (Google, email etc) but each app will have its own custom login pages for uniqueness and white labelling.
2) Why am I getting state errors for app.localhost? Do I need to use a domain like "localtest.me" or explicitly add entries in hosts file for local development?
3) Am I using Kinde the best way for my app? Is there a better alternative design?
