Laravel 8: AJAX Athentication in non-SPA app - laravel

I'm writing a non-SPA app that needs to use an internal API. The API is called via AJAX requests. This is to provide the user with suggestions as they are typing, so I don't want the page to be reloading. The user must be logged in to access the API. The API doesn't need to be called from any other origin.
I have successfully got it working using Sanctum and API tokens. When the user logs in, I generate a token and store it in the browser session, and then send it with the Bearer header. This seems to work but is it the right approach? Should I just using the built in or web auth? I've been reading the docs but have just been getting kind of confused with all of the options.

Related

Elixir Phoenix Absinthe GraphQL API authentication in both web and mobile app's

I'm working on an Absinthe GraphQL API for my app. I'm still learning the procedure(so please go easy on me).
I've a Absinthe/GraphQL MyAppWeb.schema.ex file in which I use for my queries and mutations. My question is how do I use this API for authenticating the user on both Mobile and Web app?
How do set a cookie(httpOnly & secure) in my web app and access/refresh tokens in a single Absinthe API to serve my website and mobile app. Basically what I'm trying to learn is how do I authenticate the user based on specific platform.
If my question sounds bit confusing, I would be happy to provide more information related to my question. I would really be grateful if someone could explain the procedure, I've been very stuck on this for a while.
I would avoid using authentication mechanisms provided by absinthe(if there are any). Depending on what front-end you are using, I would go with JSON API authentication. The flow on server goes the following way:
Create a endpoint for login that will receive a user and password and will return a refresh token.
Create a endpoint for exchanging refresh token for access token.
Use a library like guardian to generate your refresh/access tokens.
Create a phoenix plug for authentication that will check your tokens, guardian has some built-in plugs for this.
Now on device you have to implement:
Ability to save refresh and access token on device.
Have a global handler for injecting access token on authorized requests.
Have a global handler for case when access token is expired. (you usually check if your request returns Unauthorized, then you should request a new access token from the server using your refresh token)
This seems like a crude implementation, however I would advise in implementing your system instead of using a black box library that you have no idea how it works under the hood.

Best Way To Integrate Server Side Laravel Login VueJS SPA

How can I authenticate a user with sanctum when the whole login process happens server side? The question I am asking is kind of hard to phrase so I will explain my situation.
I have a Vue SPA for my front end and a Laravel app as a backend api (they run on the same domain). Normally, to authenticate with the laravel api using sanctum, you would send the credentials in a post request, and if the login was successful, you would get the session information returned. However, I want to use steam login for authentication. I already have to whole process on the backend figured out in terms of actually logging in, however I am unsure how to pass the session data back to the SPA. Currently I have a link on my site that takes the user to the login endpoint on the api, and that endpoint will have them authenticate with steam, so the entire login process is handled on the backend. Now I just need to figure out how to send the session data back to the SPA. I guess it world be similar to using sanctum with socialite.
So far I've tried usisng Sanctums Mobile Aplication Authentication. I did this by having the user log in into the laravel app using steam, then once authenticated, a access token for their account would be created, and they would get redirected back to the Vue apps call back file, with the token as a part of the query string. Then the token would be stored and . This worked, however it presented some security issues.
The token was passed back in the url, so anyone could screenshot it and use it
Anyone who obtained the token by some other method could use it.
Here is the code for what I tried: https://gist.github.com/DriedSponge/4e8549486c2bfa33e4c0b21a539bdf85
So in summary, I want the entire login process to take place on the server, but somehow at the same time authenticate the SPA. If you have any ideas on how I can make this work, please let me know. If you have any questions just leave a comment. Thanks in advance.

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

How to hide or remove ajax api calls from Network section of a browser?

I am working on a website which is developed in react js and I am fetching all data through the API calls. That API calls are visible in the network section of a browser and that API call contains JWT token in the header part of all API call, So it can cause security issue due to that anyone can do that API call with the same header and same URL through other platforms like postman n all.
So my question is that how can I control that no one else is able to access it or how can I hide that API calls from the network section of the browser?
Is there any other solution to solve this security issue?
You have to assign a token to each user. The token will be given to the user upon authentication.
You have to manage access to the page based on the userId and token.
Yo should not use generic tokens for all the users.
Destroy the token upon user logout.
If the user see the token on the network they can only have access to the portion that he is suppose to have access.
This is how I do it, hope it helps.

How to provide login authentication for Web API in Xamarin App?

I am working on Xamarin Forms application and new to providing login authentication of the application. I have completed the design part of the application with using Entries for user id and password and button for Submit. Also, i am having web API and for authentication. Now how to connect that Web API in xamarin forms application for login.
Please guide or provide some use full samples...
Thanks in advance...!
I assume you've built out your authentication API already, and that you can make Fiddler or Postman calls directly to your controller, pass in a set of credentials, and return back a JWT / bearer token that you can then use for authenticated calls?
At this point, it's relatively simple then as you'll want to use build a proxy layer / API layer to make calls out to your API. These calls will simply mirror the ones you've made in Fiddler/Postman/your proxy of choice.
I used Refit to achieve this:
https://github.com/reactiveui/refit
Specifically, you can see on the "Setting request headers" section how they easily encapsulate it for you to pass your token.
Of course, your initial call should be to login, and then once logged in, take the JWT response back from your controller, set the token in your Keychain, and then pull it out of Keychain to set in the header.
Let me know specific questions you have? For example, which of the following do you need more info on?
Sending and parsing a response (serializing the response) from your Login action to set/assign a token in keychain?
Saving the token, and setting it in a header for subsequent calls?
Building a proxy layer using a framework like Refit to make generic outbound calls?

Resources