Is it possible to authenticate users through different subdomains? - laravel

Question

I would like to create a multi-tentant laravel 8.0 application (with laravel multi-tenancy package and laravel sanctum) with Vue Frontend for the customers and a Vue Frontend for Admins.
(Vue2) Frontend for customers like: example.com and store1.example.com and store2.example.com
(Vue2) Frontend for admins like: store1.admin.example.com and store2.example.com
(Laravel) Backend for the rest api like: store1.api.example.com and store2.api.example.com
I would like to make it possible for customers to log in on any of the subdomains forexample on example.com or on store1.example.com and also be logged in on all the other subdomains.
Is it possible?
Do you have any suggestions?
+1 question: Is there any way to generate a subdomain with laravel?
This would be my first multi-tenant sandbox application, thanks for your help!

Answer 1

I have done a similar set-up with this although I haven't gotten to a deeper sub-domain.
The first thing you need to do is configure the tld and wildcard sub-domain to your application, so whatever subdomain you hit, you should always see the index content.
The first setup for this is to set SESSION_DOMAIN in laravel .env to something like .whatever.com
e.g.
SESSION_DOMAIN=.whatever.com
Then the next thing you have to do is to make sure your application uses JWT Authentication https://github.com/tymondesigns/jwt-auth
and when you save the token on your user browser, you need to set the domain same as your SESSION_DOMAIN.
I grab the tld no matter what subdomain they try to log-in
const tld = (() => {
const host = window.location.host, subs = host.split('.')
if ( subs.length > 2 )
return host.replace(/^[^.]+\./g, "")
return host
})()
then I added . in-front of the tld on domain cookies that holds the token
Cookies.set('token', token, { expires: remember ? 365 : null, domain: `.${tld}` })
so if you go to Application tab from dev toolbar, then under cookies on your app, the domain should be .whatever.com and if you jump from one sub-domain to another you should still be authenticated
Also, regarding with your setup, I think you are just over-using a subdomain in your initial plan.
You can just simply create a table for STORE which holds all different store then add a column for slug. then just create one-to-many or many-to-many relationship for other stuff like store owner from users table, store products from products table etc, so you store table should just look like
id | name | slug
1 | My Store | store1
Then on the front-end, you would grab the slug of the sub-domain and request a query with matching store slug to your API end-point, you only need one structure for your end-point, you don't need to have each store have their own api end-point, you just need to include the store slug every time you hit your end-point which are store specific request, so if you hit store1.whatever.com, all your query should pull everything related to a store with slug store1
Additionally, you don't need to use a sub-domain for admin and api end-point, try looking for a Vue+Laravel template, like this one below which has a lot of features like vue routing, vuex and templating which I think is very suitable for your set-up https://github.com/cretueusebiu/laravel-vue-spa
Then the way you should handle it is much better to be something like this
Front-end -> store1.whatever.com
Admin -> store1.whatever.com/admin/
API end-point -> whatever.com/api/