Adding Twitter Authentication to a Laravel Website

With social authentication, users do not have to fill out forms in order to register on your website; they also do not need to remember another password in other to access their accounts on your website. This article will provide a step-by-step process to add Twitter authentication to your website

Assumptions:

This tutorial assumes that you have PHP and Composer installed on your computer. It also uses XAMPP’s Apache and MySQL installations. It is therefore assumed that the reader is familiar with XAMPP. Visit the Composer and XAMPP websites to download them.

1. Create a new Laravel project

composer create-project laravel/laravel social-auth

2. Configure your database setup

  1. Create a new database called “social-auth” in phpMyAdmin
  2. Edit your .env file with the appropriate details as shown below

3. Setup your basic authentication system with Laravel Breeze

To setup Laravel Breeze, run the following lines in the order they appear on your command line:

composer require laravel/breeze --devphp artisan breeze:installnpm installnpm run devphp artisan migrate

Running the following lines in your browser

4. Install Laravel Socialite and add providers and aliases in your config file

composer require laravel/socialite

In your config/app.php, add Socialite to your providers and aliases arrays thus:

....
....
'providers' => [
....
....
Laravel\Socialite\SocialiteServiceProvider::class,
],
'aliases' => [
....
....
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],
....
....

5. Create a new Twitter app

  1. Click the “Register new app” button

2. Click the “Apply” button to apply for a Twitter developer account.

3. For the next page I’m picking “Hobbyist”. Feel free to choose whichever describes you best. For the sub-options, I’m choosing “Exploring the API”. After picking the appropriate options, click the “Get started” button.

4. The next page asks for personal details about you. You can go ahead and fill the form provided and click next.

5. Fill out the form on the next page which is about intended use. Click “next” when you’re done.

6. On the next page, review the information you have provided and click the “next” button.

7. Review the developer agreement & policy on the next page, agree to it and submit your application.

8. A verification email will be sent to your email. Clicking the “confirm account” link will bring you to a new page. Follow the images shown below to create a new project.

9. Navigate to the social-auth project and create a new app by click the “add app” button.

10. Provide your app name.

Your API key and secret will be available on this page.

Add a Twitter entry to your config/services.php file.

return [
....
....
....
'twitter' => [
'client_id' => env('TWITTER_CLIENT_ID'),
'client_secret' => env('TWITTER_CLIENT_SECRET',
'redirect' => env('TWITTER_CLIENT_REDIERECT',
],
]

Add the following to your .env file

TWITTER_CLIENT_ID="Your Twitter app id"
TWITTER_CLIENT_SECRET="Your Twitter client secret"
TWITTER_CLIENT_REDIERECT="http://localhost:8000/auth/twitter/callback"

11. Click the settings button for the “social-auth” card in your Apps section

12. Next click the edit button next to “Authentication settings”

13. Click the toggle button to enable 3-legged OAuth. Paste your callback url from your .env file. http://localhost:8000 is not considered a valid website url here so we use http://google.com . Feel free to use whatever you want.

6. Add a “twitter_id” column to your “users” table

php artisan make:migration add_twitter_id_to_users_table

Make the following changes to the file created.

Run the following line to update your database

php artisan migrate:refresh

7. Make the email property nullable in your users table

After that run the following in your command line to reflect the change in your database.

php artisan migrate:fresh

8. Setup your Twitter authentication routes

use App\Http\Controllers\SocialController;//Twitter Authentication RoutesRoute::get('auth/twitter', [SocialController::class, 'twitterRedirect'])->name('login.twitter');Route::get('auth/twitter/callback', [SocialController::class, 'twitterCallbackcontroller to handle the routes

Run the following line on your command line to create a controller to handle social authentication.

php artisan make:controller SocialController

Define twitterRedirect() and twitterCallback() methods as shown below:

9. Add Twitter login link to your registration and login pages

<div class="flex items-center justify-center mt-4">
<a href="{{ route('login.twitter') }}" class="underline text-sm text-gray-600 hover:text-gray-900">
Login With Twitter
</a>
</div>

10. Voila! You are done !!