Passport return 401 in new tab

It sounds like you're experiencing an issue where your Vue.js application is not sending the authentication token properly when a new tab is opened, despite the token being available in the session storage. Here's a step-by-step solution to troubleshoot and potentially resolve this issue:

1. Verify Token Presence: Ensure that the token is indeed present in the session storage of the new tab. You can check this by opening the browser's developer tools, going to the Application tab, and looking under Session Storage.

2. Check Token Usage: Make sure that your Vue.js application is configured to send the token with each request. This is typically done by setting the Authorization header with the token value.

3. Configure Axios: If you're using Axios for HTTP requests, you can create an Axios instance and configure it to send the token automatically. Here's an example:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://your-api-url',
});

api.interceptors.request.use((config) => {
  const token = sessionStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

export default api;

1. Check Passport Configuration: Ensure that your Laravel Passport configuration is correct and that it's properly set up to handle token-based authentication.

2. Inspect Request Headers: Open the network tab in the developer tools and inspect the headers of the outgoing request to ensure that the Authorization header is being sent correctly.

3. Check CORS Policy: If your API is on a different domain, make sure that your CORS policy is configured to allow the Authorization header.

4. Session Storage Limitation: Remember that session storage is tab-specific. If you need to maintain a session across tabs, consider using local storage instead, which persists across tabs and windows.

5. Token Expiry: Verify that the token has not expired. Tokens have a finite lifespan, and if the token is expired, it will result in a 401 Unauthorized response.

6. Laravel Middleware: Ensure that the middleware in your Laravel application is correctly set up to authenticate API requests using Passport.

7. Clear Config Cache: Sometimes, after an update or configuration change, Laravel might hold onto old configurations. Clear the cache by running the following commands:

php artisan config:clear
php artisan cache:clear

1. Review Passport Version: Since you've updated to Laravel 10, ensure that you're using a compatible version of Passport. Check the Passport documentation for any breaking changes or additional steps required after upgrading.

2. Check for JavaScript Errors: Ensure there are no JavaScript errors in the console that might be preventing the token from being attached to the request.

If after following these steps the issue persists, you may need to provide more specific details about the error and your setup for further assistance.