DEV Community: Siddhu

API Authentication via Social Networks in Laravel 9 using Sanctum with Socialite

Siddhu — Sat, 16 Oct 2021 16:01:04 +0000

Laravel Sanctum with Socialite

Earlier I have written, How to use Laravel Sanctum and user authentication using API

Now, I'm going to add social logins using via API.

In this example, I'll show you how to integrate Laravel Sanctum authentication with social networks via Facebook, Google and GitHub.

Make sure, you have already installed Laravel Sanctum if not follow this article and then come here.

Laravel Socialite Configuration

STEP1: Install socialite package

composer require laravel/socialite

STEP2: Config socialite

You need to add all social config details to config\services.php file. As I shown below



'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => 'GITHUB_REDIRECT_URI',
],
'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => 'FACEBOOK_REDIRECT_URI',
],
'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => 'GOOGLE_REDIRECT_URI',
],

STEP3: Get config details from OAuth services providers

Now, You need to get CLIENT_ID and CLIENT_SECRET from respective social developer accounts, Here I provided the following links

GitHub https://github.com/settings/developers
Google https://console.developers.google.com/apis/dashboard
Facebook https://developers.facebook.com/apps/

It is easy to setup developer account in all social networks, where you can get the CLIENT_ID and CLIENT_SECRET keys. Finally, you need to set call-back URL. After successfully authentication it will send token to that URL.

STEP4: Set config details on your application

You have all CLIENT_ID and CLIENT_SECRET keys, Now add those keys into .env file



GITHUB_CLIENT_ID=XXXXXXXXX
GITHUB_CLIENT_SECRET=XXXXXXX
GITHUB_REDIRECT_URI=http://127.0.0.1:8000/api/login/github/callback

Your GitHub account setting

Similarly add all other OAuth service providers

STEP5: Make password nullable

When you authenticate user with OAuth services, you will receive token not password. So, in our database the password field must be nullable.

Modify password field as nullable in users_table migration file.



public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

STEP6: Create providers table

Now, you have to create another table for providers

php artisan make:migration create_providers_table

In the providers migration file, add this fields



    public function up()
    {
        Schema::create('providers', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('provider');
            $table->string('provider_id');
            $table->bigInteger('user_id')->unsigned();
            $table->string('avatar')->nullable();
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });
    }

STEP7: Create Provider table

Make Provider model

php artisan make:model Provider

open Provider model



<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Provider extends Model
{
    use HasFactory;

    protected $fillable = ['provider','provider_id','user_id','avatar'];
    protected $hidden = ['created_at','updated_at'];
}

STEP8: Add provider relation to user table

Here I have created Providers function on user model



<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;


class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var string[]
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];


    public function providers()
    {
        return $this->hasMany(Provider::class,'user_id','id');
    }
}

STEP9: Add the Routes

Open routes/api.php file add route URL's



Route::get('/login/{provider}', [AuthController::class,'redirectToProvider']);
Route::get('/login/{provider}/callback', [AuthController::class,'handleProviderCallback']);

Add above functions on your controller




<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Hash;
use GuzzleHttp\Exception\ClientException;
use Illuminate\Http\JsonResponse;
use Laravel\Socialite\Facades\Socialite;
use App\Models\User;

class Authcontroller extends Controller
{


    /**
     * Redirect the user to the Provider authentication page.
     *
     * @param $provider
     * @return JsonResponse
     */
    public function redirectToProvider($provider)
    {
        $validated = $this->validateProvider($provider);
        if (!is_null($validated)) {
            return $validated;
        }

        return Socialite::driver($provider)->stateless()->redirect();
    }

    /**
     * Obtain the user information from Provider.
     *
     * @param $provider
     * @return JsonResponse
     */
    public function handleProviderCallback($provider)
    {
        $validated = $this->validateProvider($provider);
        if (!is_null($validated)) {
            return $validated;
        }
        try {
            $user = Socialite::driver($provider)->stateless()->user();
        } catch (ClientException $exception) {
            return response()->json(['error' => 'Invalid credentials provided.'], 422);
        }

        $userCreated = User::firstOrCreate(
            [
                'email' => $user->getEmail()
            ],
            [
                'email_verified_at' => now(),
                'name' => $user->getName(),
                'status' => true,
            ]
        );
        $userCreated->providers()->updateOrCreate(
            [
                'provider' => $provider,
                'provider_id' => $user->getId(),
            ],
            [
                'avatar' => $user->getAvatar()
            ]
        );
        $token = $userCreated->createToken('token-name')->plainTextToken;

        return response()->json($userCreated, 200, ['Access-Token' => $token]);
    }

    /**
     * @param $provider
     * @return JsonResponse
     */
    protected function validateProvider($provider)
    {
        if (!in_array($provider, ['facebook', 'github', 'google'])) {
            return response()->json(['error' => 'Please login using facebook, github or google'], 422);
        }
    }

}

