Laravel Vue SPA - Social Authentication

Question

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

Answer 1

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.