Login users from other sites in my laravel app with their account - laravel

I have a laravel 7 website that's mainly used as a membership program for some companies.
A new feature demands that users from those companies may login in my site with their account (account of my site) through a request generated on their company side.
Each app has its own DB. In my DB I keep track from which app each user is.
What would be a secure approach to accomplish this feature?

You could implement an API using either Laravel Passport or Laravel Sanctum for authentication, depending on your use-case/preference.
Here are a couple of boilerplate projects that you can take a look at for reference:
Passport: https://github.com/pktharindu/nuxt-laravel-passport-example
Sanctum: https://github.com/pktharindu/laravel-api-boilerplate
You'll of course need to do some customizations to keep track of where the user is coming from.

Related

Laravel Vue SPA - Social Authentication

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.

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.

In which cases using of laravel passport gives some advantage?

I read https://laravel.com/docs/6.x/passport now and it is clear technically, but in which cases have I to use it to get
advantage comparing with laravel native auth or jwt/auth I worked before?
1) In config/auth.php 'guards' we set which auth driver would be used in the app
and it can be only 1 set. I mean we can not set passport and jwt/auth in 1 app?
2) Looks like passport can be used in case when we use blade page and form is submitted as we do in blade page as :
<form method="POST" action="{{ route('register') }}">
#csrf
I suppose there is no difference in blade forms definition using passport intead of native auth?
3) Also, passport can be used instead of jwt/auth in backend rest API and there is no difference in work of clients app
using this backend rest API ?
4) Is passport better/has some advantage in both cases or it is just one more replacement?
5) Please give some examples in which passport can be used / got advantage of using it may be in some other app types?
Thanks!
Laravel Passport is a Laravel package that allows you to integrate the OAUTH2 protocol into your application.
This means that when you want other services to retrieve user data from your application, or add data, they can request access for users. Users can give permissions for certain actions by clicking a button on the external site, logging in on their account on your Laravel site, and allowing access for the external service. Users are then redirected back to the other website, and after a few requests between the two servers, the external service now has the requested permissions to read or alter user data. This protocol is almost always used whenever you click "sign on with ..." since all large social media platforms have OAUTH2 integrations.
To answer your questions:
I believe this question: Laravel combine Passport authentication and normal authentication will answer your question.
Passport sits on top of default Laravel auth and needs this to authenticate requests. So users still have to have an account on your site to allow other websites to access your account.
There are big differences in how normal API auth works, and how Passport works. The biggest difference is that normal API auth should only be used for your site, not for external sites to fetch user data from your API. With OAUTH2, users can give certain permissions to websites, and using tokens, these external sites can perform certain actions on your site.
If you want to allow other sites to fetch account information from your site, you should implement Passport, if not, then using Passport has no large advantages.
Examples are things like Sign in with Google, or with Facebook, Twitter or GitHub, Even stackoverflow has an OAUTH2 implementation. Services can, for example, create new Facebook posts for a user, request all twitter posts from the last year or create a new issue in Github.

Which OAuth2 Grant to use when developing SPA, Mobile App with Laravel as backend. Will not be using third party login

I'm developing a mobile app + SPA using Laravel as a web service. I'm not sure which grant flow will be good for this. I would avoid any third party login like facebook, google, etc. Id'like to handle user login simply with email and password. I want user to login only once on mobile app.
I had gone through some articles. I'm very confused. I found out 2 flows which might work here. 1st is implicit Grant & 2nd one is password grant.
If SPA is built inside your Laravel project you can handle user login simply with standard laravel authorization method.
For external use (mobile app or external SPA) you should authenticate users with API.
Laravel Passport mainly offers two way to handle this.
Personal Access Token
Fresh API Token
I suggest using the second one cause is the "Standard way" to consuming your web app with a nonsecure source.

Sharing login between OAuth 2 and Session Authentication

At the moment we have a React application that uses OAuth2 for authentication and a second application that uses Laravel with Backpack. Is there any viable way to share the login between the two apps, as they are just two parts of the same system.
[UPDATED]
Additional information: both the Laravel project using session auth (https://laravel.com/docs/5.7/authentication) and the React application using OAuth 2 (https://laravel.com/docs/5.7/passport) will be running in the same browser. The intention is to make a seamless transition between these two parts.
Both Session auth and OAuth are using the default implementations provided by Laravel.
Short story behind the requirement - we have a system where the user can order products, but some of the users are also sellers. We have the Laravel project as the front-end shop part and the React app as a panel for moderating the products that you sell.

Resources