Laravel and React full API : login to site A log me on site B too

Question

I'm using this project to make a full API application : https://github.com/justnixx/laravel-breeze-api-react using Laravel and React (I'm new to react and laravel).

Everything is ok on it, I've made the following DNS : front.project.local:3000 (react frontend) back.project.local:8000 (laravel backend)

Now I would like to make an administration site, so i duplicated the frontend project and made admin.project.local:3001 so that I have a new site with its own pages for administration.

I've configured all for both sites to work with the laravel backend.

Now my problem is, when i log in to front.project.local:3000, it also log me in to admin.project.local:3001 (same browser, 2 differents tabs). I dont want this, I would like each subdomain to have its own session.

In the laravel project i can see in folder storage/framework/sessions that only 1 session file is created for both sites and I dont understand why.

Am I missing something ? Or is it normal that only 1 session file is created ?

Any hints would be appreciated ;)

In both React projects I'm poiting to BACKEND_URL: "back.project.local:8000" front is requesting to /* or /api/* admin is requesting to /admin or /api/admin/*

In Laravel project .env I have the following configuration :

    APP_URL="back.project.local:8000"
    FRONTEND_URL="front.project.local:3000"
    FRONTADMIN_URL="admin.project.local:3001"
    ...
    #to prevent cors issues
    SESSION_DOMAIN=".project.local"     SANCTUM_STATEFUL_DOMAINS="localhost:3000,localhost:3001,project.local:3000,admin.project.local:3000,$admin.project.local:3001"

All my research are pointing to the opposite solution : people want shared session, me not. (edit : removed http:// cause stackoverflow think this is spam)

Answer 1

Inside your code that handle the login request frontend/src/context/AuthContext.tsx,

Try replacing all occurence of window.localStorage to window.sessionStorage as a start.

The difference is sessionStorage data is persisted per tab, as opposed to localStorage where it is persisted until someone/some code cleared it. But naturally, either local and session storage are isolated per domain so they don't pollute each other. It could be your applications sees the two frontend applications as same because they shared a domain name / domain is not configured properly between those two.