I am developing an application on Laravel and React. At the moment I made Registration, login through Laravel Passport (API). My task is to make Authentication through Google, Facebook. When you click on the button for the first time, it takes data and fills in for example (email, name, surname) and the user fills in the rest of the fields manually. When the user has already been created. To immediately go to the profile. Can you advise how you can implement this? Thank you.
Related
I have a Vue SPA hosted on one domain and a Laravel back end on another domain. I use Sanctum and Fortify to manage authentication to the application. I have implemented the Fortify registration process in my application and that is working fine. I would now like to make the registration process by invitation only.
My thinking was to send an invitation email to the user from Laravel with with a temporary signed URL with an expiry period. This would point at the SPA rather than a Laravel endpoint and the SPA could then validate the link by calling Laravel using the existing signed middleware, check the expiry time and so forth. If all that was valid I would let the user provide his password credentials, locking the email to the value hashed in the link and use the standard Fortify registration process to complete the registration process.
Looking through the Laravel codebase, the only way I can see of doing this is by cloning and modifying the temporary signed URL functionality and changing it to use the base URL of my SPA and hard coding a specific link to the registration page of my SPA. Not the most elegant solution so before I embark on doing that I wondered if anybody had experience of doing something similar and had a better, more elegant approach or any pointers on this?
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 want to create a web app using Laravel and I want to use Socialite to register users using Gmail, but I want to know instead of creating a user record in the callback, I want to give a sign to the frontend (Vuejs) and let it view a form where user should complete his information then submit the data.
If its not an SPA I would say I have to save user data in the callback in the session then return a view and fill other info ...etc, but in my case its SPA and I don't have session so whats the solution for this problem ?
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.
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.