I build an app as SPA. Later there should also be a mobile app, which consume the API. I use Laravel Sanctum. My problem is that I tested now for days, what is the best workaround. Using Vue Cli and put the app into resources/app and run npm from there? Or create package.json on my own and do npm from root folder. Or is it better to build a SPA with Vue Cli sepearted and only use the API with laravel? Thats what I want to test next. But what about security then. Laravel docs says cookie based is more secure, but then it needs the same url. What is, when I save the token I got in my app? Is that not secure? I think I will delete the tokens after 3 days and maybe also create another salt every 3-4 month.... Not sure if this is a secure way. What would you say? Or what is your way for SPAs? Thx
I'm personally a big fan of splitting the backend from the frontend. You can still use the cookie-based authentication layer, as long as you run both websites on the same base domain. So you can run your API on api.example.com en run your frontend on example.com. That way the cookie should work just fine ;)
I do see a challenge when you start using a mobile app. I think it's harder to keep a cookie in there for the authentication. If you decide to connect multiple systems to your backend I would highly recommend Laravel Passport instead of Sanctum since it's more flexible for different ways of authentication.
Ok. Thx. Then i will check vue cli again and seperate them under the same tdl. Alredy tried this a few weeks before and the problem was to run both in homestead. But Thx ... I will test it again. Maybe I also give passport another chance... I had problems with it in the past. For me sanctum took the pain away. And it seems to work also for mobile apps.
@pixelairport Do you have a particular reason for building an SPA…? Because that will always be my first question: what benefit will building an SPA give me over a “traditional”, server-rendered application that uses Vue for dynamic/interactive portions of my web pages. Because then, you don’t have to answer the questions of, “should the frontend be in its own repository?” (No, unless you want to dramatically increase your development, maintenance, and deployment burden), “How do I authenticate securely?”, and words like “workaround” don’t crop up when you build websites how they were meant to be built.
Regardless whether you go the SPA route or not, your mobile app will need to use token-based authentication, which you can add using Passport.
You're right. Normally I would do only some vue components and use it in my blade templates. That is what I did in the past. I also thought about using livewire. This time my app must show everything in real time (I do this with pusher), is animated and has a lot of elements you can play with. It is like a real time game. The backend has highscores for example. The thing is that you can play with iPhone, Android, Apple Watch, TV Apps. So I thougt best way to build a really good API is to build it a way, where I use the API right from the start. The problem with authentication is for me, to understand how I can be most secure. What is a workaround for example with sanctum. You can save your token forever in your app on mobile phone. But I could imagine that it is also good to delete the tokens maybe every week. Tokens with passport have a lifetime, sanctum not. But maybe it is just another security layer. I think at the beginning I go with the standard laravel gave me and when I grow or when I see the idea works I will bring in other people who make it more secure. thx
OK. I created the app now with sanctum. The vue app is in it, but has a switch. I can run laravel and the vue app runs in production mode. Then it use the cookie based auth. When I develope Im in developer mode and the app uses a bearer token i set up in env.development. That works for me. I can do the automatic reload stuff an can test everything. It seems to work. thx for your help.
@pixelairport It’s always a good idea to add a expiry time to access tokens. When using token-based authentication in things like mobile apps, they will usually take care of refreshing access tokens if they’re close to expiring. So as long as you’re using the app, the app will keep refreshing the access token as often as it needs to.
However, if you set an expiry time of say, six months for your refresh token, and you don’t use the app for longer than that, then the next time you load the app it won’t be able to refresh the access token and you’ll be prompted to authenticate again.
