[Vuejs]-Is it possible to authenticate users through different subdomains?

by

0👍

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
enter image description here

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/

Leave a comment