DEV Community: John Maths

How to Implement "Login with Google" in Laravel 11

John Maths — Sat, 17 Aug 2024 14:42:41 +0000

Prerequisites

Laravel project set up
Composer installed
Google Developer Account

Step 1: Set up Google OAuth Credentials

Go to the Google Developer Console
Create a new project or select an existing one
Enable the Google+ API
Go to Credentials -> Create Credentials -> OAuth Client ID
Select Web Application, add your app's URL and callback URL (e.g., http://your-app-url/login/google/callback)
Note down your Client ID and Client Secret

Step 2: Install Laravel Socialite

Install Laravel Socialite via Composer:

composer require laravel/socialite

Step 3: Configure Socialite

Add the following to your config/services.php file:

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

Then, add these to your .env file:

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URI=http://your-app-url/login/google/callback

Step 4: Set up Routes

Add these routes to your routes/web.php:

use App\Http\Controllers\Auth\GoogleController;

Route::get('login/google', [GoogleController::class, 'redirectToGoogle'])->name('login.google');
Route::get('login/google/callback', [GoogleController::class, 'handleGoogleCallback']);

Step 5: Create GoogleController

Create a new controller:

php artisan make:controller Auth/GoogleController

Implement the controller:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class GoogleController extends Controller
{
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleGoogleCallback()
    {
        try {
            $user = Socialite::driver('google')->user();
            $finduser = User::where('google_id', $user->id)->first();

            if ($finduser) {
                Auth::login($finduser);
                return redirect()->intended('dashboard');
            } else {
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'google_id'=> $user->id,
                    'password' => encrypt('123456dummy')
                ]);

                Auth::login($newUser);
                return redirect()->intended('dashboard');
            }
        } catch (\Exception $e) {
            dd($e->getMessage());
        }
    }
}

Step 6: Update User Model

Add google_idto the fillable array in your User model:

protected $fillable = [
    'name',
    'email',
    'password',
    'google_id',
];

Step 7: Add Google ID to Users Table

Create a new migration:

php artisan make:migration add_google_id_to_users_table

In the new migration file:

public function up()
{
    Schema::table('users', function ($table) {
        $table->string('google_id')->nullable();
    });
}

public function down()
{
    Schema::table('users', function ($table) {
        $table->dropColumn('google_id');
    });
}

Run the migration:

php artisan migrate

Step 8: Add Login Button

In your login view, add a "Login with Google" button:

<a href="{{ route('login.google') }}" class="btn btn-danger">
    Login with Google
</a>

How to Implement "Login with Facebook" in Laravel 11

John Maths — Thu, 15 Aug 2024 17:06:29 +0000

This tutorial will guide you through the process of adding Facebook login functionality to your Laravel application.

Prerequisites

Laravel project set up
Composer installed
Facebook Developer Account

Step 1: Create a Facebook App

Go to Facebook Developers
Click on "My Apps" and then "Create App"
Choose "Consumer" as the app type
Fill in the app details and create the app
In the app dashboard, note down your App ID and App Secret

Step 2: Install Laravel Socialite

Laravel Socialite provides an expressive, fluent interface to OAuth authentication with Facebook, Twitter, Google, LinkedIn, GitHub, GitLab and Bitbucket.
Install it via Composer:

composer require laravel/socialite

Step 3: Configure Socialite

Add the following to your config/services.php file:

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT_URI'),
],

Then, add these to your .env file:

FACEBOOK_CLIENT_ID=your_facebook_app_id
FACEBOOK_CLIENT_SECRET=your_facebook_app_secret
FACEBOOK_REDIRECT_URI=http://localhost:8000/login/facebook/callback

Step 4: Set up Routes

Add these routes to your routes/web.php:

use App\Http\Controllers\Auth\FacebookController;

Route::get('login/facebook', [FacebookController::class, 'redirectToFacebook'])->name('login.facebook');
Route::get('login/facebook/callback', [FacebookController::class, 'handleFacebookCallback']);

Step 5: Create `FacebookController`

Create a new controller:

php artisan make:controller Auth/FacebookController

Implement the controller:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class FacebookController extends Controller
{
    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }

    public function handleFacebookCallback()
    {
        try {
            $user = Socialite::driver('facebook')->user();
            $finduser = User::where('facebook_id', $user->id)->first();

            if ($finduser) {
                Auth::login($finduser);
                return redirect()->intended('dashboard');
            } else {
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'facebook_id'=> $user->id,
                    'password' => encrypt('123456dummy')
                ]);

                Auth::login($newUser);
                return redirect()->intended('dashboard');
            }
        } catch (\Exception $e) {
            dd($e->getMessage());
        }
    }
}

