API Security for a Laravel+Nuxt.js project - laravel

I have a website which is based on a Laravel backend api and a Nuxt.js frontend app.
The laravel app is served at api.website.com. Till now the api was open, meaning everyone can make a get request. There are almost no post requests.
I know need to implement a login mechanism for the users (Usual login+register and facebook login).
My question is about how would I go to make this process secure. Do I need Laravel Passport (or other similar mechanism)?
My thought is that, say I have an endpoint api.website.com/register (POST), I do not want anyone to be able to just make a post request and create an account. I need to have some sort of security like a csrf token. I know I can use CORS but that doesn't really provide much of security in this case.

You can use jwt like this or laravel passport.

Related

Protection of API against direct access

I have separate backend and frontend. However, they run on the same server (this may change in the future). The backend serves as an api and is powered by Laravel. Frontend by Nuxt (Vue).
I wish only my Nuxt application could access the api. How can I configure Laravel to only return data if the request comes from a Nuxt application?
I thought about adding a special token to requests, but the user will be able to check what request is coming out and capture the token. Can anyone give me ideas how this can be solved?
You must be knowing about CORS. So in your Laravel Server, allow requests from only the frontend server's domain like this:
Access-Control-Allow-Origin: https://www.example.com
Simplest solution would be to add serverMiddleware in the nuxt project and route all the requests to the "real" api through it. Clients will hit the internal nuxt api and they will not be able to see the actual request made to the real api. There you can also add the token you are talking about for extra layer of security.

Secured web application with API backend in Laravel

I've created a web application that uses the built-in authentication method for the web, once the user is authenticated he/she is presented with a dashboard page. At this moment Ajax calls to an API need to be made to fetch data for the logged-in user. What would be the correct approach to this to make it is secure?
As a next step, I would like to be able to use the API "stand-alone" as well, so a 3rd party could access the dataset through the API as well.
Right now I am looking into Laravel Passport as well as Spatie Permission package to help me with access control.
If you are using ajax calls in same domain it won't be problem with built-in authentication to give access to authorized users only, because tokens & sessions are accessible for laravel and you can get authenticated users by default.
If you want to make external api as well the best approach will be to use Laravel Passport and pass token in Authorization header as usual.
Hope this helps you

Laravel API Auth with Passport and React

I have a Laravel 5.5 Application that's using the session based auth out of the box. On some of these pages I have react components that need to get/post data from/to an API.
What is the best practice for handling this? Do I simply hide the API endpoints behind the auth? This would work but should I be using Laravel Passport for this instead?
I've had a play with Passport and it seems that this would work but I don't need users to be able to create clients and grant 3rd party applications permission etc. There is just the first party react app consuming the data from inside the laravel application (view).
From my initial experimenting with it, it seems I'd need to have the login call made first to receive an access token to then make further calls. As the user will already be authenticated in the session is there an easier way?
I'm not sure if Passport is intended to be used for this purpose or not. I'd rather take the time to get it right now as I'd like to get the foundations right now if the app scales.
You can proxy authentication with Passport. Using the password grant type users would still log in with their username/password, then behind the scenes make an internal request to Passport to obtain an access token.
Restrict what routes are available when registering in a service provider by passing in:
Passport::routes(function ($router) {
$router->forAccessTokens();
$router->forTransientTokens();
});
That limits access to personal tokens and refresh tokens only. A client will be created when you run php artisan passport:install.
Setup a middleware to merge the password grant client id and secret in with the request, then make a call to the authorization endpoint. Then it's just a matter of returning the encrypted token and observing the Authorization header for requests to your api.

A working way of authenticating and authorising Vuejs apps (with a Laravel Backend)?

I am making a VueJS app with a Laravel backend. I see Laravel has Passport which is used to authenticate/authorize APIs. (Sincerely I have not yet succeeded in integrating Passport. I have not understood where the starting point is. Will post that question separately).
I have done a lot of searching and still have not found the best/easiest way of doing authentication and authorization, and also interface control depending on permission. (I know "best" is subjective but basically means a method that is easy to integrate, understand and use).
Anyone who has been there and used one that worked really well?
I generally use JSON Web Tokens for my web and mobile apps. It's simpler to set up than Oauth and is a better fit for many applications.
Basically, the user sends a POST request containing their authentication details to the appropriate endpoint and receives a token in response. The user can then include that token in the Authorization header of future requests to authenticate them.
The token also includes a timestamp for when it expires, and it can be decoded on the client side so that an application can refresh the token before it expires.
There's an excellent implementation of JWT for Laravel which I use all the time and can highly recommend. There are also client-side libraries for handling JWT with pretty much every framework under the sun.
#MatthewDaly, I followed your recommendation and I stumbled on a VueJs-Laravel JWT implementation here: http://jimfrenette.com/2016/11/laravel-vuejs2-jwt-auth/
I followed through the Tutorial and was able to make it work for my case. (Caveat: The post is slightly old (using Laravel 5.2), but with good understanding of Vue and Laravel, you can be able to follow and implement it easily).

How do I keep by backend secure from third party clients

I want to use Ionic to connect with a Laravel rest API. As far as I know I should use OAuth to authenticate the user. How does this stop other clients/requests from accessing my rest API?
For instance if someone created another Ionic app or anything and requested a OAuth token.
AFAIK there's still no way to perfectly protect your API source. As you mentioned, OAuth is one way to help protection.
I often use JWT, aka. JSON Web Token with token-refresh which expires right after one use. You can check out my short tutorial on using JWT with Laravel and AngularJS, which is absolutely same with Ionic.

Resources