Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ELWEUOL's avatar

API protection with normal login

Hi, I've read too much about how to protect a api route. Now I've got brain overflow error...

I've got a site with normal (ldap) backend login. To get suggesgtion for searches, I managed to create some api-resources working with vue and axios. The CSRF protection is built in to Laravel, but how do I prevent unauthenticated requests to receive data from these endpoints?

The documentation says Sanctum, but how do I get the plaintext token to the axios bearer header? It looks like, its meant to work with spa and not "normal" sites.

I tried many times to understand this whole mechanism, but I cant get my head around it. Is there an easier way?

Maybe placing these routes into the web middleware with normal auth?

0 likes
7 replies
andyabihaidar's avatar

API requests (ie: calls from your Vue/Axios) should be in the api.php routes and not web.php. Those automatically will not have CSRF.

Next, like you mentioned, you'll need to have users login from your frontend and the axios response, you'll need to save the user token somewhere. A suggested place for this would be your browser local storage.

You should also have a Vuex store set up (let's call it users.js) that stores whether or not the user is logged in, and also has a state variable for the token (fetches it from local storage).

Final step of the puzzle is an axios.js file that's a helper file that you'll import in your Vue frontend instead of importing the regular axios. Code could be as below:

import axios from 'axios';

let axiosInstance = axios.create();
axiosInstance.interceptors.request.use( async config => { 
    if(localStorage.getItem('token')) {
        config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    }
    return config; 
}, error => Promise.reject(error) );

export default axiosInstance;

Basically what it does is create an axios instance, check if the local storage contains a token, and if so, it adds it to the header of the requests.

If your route is in the correct middleware in api.php and you sent the token properly in the header, you should now have authenticated users.

ELWEUOL's avatar

I only use globaly registered Vue components in blade files. There is no vue router, only Laravel routing. So a vuex store wouldn't survive a site change.

Sanctum isnt generating tokens on its own, so do I put generating them into the login process? And after that, how do I get the plaintext token into the local storage?

Is it really that hard? Is there a way like the csrf token? I mean a hidden field which is used by javascript to inject it to axios?

martinbean's avatar

@elweuol You can use Passport: https://laravel.com/docs/8.x/passport#consuming-your-api-with-javascript

This middleware will attach a laravel_token cookie to your outgoing responses. This cookie contains an encrypted JWT that Passport will use to authenticate API requests from your JavaScript application. The JWT has a lifetime equal to your session.lifetime configuration value. Now, since the browser will automatically send the cookie with all subsequent requests, you may make requests to your application's API without explicitly passing an access token

If you’re not wanting to use the OAuth stuff then I think you might be able to get away with installing Passport, but then not registering the migrations and routes if you’re only intending to use the CreateFreshApiToken middleware.

ELWEUOL's avatar

Thanks, this looks promising. I will dig down that hole.

martinbean's avatar

Yeah. I use it in a couple of projects where users log in, but then I have API routes that need authentication.

There’s no OAuth in this application; just that middleware authenticating incoming API requests are actually being made by an authenticated user (and the user has permission to invoke those routes).

Snapey's avatar

If these are just xhr requests from a logged in web client, then put your routes in the web.php and forget about it.

The browser will automatically send the user's session cookie which will tell you who they are and then you can apply the usual authorization techniques to determine what they can do.

Please or to participate in this conversation.