Social login is one of the most popular login methods options for users to log into your site. At Hybridauth library, we have an easy way to create social authentication for many providers like Facebook, google, twitter.

In this tutorial, I will show you how to set up Facebook Google, twitter to allow you to add social login into your Hybridauth Codeigniter application.

There are only a few steps to take to enable social identity providers, and in this post, I will walk you through each of these steps.

You can also use this library in any framework or even pure PHP code, also you can use it with many providers not just what I teach here, checkup user guide to see all providers

Follow along with me to quickly get Facebook and Google up and running in your app.

Set Up Facebook Social Login

To allow login from Facebook, there are a few steps we first have to complete.
– Create a Facebook app
– Put (Client ID and Secret) into the HybridAuth config file.

Create a Facebook New app

The first thing you need to do is log into the Facebook Site and create a new Facebook App, You can do this by Visiting the Facebook Developer Site and clicking the “My Apps” menu at the top of the screen,

Then select the “Create a New App” button, and Choose website because we need this social for website login.

 Fill this input by the name of your new app and click Create New Facebook App ID, This is the name that will be used when presenting it to the user who is trying to log in.

The last thing is to pick the category of your application and put your Email for important contacts.

After filling out all the necessary fields, click Create App ID. Facebook will ask you to do a security check, after passing this

The next thing we need to do is tell Facebook what URLs we’ll be using Facebook Login from.

In the “Site URL” box, enter your private and public root URLs. This should be something like http://localhost or http://example.com. If you want to allow Facebook Login from multiple URLs (local development, production, etc.) you can just click the “Add Platform” button again and enter another URL.

Lastly, click the “Save Changes” button to save the changes.

Your settings should now look something like this:

Set Up Google Social Login

Integrating Google Login is very similar to Facebook. You must create an application in the Google Developer Console, then create a Directory in Hybridauth which holds settings for the Google application that you created.

To allow login from Google, there are a few steps we first have to complete.
 

– Create a Google app

– Put your website domain in the Authorized JavaScript origins field.

– Provide this URL as the Callback URL for your application:

– Put (Client ID and Secret) into the HybridAuth config file.

Create a Google New app

The first thing you need to do is log into the Google Developers Console and create a new Google App.

You can do this by visiting the Google Developers Console and clicking the “Create Project” button at the top of the screen

Now, we need to enable the correct API to allow for logging in.

Find “Social APIs” and click on “Google+ API”. On the overview page of the “Google+ API”, click on the blue button “Enable”.

Create Credentials

Click on the “Configure consent screen” and you will be presented with a screen that looks like:

The only field you need to fill out is the Product name. This is what will show you your users on the consent screen after clicking on the login with Google button. Once you fill this out, click “Save” and you will be redirected back to the credentials screen. Once there, click on “Web Application”.

In the Authorized URI’s field, you need to fill in your full authorized URI. As an example, let’s say your domain is http://example.com/         

Authorized JavaScript origins will be http://example.com or http://localhost

AND authorized redirect URI will be

http://example.com/hauth/endpoint?hauth.done=Google

You can also use localhost as a test before production

Authorized JavaScript origins will be http://localhost

AND authorized redirect URI will be

http://localhost/project/hauth/endpoint?hauth.done=Google

Once done, click on the blue “Create” button. Google will then provide you with your OAuth client keys.

   Fixing error "redirect_uri_mismatch" in google API

1-Enable Contacts API and Google+ API in console.developers.google.com
2. Add "redirect_uri"=>"http://localhost/project/hauth/endpoint?hauth.done=google",

To Google array in Hybridauth config file
3. Reset and create new secret key and set this new key in config

Set Up Twitter Social Login

To allow login from Twitter, there are a few steps we first have to complete.
– Create a Twitter app
– Put (Client ID and Secret) into the HybridAuth config file.

Create a Twitter New app

1 - Go to https://apps.twitter.com/ and create a new application.

2 - Fill out any required fields such as the application name and description.

3 - Put your website domain in the Website field.

 NOTE: In localhost, you must use this IP http://127.0.0.1 instead of http://localhost because twitter will not accept localhost and see this error message “The client application failed validation: Not a valid URL format.”

4 - Provide this URL as the Callback URL for your application:

http://127.0.0.1/project/hauth/endpoint?hauth.done=Twitter

Or for production

http://example.com/project/hauth/endpoint?hauth.done=Twitter

5 - Once you have registered, copy and paste the created application credentials (Consumer Key and Secret) into the HybridAuth config file.

Download Full example

you also can follow all steps from this video