Laravel 5.5 Socialite : Login with Twitter, Facebook, Google, Github, Linkedin etc #Part1

Laravel 5.5 Socialite twitter, facebook, google, github, linkedin login or register in laravel 5.5

Laravel 5.5 tutorial for beginners, this lesson will show you how to create simple login or register with social media like twitter, facebook, Google, Github, Linkedin etc using socialite package in Laravel 5.5.


Video Tutorial Laravel 5.5 Socialite Login with Twitter 




Create Project Socialite Login/Register with Twitter

composer create-project laravel/laravel socialitelogin

Create Database and setup connection to the Laravel prjoect.

next we need to use Laravel Authentication, please run this artisan command,

php artisan make:auth

Next, run Laravel migration

php artisan migrate

There are many different sites and packages which you can integrate on your site to provide social login functionality. Laravel has released its own package name Socialite which you can use in your projects. Currently socialite support following social logins:
  1. Facebook
  2. Twitter
  3. LinkedIn
  4. Github
  5. Google

Installing and Setting Up Socialite

Now in your laravel project run the following command to install Laravel Socialite.

composer require laravel/socialite

Once the package is installed open 'app/config.php' file and add the following line in providers array.

Laravel\Socialite\SocialiteServiceProvider::class,

Now add the following line in aliases array.

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Now Socialite is setup in your app. Let’s now handle our Login controller to handle social login request.

Modifying LoginController

In this tutorial I am keeping in mind that you have created an auth system using laravel auth command. Now open ‘app/Http/Controllers/Auth/LoginController.php’ file. Now add the following methods in it.

<?php
namespace AppHttpControllersAuth;
use AppHttpControllersController;
use IlluminateFoundationAuthAuthenticatesUsers;
use Socialite;
use AppUser;
use Auth;

class LoginController extends Controller
{
    use AuthenticatesUsers;
    protected $redirectTo = '/home';
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    public function socialLogin($social) {
      return Socialite::driver($social)->redirect();
    }

    public function handleProviderCallback($social){
      $userSocial = Socialite::driver($social)->user();
      $user = User::where(['email' => $userSocial->getEmail()])->first();
      if ($user) {
        Auth::login($user);
        return redirect()->action('HomeController@index');
      } else {
        return view('auth.register', ['name' => $userSocial->getName(),'email'=> $userSocial->getEmail()]);
      }
    }
}

Creating Routes for Social Login in Laravel

Now open routes/web.php file and add the following routes in it.

<?php

Route::get('/', function () {
    return view('welcome');
});
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
Route::get('/login/{social}','AuthLoginController@socialLogin')
        ->where('social','twitter|facebook|linkedin|google|github');
Route::get('/login/{social}/callback','AuthLoginController@handleProviderCallback')
        ->where('social','twitter|facebook|linkedin|google|github');

Updating Login Page

For social login buttons I am going to use Social Buttons for bootstrap. Now open resources/views/auth/login.blade.php and add a following div in form after csrf field.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Login</div>

                <div class="panel-body">
                    <form class="form-horizontal" method="POST" action="{{ route('login') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>

                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Forgot Your Password?
                                </a>
                            </div>
                        </div>

                        <div class="form-group">
                          <label class="col-md-4 control-label">Or login with</label>
                          <div class="row">
                          </div>
                          <div class="col-md-8 col-md-offset-2">
                            <a href="{{ url('login/twitter') }}" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>
                            <a href="{{ url('login/facebook') }}" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
                            <a href="{{ url('login/google') }}" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i> Google</a>
                            <a href="{{ url('login/linkedin') }}" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i> Linkedin</a>
                            <a href="{{ url('login/github') }}" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i> Github</a>
                          </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Updating Register Page

In register page we need to do two things. First we need to add Social Login Buttons and second we need to handle the user data comes from social logged in. First add the following div after csrf field.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Register</div>

                <div class="panel-body">
                    <form class="form-horizontal" method="POST" action="{{ route('register') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                            <label for="name" class="col-md-4 control-label">Name</label>

                            <div class="col-md-6">

                                @if(!empty($name))
                                  <input id="name" type="text" class="form-control" name="name" value="{{ $name }}" required autofocus>
                                @else
                                  <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
                                @endif

                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">

                                @if(!empty($email))
                                  <input id="email" type="email" class="form-control" name="email" value="{{ $email }}" required>
                                @else
                                  <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>
                                @endif
                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Register
                                </button>
                            </div>
                        </div>

                        <div class="form-group">
                          <label class="col-md-4 control-label">Or Register with</label>
                          <div class="row">
                          </div>
                          <div class="col-md-8 col-md-offset-2">
                            <a href="{{ url('login/twitter') }}" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>
                            <a href="{{ url('login/facebook') }}" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
                            <a href="{{ url('login/google') }}" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i> Google</a>
                            <a href="{{ url('login/linkedin') }}" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i> Linkedin</a>
                            <a href="{{ url('login/github') }}" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i> Github</a>
                          </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Setting Up Twitter Sign-in

You must have an twitter acount before, then go to this url http://apps.twitter.com and create new Application


Now open config/services.php file and add the following line in it.

'twitter' => [
      'client_id' => 'TrGmxtiFvMVQdghQOkAlTtVe',
      'client_secret' => 'Iz2LybMy67fV4wwHw25UPzmnXcBQYxTfjGw4sK71Q0RRsRtZh5',
      'redirect' => 'http://127.0.0.1:8000/login/twitter/callback'
    ],

More Laravel Video Tutorial :




See you next lessons ...

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Laravel 5.5 Socialite : Login with Twitter, Facebook, Google, Github, Linkedin etc #Part1
Laravel 5.5 Socialite : Login with Twitter, Facebook, Google, Github, Linkedin etc #Part1
Laravel 5.5 Socialite twitter, facebook, google, github, linkedin login or register in laravel 5.5
https://3.bp.blogspot.com/-__68rXerv9E/WlZbLiQ2uOI/AAAAAAAADFo/rkxuPmD2B0gj3A7MR_FWtGx_7n91uznbgCLcBGAs/s320/laravel%2Blogin%2Bwith%2Btwitter.jpg
https://3.bp.blogspot.com/-__68rXerv9E/WlZbLiQ2uOI/AAAAAAAADFo/rkxuPmD2B0gj3A7MR_FWtGx_7n91uznbgCLcBGAs/s72-c/laravel%2Blogin%2Bwith%2Btwitter.jpg
KODE AJAIB
https://www.kodeajaib.com/2017/11/laravel-55-socialite-login-with-twitter.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2017/11/laravel-55-socialite-login-with-twitter.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy