How to make sure it's my frontend making the api calls - laravel

My backend and frontend are totally separated. One using Laravel 5.3 the other using VueJS 2.
My frontend doesn't need to authenticate users (public website). However my backend should be able to recognize that the API calls are being sent from my frontend and not some other client/frontend.
I know how to do this manually, but I would like to know if it's possible to do this out of the box with the Dingo package and also that the hostname or whatever way the API calls are being approved can't be spoofed by others?

You can add a custom element, like the csrf_field(), to all of your forms. If you have that element...then it's coming from you.
edit: Or json web tokens, but that's a bit more work.

Related

Front end of application is built in Laravel livewire and want to consume API's built in Lumen

I was handed over a project by my company, it was made in Laravel with livewire and Nova.The company wants me to redo the app by consuming API's written in Lumen.
The first thing that I want to ask is whether its a good idea and secondly how to go about storing jwt token in Laravel provided by the Lumen login API and use it in subsequent requests?
First question you need to ask is why do they want to rebuild something existing under Laravel to Lumen. Lumen is basically a lightweight version of Laravel. If the idea is to seperate the frontends from the backend you could keep using Laravel, it can definitely be used to define APIs.
Regarding your second question, there are already some existing libraries (https://github.com/dusterio/lumen-passport ) which can help you use Laravel Passport in Lumen, so you shouldn't have any issue and you should be able to use your token everywhere.

The "right" way to combine Vue (frontend), Python (backend API) and Okta (authentication)

I'd like to build a web app using Vue for the frontend, and Python (Flask or FastAPI) for backend API calls.
Both on the frontend and the backend, I'd like to have authentication via Okta in place.
I'm able both to create a frontend (I used Okta cli for the boilerplate) with the desired protection in place, and a backend (using Flask-OIDC). However, I'm not sure how to plug those two together: is it sufficient to protect the API calls and trust that the user will be logged in through the frontend? Do I need to protect both the frontend and the backend (I strongly believe: yes)? I'm sure there is some sort of best-practice out there, but I fail to find it; would be very grateful for any pointers in the right direction.
Thank you!
You should be fine with your approach: frontend will obtain an access_token from Okta, which you will be sending to your backend, where it should be verified appropriately.
Another architecture, which can be utilized, is establishing your own session by your backend (some sort of traditional web-client app), if you are only planning to have your front-end talking to your backend. It can be easily done with traditional authorization_code flow, where server will have both client_id and client_secret parameters. This is described in more details on Okta Developer site.
I'm not familiar with Python frameworks, so can't help with examples, but I'm sure you can find some examples online.

Which Auth is usfull in Laravel / VueJS project?

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.

How can I secure Front-End in a Vuejs SPA?

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.

Allowing unauthenticated access to Laravel passport endpoint conditionally

We have passport authenticated Laravel endpoint. We want to give a seperate application from our main one the ability to call this specific endpoint without needing a user login, we also want to be able to identify the client. So for example two seperate client apps make an unauthenticated call to the endpoint and we could tell them apart by some means.
We've tried messing with custom guard & service providers, I'm under the impression passport makes it tricky to do what we want here.
We could just duplicate the endpoint and make one unauthenticated, I guess it's just tricky to understand how to structure things here to do what we want.

Resources