Step 6: Update User Model

Add facebook_id to the fillable array in your User model:

protected $fillable = [
    'name',
    'email',
    'password',
    'facebook_id',
];

Step 7: Add Facebook ID to Users Table

Create a new migration:

php artisan make:migration add_facebook_id_to_users_table

In the new migration file:

public function up()
{
    Schema::table('users', function ($table) {
        $table->string('facebook_id')->nullable();
    });
}

public function down()
{
    Schema::table('users', function ($table) {
        $table->dropColumn('facebook_id');
    });
}

Run the migration:

php artisan migrate

Step 8: Add Login Button

In your login view, add a "Login with Facebook" button:

<a href="{{ route('login.facebook') }}" class="btn btn-primary">
    Login with Facebook
</a>

Using Queues and Jobs in Laravel 11: A Practical Guide

John Maths — Thu, 15 Aug 2024 12:24:53 +0000

Queues in Laravel are an excellent way to improve your application's performance by deferring the processing of time-consuming or resource-intensive tasks. In this tutorial, we'll explore how to use queues and jobs to send a welcome email to new users after they register

Step 1: Set Up the Database for Queues

First, we need to set up the database table for queues. Run the following commands:

php artisan queue:table
php artisan migrate

Step 2: Configure the Queue Driver

In the .env file, set the queue driver to database:

QUEUE_CONNECTION=database

Step 3: Create a Job

Let's create a new job using the artisan command:

php artisan make:job SendWelcomeEmail

Step 4: Implement the Job

Open the app/Jobs/SendWelcomeEmail.php file and implement the job:

<?php

namespace App\Jobs;

use App\Models\User;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Mail;
use App\Mail\WelcomeEmail;

class SendWelcomeEmail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    protected $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function handle()
    {
        Mail::to($this->user->email)->send(new WelcomeEmail($this->user));
    }
}

Step 5: Create the Email Template

Create a new email class:

php artisan make:mail WelcomeEmail

Then implement it in app/Mail/WelcomeEmail.php:

<?php

namespace App\Mail;

use App\Models\User;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class WelcomeEmail extends Mailable
{
    use Queueable, SerializesModels;

    public $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function build()
    {
        return $this->view('emails.welcome')
                    ->subject('Welcome to our site!');
    }
}

Create the email template in resources/views/emails/welcome.blade.php:

<h1>Welcome {{ $user->name }}!</h1>
<p>We're excited to have you on board.</p>

Step 6: Dispatch the Job to the Queue

Now, you can dispatch the job to the queue when a new user registers. For example, in app/Http/Controllers/Auth/RegisterController.php:

use App\Jobs\SendWelcomeEmail;

protected function create(array $data)
{
    $user = User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
    ]);

    SendWelcomeEmail::dispatch($user);

    return $user;
}

Step 7: Run the Queue Worker

To process jobs in the queue, run the queue worker:

php artisan queue:work

How to upload Project on GitHub: A Step-by-Step Guide

John Maths — Sun, 14 Jul 2024 22:33:48 +0000

Step 1 : Open your Github account

Step 2 : Click on new repository

Step 3 : Fill out the repository details

Repository name: (e.g., project-name)
Description: (optional)
Public or Private: Choose based on your preference.

Step 4 : Click "Create repository"

Step 5 : Open Cmd and Navigate to your project directory

Step 6 : tpye "git init" and hit enter

Step 7 : tpye "git add . " and hit enter

Step 8 : tpye 'git commit -m "anything" ' and hit enter

Step 9 : Copy the repository URL After creating the repository

you will see the URL (it will look like https://github.com/yourusername/your-repo.git).

Step 10 : tpye "git remote add origin https://github.com/yourusername/your-repo.git" and hit enter

Step 11 : tpye "git push -u origin main" and hit enter

Check if your default branch is main instead of master, use:
git push -u origin master

How to Build an API with Laravel Breeze in Laravel 11

John Maths — Fri, 12 Jul 2024 15:10:22 +0000

How to Build an API with Laravel Breeze in Laravel 11

A step-by-step guide on building a simple API with authentication using Laravel Breeze in Laravel 11.

Step 1: Install Laravel

First, create a new Laravel project using the Laravel installer or Composer.

laravel new api-breeze
# Or via Composer
composer create-project laravel/laravel api-breeze
cd api-breeze

Step 2: Install Laravel Breeze

Next, install Laravel Breeze and its dependencies.

composer require laravel/breeze --dev
php artisan breeze:install api

This command will install Breeze and set up the necessary scaffolding for API authentication.

Step 3: Configure the Database and Run Migrations

Update your .env file with your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel11_api
DB_USERNAME=root
DB_PASSWORD=

Run the migrations to set up your database tables:

php artisan migrate

Step 4: Create Authentication Endpoints

Laravel Breeze provides the necessary endpoints for registration, login, and logout. The routes are defined in routes/api.php.

use App\Http\Controllers\Auth\AuthenticatedSessionController;
use App\Http\Controllers\Auth\RegisteredUserController;
use Illuminate\Support\Facades\Route;

Route::post('/register', [RegisteredUserController::class, 'store']);
Route::post('/login', [AuthenticatedSessionController::class, 'store']);
Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])->middleware('auth:sanctum');

