Github oauth callback url is adding query string before hash

Question

I'm trying to implement Oauth (using Github) in a Vue project and when my callback url gets called from github it's appending the query string ?code=something before the hash from the url.

For example if I load https://myapp.com in a browser and click my login link <a href="https://github.com/login/oauth/authorize?scope=user:email&client_id=1234j1234jk&redirect_uri=https://myapp.com/#/something">Login</a> I get redirected to https://myapp.com/?code=asdfasdf#/something which means that this.$route.query is empty.

Being a rookie to both Vue and Oauth, how can I get around this issue so that when my callback gets called it goes to https://myapp.com/#/something?code=asdfadsf so that this.$route.query will contain the code?

score 3 · Accepted Answer · answered Apr 13 '18 at 17:38

3

Github is probably messing things up because of the #. As a workaround you may make Github redirect to another endpoint, say www.yourhost.com/api/v1/redirect-to-home?code=ABCDE (with no # in it), and there you correctly redirect to https://myapp.com/#/something?code=ABCDE.

answered Apr 13 '18 at 17:38

Gabriel

1,922
2
19
37

I've implemented this and it seems to work good. Actually better than I expected as when I get redirected to my backend, I make a call with the code to github to get the access_token and then redirect back to the UI. – Catfish Apr 14 '18 at 18:03
@Catfish Yes, this seems to be the "less hacky" option for me. It adds a degree of indirection into the flow of your program, but it keeps everything simple and relatively easy to understand. – Gabriel Apr 14 '18 at 18:54

Ferrybig · Answer 2 · 2018-04-14T16:42:08.650

Github is doing the correct thing here, because OAuth works with the query part of the url, and doesn't change the anchor.

What you can do is detecting and manually adjusting the url in your boot process, this can be done as follows:

Inside your main bootstrap.js (the file where you do new Vue) file, you can manually detect this anchor, and update the path, before Vue loads.

This can be accomplished by checking window.location from the bootstrap file, and then calling window.location.href.replace to replace the url without an visible redirect:

// getParameterByName from https://stackoverflow.com/a/901144/1542723 
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

const code = getParameterByName('code');
if(code) {
    const l = window.location;
    window.location.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname + '123#' + l.hash + '?code=' + code);
}

Is this how others are handling github oauth in Vue.js apps? Seems kind of hacky. — Catfish, Apr 14 '18 at 18:03
Most people use the ["history"](https://router.vuejs.org/en/api/options.html#mode) mode of Vue Router, while it requires some special configuration on the server side for the paths, you can just access your applications as `https://myapp.com/something?code=asdfadsf` and you can just access `this.$route.query` that way. I assumed there was a reason that you didn't use the history mode — Ferrybig, Apr 14 '18 at 18:07
No reason i didn't use history mode. New to Vue and wasn't aware of it. Also didn't want to have to dink around with my server config just for this. Was hoping it could be solved at the app level — Catfish, Apr 15 '18 at 17:53

Github oauth callback url is adding query string before hash

2 Answers2