I'm building a SPA using Vuejs and consuming Laravel API's, and users can have multiple roles, what is the best way to save token and user roles? as well as prevent users from knowing what the roles are?
There is one solution I know yet, which is to save them in Cookies and LocalStorage.
However, if someone knows my LocalStorage key for the roles and they were just like a normal user and changed it, so that they can see what Admin Dashboard looks like (Just the Front-End) and what Admin can see in the app.
How can I prevent them? and what are the best ways to secure SPA?
Thank you in advance.
You can never consider SPA frontend as "secure". If something is executed on browser it means it can be modified by user. It of course doesn't mean SPA is bad, no no, just it is not good solution for every project.
If You want to be sure that user will never see admin dashboard then it should be in separate bundle or even better - separate project.
Instead - consider migrating SPA to SSR (in Vue You can use Nuxt.js (https://nuxtjs.org/) for this).
Thank's to this user will receive only HTML response (just like in Laravel with Blade). Because of this You can authenticate user and check roles BEFORE user will receive any content (and block access to admin panel by that).
BUT - if You are using Laravel with Vue in same project (so Vue is initiated by Blade) this means You can just like in Nuxt check user before it will receive any content. Just make middleware for it. But it will help only by blocking entire page, and not for changing (in secure way) content on single page based on multiple roles. So again - You need SSR for that.
For any every solution I would suggest You to use new official library from Laravel - Sanctum (https://laravel.com/docs/7.x/sanctum).
Laravel API use role and permission to check user is can do something.
Client save jwt token and use jwt to authen Laravel API. You will get user info in laravel side. Use user id check in role table.
Related
Back Story:
I recently got into Web Development, and I would really appreciate it if you guys could share some great material/tutorials where I could learn, already got a couple of Udemy courses, and searched online but I still have some concerns.
For the first project, I would like to create an App which would be SPA. This would be a basic To-Do App, where users could log in and add To-Dos to their list.
Issue/Question:
How could I implement logging-in functionality only with Social Accounts (No regular Email/Password method)? If the user uses the login feature for the first time he is registered/added to the database where his data is stored, and for the second time, he would log in and fetch the data accordingly. I was thinking of Laravel Socialite, although, I'm not sure if it is used for SPA (Login without reloading/redirecting) pages? And if it is, do I need any additional forks/plugins?
I have found Universal Social Auth for that, however, I'm not sure if it does exactly what I need, and how to implement/configure it correctly.
All in all, I would really appreciate it if you guys could share some light here and perhaps share some tutorials or articles about that as well.
Backend:
Laravel
Frontend:
VueJS
VueX
VueRouter
Vue I18n
Axios, Vue-Axios
You need Laravel Socialite to get data about user from the identity provider (it could be Google, Github, Facebook or something else). It will use Oauth2 protocol.
You will store client_id and client_secret from the third party authentication you want to use. User will click for example Sign up with Google and it will redirect him to Google login page. If he fills correct username and password you will get his user information by using Socialite::driver('github')->user() .
You can use updateOrCreate() method to create user if it doesn't already exist in your database or just to update his data. Email or username fields could be identifiers or whatever is unique and works for your case.
After you found the user in database or created a new one, you should log in him to your application using session cookie or some kind of token.
Whole auth proccess is happening on the backend side, only when you successfully log in user to your app you can issue cookie to the frontend Vue side. So to answer your question, yes you can use Socialite with SPA.
Don't mix Laravel Socialite/Oauth2 with authentication proccess/Laravel Sanctum.
Former is for retrieving user data without registering on your site. Latter is for actually giving access to your API for specific user.
I am planning a small project and have a question about authentication. I would like to implement the site with Laravel 8. However, as soon as the user has successfully logged in, he should be directed to the user dashboard. The User Dashboard should be a pure VueJS Single Page Application.
Now my question. Which auth should I use here? Session or token for the whole site or is both possible and useful?
If I use the token auth variant, for example, then I can protect the Vue app very well but I cannot access the user information outside the Vue app. For example, the current profile picture of the user should appear in the navbar and not only in the vue app but also on the landing page, contact page etc.
How can I do this and what will be the best practice and thanks for your help!
Use token based Authentication
(Laravel Passport)
Use Token-based authentication system.
In this way, you'll be able to manage the entire application UI and role checking in the frontend only. I would rather prefer to go with JWT [https://jwt-auth.readthedocs.io/en/develop/laravel-installation/]. It's easy to use and the documentation is pretty good. It's even supported by Lumen also. If you wish to integrate any micro-service in your application future, then it's available in Lumen micro-service also.
I have created an application with Laravel 7 that contains users that can log in.
In parallel, I create a showcase site for the application (another domain) and essentially html/css.
I would like on this showcase site to propose login and registration buttons if there is no user connected to the laravel.Otherwise I would just like to propose a "Dashboard" button if a user is connected to the Laravel application.
How to do that? I confess that I'm a bit lost. Thanks for your help.
You need to create an API on the laravel app which will be used by the "showcase site".
To login and authorize themselves you can use JWT
to keep user data and use it on the showcase site you can either save them in
localstorage (just be careful not to save any sensitive data there as people can take that information in case of XSS vulnerable)
indexdb
cookies
None of these methods are safe. They can be exploited using XSS so i advice on using JWT to secure sensitive data.
Hi I'm building an app with Larval and vue.js. This app is not a fully single page application but is a combination of vue and blade.
For example, the dashboard or login page and some other pages are SPA-based and are fully implemented with vue. But the landing page and some other pages have been created by blades that may have used vue components in some of them.
My question is about authentication in such cases. Is laravel passport appropriate for such cases? Or should I use jwt or something else? Because I need authentication on both types of pages (Vue-based, Blade-based). And it's done on almost every page.
On the other hand, I used laravel-permission - Spatie to control permissions and roles. Is it possible for passports to define roles and permissions and control based on them? I mean displaying or hiding elements and links, accessing certain sections, or doing some work with permissions checking.
What resources do you offer to start learning how to develop authentication and authorization in such apps?
Edit:
Maybe there was some ambiguity in my question, so I'll explain a little more. Suppose our website has three parts:
The first part that includes landing page, display of a post, display of all posts and more. This section is implemented by blade and may also use vue components.
The second part is the user profile page of the site where users can edit their own information, view their posts and edit them, view registered comments and more. This section is SPA and is fully implemented with Vue and only logged in users can see it.
The third part is the admin dashboard page, which is needed to manage different sections, apply settings and more. This section is also SPA and fully implemented with Vue. In this section, only users with the Administrator role are allowed, and each one can perform certain tasks based on the permissions given to them. This means, it must be checked whether the user is allowed to see a section or perform a specific task, or not.
Routing is also performed by vue on the user profile and admin dashboard pages, and actions are performed by axios and sending requests to apis written in laravel. And all three parts are in the same application.
So the question is, how should Authentication and Authorization be done in this scenario? Is laravel-passport appropriate for this task? Is it possible to do both in laravel-passport? For example, Authorization is going to be done in the front-end section by vue, how should this be done? Is it possible to combine laravel-passport and laravel-permission - Spatie? Or do we need it at all? Perhaps the more general question: Is this scenario reasonable?
You can use the intermediate approach, blade login/register and the Laravel passport middleware https://laravel.com/docs/6.x/passport#consuming-your-api-with-javascript.
This Passport 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. Now, you may make requests to your application's API without explicitly passing an access token
Spatie permission is great for managing permissions and roles. You can protect your api routes with middleware or checks in your controller.
You making it too complicated. if you are calling your vue components in blade file you don't need passport at all but if your front end is separate from back end then you need to use passport because you don't have access to session...
On the other hand, I used laravel-permission - Spatie to control permissions and roles. Is it possible for passports to define roles and permissions and control based on them?
Passport doesn't care what kinda permission and role system you want to use you can use anything that you want
I've a question about simplicity of a task. I'm fairly new to laravel and vue js, I'm used to php and javascript though.
I hope my question makes sense since I'm not sure if the technologies work as I think.
So I want to do a SPA project with laravel as backend, vuejs as frontend and mysql for the database. I need the site to be online and want an authentication to grant user access to different parts of the website. Let's say, you have to register yourself. If it's a normal user, he can see the "UserDashboard" and if it is an admin he can see the "AdminDashboard".
I've came across a couple of tutorials which show how to create an authentication system by using vue components to handle login/register/logout... It's pretty complicated and messy in my opinion.
Is it easier to just use laravel authentication and blade templates for authentication and then show the SPA for registered users/admins? If that's possible. Only saw the first option I mention for the moment.
Edit :
Here is a picture to illustrate last approach
Laravel authentication, then show SPA
If you use Laravel Mix, simply have one blade template that hosts your application (it's already set in Laravel). However, if you're using Laravel for API and a separate project for the front-end SPA, use Passport. Here's one of the ways to do it.
If you are using Laravel Mix, the CSRF token is already in a meta tag and is being added to Axios. All you need to do is make on blade template show your app.
You can also have separate blade views for login / registration etc and show SPA when logged in. But that's not really the best practice. Since I've figured out how to use Passport, I've always gone the separate vue project route.