Setup project with Laravel, Jetstream (FB and Google through Socialite), and Inertia.js with Vue.js

.Laravel-Jetstream-Inertia.md

Using Laravel and Jetstream with Inertia stack

Jetstream with Inertia stack

TL;DR

I want it FAST!!!1 (still need Prerequisites)

Prerequisites

• PHP 7.4
• Composer
• Node 12.18
• Facebook and Google developer app/project set up one, two

Create Laravel project

composer create-project --prefer-dist laravel/laravel NameOfTheProject
cd NameOfTheProject

Config DB

• Copy .env.example to .env
• In .env replace with DB_CONNECTION=sqlite all DB_.* section
• Create db file with touch or any other tool

touch database/database.sqlite
# in Windows, use git bash

Setup FB and Google auth data

• In .env append

FACEBOOK_APP_ID=<app id>
FACEBOOK_APP_SECRET=<app secret>
FACEBOOK_REDIRECT=http://localhost:8000/callback/facebook

GOOGLE_CLIENT_ID=<client id>.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=<client secret>
GOOGLE_REDIRECT_URI=http://localhost:8000/callback/google

• In config/services.php

'facebook' => [
    'client_id' => env('FACEBOOK_APP_ID'),
    'client_secret' => env('FACEBOOK_APP_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT'),
],

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT_URI')
],

Setup JetStream with Socialite

 composer require laravel/jetstream
 php artisan jetstream:install inertia
 
 composer require laravel/socialite

Edit config/app.php

• Add Socialite service provider

 'providers' => [
    /*
     * Package Service Providers...
     */
    Laravel\Socialite\SocialiteServiceProvider::class,
]

• Add Socialite Facade to aliaces

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Add migration for social login fields

 php artisan make:migration add_social_login_field

Edit migration file:

• In database/migrations

TIMESTAMP_add_social_login_field.php

Add fields to the User Model

• In Models/User.php

protected $fillable = [
    'name',
    'email',
    'password',
    'social_id',       // Add this
    'social_type',     // two fields
];

Create Google controller

php artisan make:controller GoogleSocialiteController

• Google controller class file Http/Controllers/GoogleSocialiteController.php

Create Facebook controller

php artisan make:controller FacebookSocialiteController

• Facebook controller class file Http/Controllers/FacebookSocialiteController.php

Create Routes

• In routes/web.php

use App\Http\Controllers\FacebookSocialiteController;
use App\Http\Controllers\GoogleSocialiteController;

// And in the end append login and callback routes
// Google login
Route::get('auth/google', [GoogleSocialiteController::class, 'redirectToGoogle']);
Route::get('callback/google', [GoogleSocialiteController::class, 'handleCallback']);

// Facebook login
Route::get('auth/facebook', [FacebookSocialiteController::class, 'redirectToFB']);
Route::get('callback/facebook', [FacebookSocialiteController::class, 'handleCallback']);

Add FB and Google login buttons

• In resources/js/Pages/Auth/Login.vue

after

...
Login
</jet-button>

add

<a type="button" href="auth/google"
   class="ml-2 inline-flex items-center px-4 py-2 bg-red-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 active:bg-red-900 focus:outline-none focus:border-red-900 focus:shadow-outline-gray transition ease-in-out duration-150">
    Google
</a>

<a type="button" href="auth/facebook"
   class="ml-2 inline-flex items-center px-4 py-2 bg-blue-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:shadow-outline-gray transition ease-in-out duration-150">
    Facebook
</a>

Execute migrations

 php artisan migrate

Run the dev servers (UI build and php server)

 npm install
 npm run dev
 php artisan serve

PROFIT!!!1

If you don't have git-bash

# Windows cmd:
type > database/database.sqlite
# PowerShell:
Out-File -FilePath database/database.sqlite

FacebookSocialiteController.php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Exception;
use Laravel\Socialite\Facades\Socialite;

class FacebookSocialiteController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return \Symfony\Component\HttpFoundation\RedirectResponse
     */
    public function redirectToFB()
    {
        return Socialite::driver('facebook')->redirect();
    }

    /**
     * Create a new controller instance.
     *
     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector|void
     */
    public function handleCallback()
    {
        try {

            $user = Socialite::driver('facebook')->user();

            $finduser = User::where('social_id', $user->id)->first();

            if($finduser){

                Auth::login($finduser);

                return redirect('/home');

            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_id'=> $user->id,
                    'social_type'=> 'facebook',
                    'password' => encrypt('my-facebook')
                ]);

                Auth::login($newUser);

                return redirect('/home');
            }

        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

GoogleSocialiteController.php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Exception;
use Laravel\Socialite\Facades\Socialite;

class GoogleSocialiteController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return \Symfony\Component\HttpFoundation\RedirectResponse
     */
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Create a new controller instance.
     *
     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector|void
     */
    public function handleCallback()
    {
        try {

            $user = Socialite::driver('google')->user();

            $finduser = User::where('social_id', $user->id)->first();

            if($finduser){

                Auth::login($finduser);

                return redirect('/dashboard');

            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_id'=> $user->id,
                    'social_type'=> 'google',
                    'password' => encrypt('my-google')
                ]);

                Auth::login($newUser);

                return redirect('/dashboard');
            }

        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

TIMESTAMP_add_social_login_field.php

<?php
   
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
    
class AddSocialLoginField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('social_id')->nullable();
            $table->string('social_type')->nullable();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('social_id');
           $table->dropColumn('social_type');
         });
    }
}

TLDR.md

Fast track

1.  git clone [email protected]:kossoy/Laravel-Jetstream-Inertia.git
    cd Laravel-Jetstream-Inertia
    composer install
    touch database/database.sqlite
    cp .env.example .env

2. edit .env with your social apps (FB and Google)

3. create app key php artisan key:generate

4. migrate php artisan migrate

5. go npm i && npm run dev && php artisan serve

Thank you so much!