AngularStack Facebook, Google+ and Twitter Authentication - angularjs

Question

I am making my first Web App using Generator Angular Fullstack. I went through the project initialization here: https://github.com/DaftMonk/generator-angular-fullstack
During initialization I set up oAuth for the following: Facebook, Google+, Twitter
I am using Openshift as well, and after initializing the project... I used the steps to add it to openshift. This included setting up environment variables for RHC for Facebook, Google+ and Twitter authentication. I added these as well.
However, with my new app... I cannot create a new account with Facebook, Google+ or Twitter.
When I create new account these are the errors I get:
Facebook:
Invalid App ID: id
Google+:
401. That’s an error.
Error: invalid_client
The OAuth client was not found.
Request Details
scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email
response_type=code
redirect_uri=http://site.rhcloud.com/auth/google/callback
client_id=id
That’s all we know.
Twitter:
Internal Server Error
I haven't done much besides go through the tutorial so far. But I feel I missed something. Any help on this topic would be grea.t Thanks :)

Answer 1

Well, first of all you have to configure your clientIDs, clientSecrets and callBackURLs. These you will need to find on each oAuth provider's developer platform page. i.e. for Facebook this would be: https://developers.facebook.com/apps/
These can be placed in the local.env.js file (a sample is included, like this:
module.exports = {
DOMAIN: 'http://localhost:9000',
SESSION_SECRET: "xxxxxxxxxxxxx",
FACEBOOK_ID: 'xxxxxxx',
FACEBOOK_SECRET: 'xxxxxxx',
TWITTER_ID: 'xxxxxxx',
TWITTER_SECRET: 'xxxxxx',
GOOGLE_ID: 'xxxxxxx',
GOOGLE_SECRET: 'xxxxxxx',
.....
};

Answer 2

When deploying to Heroku don't forget to set the DOMAIN config variable with http/https prefix when using Google+ sign-in.
heroku config:set DOMAIN=http://<your app name>.herokuapp.com
Otherwise you will get a redirect_uri_mismatch. If this ends with an internal server error you probably need to enable the Google+ API in the Google developer console.

Answer 3

If you have obtained your provided ID and SECRET keys and you are still having difficulty with OpenShift as I did ... I found setting environment variables for the application did the trick for me.
Google for example:
rhc set-env -a GOOGLE_ID=
rhc set-env -a GOODLE_SECRET=
The module exports in local.env.js worked fine for me when I was developing locally but didn't when I pushed my app to OpenShift via grunt buildcontrol