Laravel Twitter OAuth using Socialite Package

Preview:

Step 1: Installation

In first step we will install Socialite Package that provide twitter api to connect with twitter. So, first open your terminal and run bellow command:

composer require laravel/socialite

After install above package we should add providers and aliases in config file, Now open config/app.php file and add service provider and aliase.

'providers' => [
	....
	LaravelSocialiteSocialiteServiceProvider::class,
],
'aliases' => [
	....
	'Socialite' => LaravelSocialiteFacadesSocialite::class,
],

Step 2: Create Twitter App

In this step we need twitter app id and secret that way we can get information of other user. so if you don’t have twitter app account then you can create from here : Twitter App. after open this link you can see button “Create App” after click on it you see like bellow image and you can create your application:

after create account you can copy client id and secret from here :

Now you have to set app id, secret and call back url in config file so open config/services.php and set id and secret this way:

config/services.php

return [
	....
	'twitter' => [
        'client_id' => 'app id',
        'client_secret' => 'add secret',
        'redirect' => 'http://learnl52.hd/auth/twitter/callback',
    ],
]

Step 3: Create Twitter Login

In this step first we have to create migration for add twitter_id in your user table. so le’s craete new migration and bellow column this way:

Migration

Schema::table('users', function ($table) {
    $table->string('twitter_id');
});

After adding twitter_id column first we have to add new route for twitter login. so let’s add bellow route in routes.php file.

app/Http/routes.php

Route::get('twitter', function () {
    return view('twitterAuth');
});
Route::get('auth/twitter', 'AuthAuthController@redirectToTwitter');
Route::get('auth/twitter/callback', 'AuthAuthController@handleTwitterCallback');

After add route, we need to add method of twitter auth that method will handle twitter callback url and etc, first put bellow code on your AuthController.php file.

app/Http/Controllers/Auth/AuthController.php

namespace AppHttpControllersAuth;

use AppUser;
use Validator;
use AppHttpControllersController;
use IlluminateFoundationAuthThrottlesLogins;
use IlluminateFoundationAuthAuthenticatesAndRegistersUsers;
use Socialite;
use Auth;
use Exception;

class AuthController extends Controller
{

    use AuthenticatesAndRegistersUsers, ThrottlesLogins;

    protected $redirectTo = '/';

    public function __construct()
    {
        $this->middleware('guest', ['except' => 'logout']);
    }

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|confirmed|min:6',
        ]);
    }

    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => bcrypt($data['password']),
        ]);
    }

    public function redirectToTwitter()
    {
        return Socialite::driver('twitter')->redirect();
    }

    public function handleTwitterCallback()
    {
        try {
            $user = Socialite::driver('twitter')->user();
            $create['name'] = $user->name;
            $create['email'] = $user->email;
            $create['twitter_id'] = $user->id;
            $userModel = new User;
            $createdUser = $userModel->addNew($create);
            Auth::loginUsingId($createdUser->id);
            return redirect()->route('home');
        } catch (Exception $e) {
            return redirect('auth/twitter');
        }
    }
}

Now add addNew() in User model, that method will check if twitter id already exists then it will return object and if not exists then create new user and return user object. so open user model and put bellow code:

app/User.php

namespace App;

use IlluminateFoundationAuthUser as Authenticatable;

class User extends Authenticatable
{

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

    protected $hidden = [
        'password', 'remember_token',
    ];

    public function addNew($input)
    {
        $check = static::where('twitter_id',$input['twitter_id'])->first();

        if(is_null($check)){
            return static::create($input);
        }

        return $check;
    }
}

Ok, now at last we need to add blade view so first create new file twitterAuth.blade.php file and put bellow code:

resources/views/twitterAuth.blade.php

@extends('layouts.app')

@section('content')
<style type="text/css">
.account-box
{
    border: 2px solid rgba(153, 153, 153, 0.75);
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -o-border-radius: 2px;
    z-index: 3;
    font-size: 13px !important;
    font-family: "Helvetica Neue" ,Helvetica,Arial,sans-serif;
    background-color: #ffffff;
    padding: 20px;
}
.logo
{
    background-position: 0 -4px;
    margin: -5px 0 17px 80px;
    position: relative;
    text-align: center;
    width: 138px;
}
.forgotLnk
{
    margin-top: 10px;
    display: block;
}
.or-box
{
    position: relative;
    border-top: 1px solid #dfdfdf;
    padding-top: 20px;
    margin-top:20px;
}
</style>
<div >
    <div >
        <div >
            <div >
                <div >
                    <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" width="80px" alt=""/>
                </div>
                <form  action="#">
                <div >
                    <input type="text"  placeholder="Email" required autofocus />
                </div>
                <div >
                    <input type="password"  placeholder="Password" required />
                </div>
                <button  type="submit">
                    Sign in</button>
                </form>
                <a  href="http://www.jquery2dotnet.com">I can't access my account</a>
                <div >
                    <div >
                        <div >
                            <a href="{{ url('auth/twitter') }}" >
                                <strong>Login With Twitter</strong>
                            </a>
                        </div>
                    </div>
                </div>
                <div >
                    <div >
                        <div >
                            <a href="http://www.jquery2dotnet.com" >Create New Account</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Ok, now you are ready to use open your browser and check here : URL + ‘/twitter’.