• Sanctum with Socialite

    Sanctum with Socialite: API Authentication via Social Networks in Laravel 8


    Social network authentication is now an essential part of many web application as it saves the users a lot of time, as they won’t need to fill the whole form. They just sign up with their social account and next time they can log into the website by a single click.

    In this post, I will show you how easily we can integrate sanctum authentication with social networks via google, facebook, github, etc. with same piece of code.

    You can view the source code here.

    Lets get started …

    Laravel Sanctum provides a featherweight authentication system for SPAs (single page applications), mobile applications, and simple, token based APIs. Sanctum allows each user of your application to generate multiple API tokens for their account. These tokens may be granted abilities / scopes which specify which actions the tokens are allowed to perform.

    Install sanctum package:

    composer require laravel/sanctum

    Then, publish the configuration file of sanctum. The sanctum configuration file will be placed in your config directory:

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

    In User Model(app/models/user.php), add HasApiTokens Traits.

    user model

    Laravel also provides a simple, convenient way to authenticate with OAuth providers using Laravel Socialite. Socialite currently supports authentication with Facebook, Twitter, LinkedIn, Google, GitHub, GitLab and Bitbucket.

    Install socialite package:

    composer require laravel/socialite

    Then add credentials for the OAuth services your application utilizes. These credentials should be placed in your config/services.php configuration file, and should use the key equals to provider name (e.g., facebookgooglegithub etc.)

    env file

    If you want to use a provider that is not provided in Socialite by default take a look on Socialite Providers.

    We can easily setup developer account and get client id and client secret from respective OAuth provider. Here are few links of OAuth providers:

    GitHub: https://github.com/settings/developers

    Google: https://console.developers.google.com/apis/dashboard

    Facebook: https://developers.facebook.com/apps/

    In OAuth Service provider, Redirect URI is to be added. A redirect URI, or reply URL, is the location where the authorization server sends the user once the app has been successfully authorized and granted an authorization code or access token. Note: For Facebook, https callback url is required. Therefore, we need to set local environment accepting https.

    As you get credentials from OAuth Services, add client_id, client_secret and redirect_uri in your .env file for your OAuth service:

    add in env file

    We need to make few changes in users table migration before running migration. Password field should be made nullable as we will not require password column.

    User table migration

    Create a providers table to store OAuth service provider information:

    Socialite Provider table migration

    Run all migrations:

    php artisan migrate

    Make model for the providers table created:

    php artisan make:model Provider
    Provider Model

    Once provider model is created. User model is related with provider model by creating providers function.

    User Model

    Define the routes in api.php


    Make LoginController.php:

    php artisan make:controller LoginController

    Next, one route for redirecting the user to the OAuth provider, and another for receiving the callback from the provider after authentication. We will access Socialite using the Socialite facade:

    Login Controller

    The user method will read the incoming request and retrieve the user's information from the provider. Then we store only necessary user information to the database. With the help of sanctum, Bearer token is generated.

    php artisan serve

    Now, Paste and go http://localhost:8000/api/login/github in your browser.

    Then, add your credentials:

    Github redirected page

    After user is authenticated, we get the following response with Access-Token in its header:

    request with response headers
    response of payload


    We have successfully implemented API authentication via social login in Facebook, Twitter, and Google using Socialite . Now you could easily add other providers like Twitter, GitLab, etc and work like a charm.



    Post a Comment


    Kathmandu, Nepal