Step 5: Update Controllers

Modify the RegisteredUserController and AuthenticatedSessionController to return JSON responses.

RegisteredUserController.php

namespace App\Http\Controllers\Auth;

use App\Models\User;
use Illuminate\Auth\Events\Registered;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules;
use App\Http\Controllers\Controller;

class RegisteredUserController extends Controller
{
    public function store(Request $request)
    {
        $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'confirmed', Rules\Password::defaults()],
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        event(new Registered($user));

        $token = $user->createToken('auth_token')->plainTextToken;

        return response()->json([
            'access_token' => $token,
            'token_type' => 'Bearer',
            'user' => $user
        ]);
    }
}

AuthenticatedSessionController.php

namespace App\Http\Controllers\Auth;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Controller;

class AuthenticatedSessionController extends Controller
{
    public function store(Request $request)
    {
        $request->validate([
            'email' => ['required', 'string', 'email'],
            'password' => ['required', 'string'],
        ]);

        if (!Auth::attempt($request->only('email', 'password'))) {
            return response()->json(['message' => 'Invalid login credentials'], 401);
        }

        $user = Auth::user();
        $token = $user->createToken('auth_token')->plainTextToken;

        return response()->json([
            'access_token' => $token,
            'token_type' => 'Bearer',
            'user' => $user,
            'status' => 'Login successful',
        ]);
    }

    public function destroy(Request $request)
    {
        $request->user()->currentAccessToken()->delete();

        return response()->json(['message' => 'Logout successful']);
    }
}

Step 5: Run Laravel App

php artisan serve

Step 6: Check following API

Test Your API with Thunder Client

DEV Community: John Maths

How to Implement "Login with Google" in Laravel 11

Prerequisites

Step 1: Set up Google OAuth Credentials

Step 2: Install Laravel Socialite

Step 3: Configure Socialite

Step 4: Set up Routes

Step 5: Create GoogleController

Step 6: Update User Model

Step 7: Add Google ID to Users Table

Step 8: Add Login Button

How to Implement "Login with Facebook" in Laravel 11

Prerequisites

Step 1: Create a Facebook App

Step 2: Install Laravel Socialite

Step 3: Configure Socialite

Step 4: Set up Routes

Step 5: Create FacebookController

Step 6: Update User Model

Step 7: Add Facebook ID to Users Table

Step 8: Add Login Button

Using Queues and Jobs in Laravel 11: A Practical Guide

Step 1: Set Up the Database for Queues

Step 2: Configure the Queue Driver

Step 3: Create a Job

Step 4: Implement the Job

Step 5: Create the Email Template

Step 6: Dispatch the Job to the Queue

Step 7: Run the Queue Worker

How to upload Project on GitHub: A Step-by-Step Guide

Step 1 : Open your Github account

Step 2 : Click on new repository

Step 3 : Fill out the repository details

Step 4 : Click "Create repository"

Step 5 : Open Cmd and Navigate to your project directory

Step 6 : tpye "git init" and hit enter

Step 7 : tpye "git add . " and hit enter

Step 8 : tpye 'git commit -m "anything" ' and hit enter

Step 9 : Copy the repository URL After creating the repository

Step 10 : tpye "git remote add origin https://github.com/yourusername/your-repo.git" and hit enter

Step 11 : tpye "git push -u origin main" and hit enter

How to Build an API with Laravel Breeze in Laravel 11

How to Build an API with Laravel Breeze in Laravel 11

Step 1: Install Laravel

Step 2: Install Laravel Breeze

Step 3: Configure the Database and Run Migrations

Step 4: Create Authentication Endpoints

Step 5: Update Controllers

Step 5: Run Laravel App

Step 6: Check following API

Step 5: Create `FacebookController`