Google Social Connect: Redirect URI mismatch error

Scenario:

I have setup Google Social Connect on a website. When I try to login through Google Social Connect, I get the following 404 error stating:

Error: redirect_uri_mismatch
The redirect URI in the request: http://MY-WEBSITE-URL/socialconnect/google/connect/ did not match the registered redirect URI.

Cause:

A possible cause for such kind of error is mismatch of URL between your website’s actual URL and the URL present in Authorized redirect URIs field in Google Developer Console settings.

This kind of error occurs if one URL has www (http://www.example.com) in it and the other URL is non-www (http://example.com). Or, even with the trailing slash (/) (http://example.com/) and non trailing slash (http://example.com) URL.

Solution:

To solve this issue, the two URLs (your site’s actual URL and the URL present in the Authorized redirect URIs settings) should be exactly the same.

Here is the step-by-step procedure to go to Authorized redirect URIs settings in Google Developer Console.

1. Go to https://console.developers.google.com

2. Select your Project

1. Click on the menu icon

1. Click on API Manager menu

1. Click on Credentials menu. And under OAuth 2.0 Client IDs, you will find your client name. In my case, it is Web Client 1. Click on it and a popup will appear where you can edit Authorized Javascript Origin and Authorized redirect URIs.

Here is a google developer console’s article about creating project and client ID.

Hope this helps.
Thanks.