AngularJS Google Oauth 400 Error Invalid parameter value for redirect_uri: Fragment not allowed

Question

I am using Kinvey to handle Oauth on my AngularJS app, and it works just fine for Facebook, but when I try to sign in with Google, I am getting a 400 error:

Error: invalid_request

Invalid parameter value for redirect_uri: Fragment not allowed: localhost:9000/#/login

Has anyone ever encountered this issue with Google Oauth and Angular? Any ideas on how I can get around it? The issue stems from the hash in the URL for Angular's routing.

Answer 1

The # is called a fragment identifier. The error Fragment not allowed: means you must replace the # with an alternative, such as:

• localhost:9000/route/login

Then redirect with Kinvey:

req.request({uri: 'http://localhost:9000/route/login',
method: 'GET'},
function(error, response, body){
  response.statusCode = 302; 
  response.setHeader("Location", "/#/login");
  response.end();
  }
);

Here are some unrelated questions with similar issues:

• Redirect to different page url in Node.js (Not in express or other frameworks)
• Redirecting client with NodeJS and Restify
• URI encoding in Yahoo mail compose link
• URL fragment missing from redirect URI
• Why URI-encoded ('#') anchors cause 404, and how to deal with it in JS?