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

kossoy / laravel-jetstream-inertia Goto Github PK

laravel-jetstream-inertia's Introduction

Using Laravel and Jetstream with Inertia stack

TL;DR

Prerequisites

Create Laravel project

Config DB

Setup FB and Google auth data

Setup JetStream with Socialite

Edit config/app.php

Add migration for social login fields

Edit migration file:

Add fields to the User Model

Create Google controller

Create Facebook controller

Create Routes

Add FB and Google login buttons

Execute migrations

Run the dev servers (UI build and php server)

PROFIT!!!1

laravel-jetstream-inertia's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Edit `config/app.php`