STEP10: Final step, Call the OAuth services URL

In my case I setup everything in my local, open

http://127.0.0.1:8000/api/login/github

After successfully login you will receive

Sometimes routes api url will throw errors, try to use this command php artisan route:clear

Please feel free to ask me anything on this topic!

Laravel Sanctum

Siddhu — Tue, 05 Oct 2021 16:49:40 +0000

I want to build an authentication system for both WEB and Mobile using API. After searching for good framework, Finally I choose Laravel. It is well suited for my requirement and one of the best frameworks, large community and well documented.

In this article, I'll explain step by step flow that how to integrate Laravel Sanctum. Mainly I focus on API base authentication.

Use cases

API Tokens
Web Authentication
You can use both (API Tokens & Web Authentication)

API Tokens

Its generate a simple API token for your user without complication of OAuth. This token have expire very long time (years). All tokens store in single database table and authenticating incoming HTTP requests via the Authorization header which should contain a valid API token.

Web Authentication

Laravel Sanctum will only attempt to authenticate using cookies when the incoming request originates from your own frontend. When you call HTTP request, it will first check for an authentication cookie and, if none is present, Sanctum will then examine the Authorization header for a valid API token.

You can use both (API Tokens & Web Authentication)

It's okay to use single service either API Tokens or Web Authentication, it doesn't mean that you should mandatory use both services. You can use anyway based on your requirement.

Laravel installation

composer create-project laravel/laravel laravel_sanctum
after installation done, start server to check installation successfully done.
php artisan serve

On the latest version of Laravel has already include Laravel Sanctum.

However, If you are using old version of Laravel, You can do it manually.

In your application's composer.json file does not include laravel/sanctum then add it on composer.json' file and run commandcomposer update` or follow the link instructions Larevel-sanctum.

Database config

Open .env file and add your database details, In my case I'm using MySQL.


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

After database configuration done. Run the command php artisan migrate. it will create a default database tables from Laravel.

Now you should add Sanctum's middleware to your api middleware group at app/Http/Kernel.php.

 protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Next, you should publish the Sanctum configuration and migration files using the vendor:publish Artisan command. The sanctum configuration file will be placed in your application's config directory:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

And it will create migration file for personal access token

Sanctum allows you to issue API tokens / personal access tokens that may be used to authenticate API requests to your application. When making requests using API tokens, the token should be included in the Authorization header as a Bearer token.

To begin issuing tokens for users, your User model should use the Laravel\Sanctum\HasApiTokens trait:

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
}

Create a controller for user authentication

php artisan make:controller Authcontroller

it will AuthController, In the AuthController add the follow lines

Request
use Illuminate\Http\Request;

Response
use Illuminate\Http\Response;

This is for password encrpt
use Illuminate\Support\Facades\Hash;

Your user model
use App\Models\User;

Register User

public function register(Request $request)
{
    $fields = $request->validate([
        "name" => 'required|string',
        "email" => 'required|string|unique:users,email',
        "password" => 'required|string|confirmed'
    ]);

    $user = User::create([
        'name' => $fields['name'],
        'email' => $fields['email'],
        'password' => bcrypt( $fields['password'] ),
    ]);

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

    $response = [
        'user' => $user,
        'token' => $token,
    ];

    return response($response, 201);
}

Login

public function login(Request $request)
{
    $fields = $request->validate([
        "email" => 'required|string',
        "password" => 'required|string',
    ]);

    // Check Email
    $where = ["email"=>$fields['email']];
    $user = User::where($where)->first();

    // Check Password
    if(!$user || !Hash::check($fields['password'], $user->password))
    {
       return response([
           'message' => "Bad credentials"
       ],401);
    }

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

    $response = [
        'user'=>$user,
        'token'=>$token
    ];

    return response($response,201);
}

logout

public function logout(Request $request)
{
    auth()->user()->tokens()->delete();

    $response = [
        'message' => 'logged out'
    ];

    return response($response,201);
}

Now go to routes\api.php and config Public/Protected routes like as shown in below

//Public routes
Route::post('/register', [AuthController::class,'register']);
Route::post('/login', [AuthController::class,'login']);


//Protected routes
Route::group(['middleware'=>['auth:sanctum']], function () {
    Route::post('/logout', [AuthController::class,'logout']);
});

It time to call API's. For this demo I'm using Postman

This request I have sent without post data to check the validations, And you must set the headers otherwise you will encounter with errors. Accept:Application\Json

Let register an User

You are successfully configured Laravel Sanctum :)

In the response you will receive personal access token.

In this response you can notice that we have received token, Use that token for all protected services. You should pass that token in headers as bearer token for Authorization.

I also give an example for Logout.

If you hit protected API without token, That request is unauthorized.

Now I added Bearer token in request, Then I'm successfully logout.

Please feel free to ask me anything on this topic!