NextJS - get url in getServerSideProps

Question

I'm using nextJS and I'm having a hard time getting the full URL from a redirect.

I'm doing an oauth flow from Twitch and after authenticating, Twitch redirects back to my Next app on a URL like http://localhost:3000/auth/twitch/ - they include a bunch of extra data on that redirect url e.g. http://localhost:3000/auth/twitch/callback#access_token=4kfdiopdsjendc539c9234&scope=user_read&token_type=bearer

/pages/auth/callback.js

export async function getServerSideProps(context) {
  console.log(context);
  return {
    props: {},
  };
}

I'm trying to get the queryparams (e.g. access_token) from the redirect has but since Twitch append it onto my redirect url with a #, nothing inside of context seems to detect it.

I know if I manually change the # in the browser to a ? then context.query works. Problem is, I can't dictate how Twitch attack their data to the URL.

How can I access the query params?

score 4 · Accepted Answer · answered Apr 13 '20 at 04:42

This is a safety feature from Twitch (and many other OAuth providers). From the docs:

The access token is in the URL fragment, not the query string, so it will not show up in HTTP requests to your server. URI fragments can be accessed from JavaScript with document.location.hash.

As it says, URL fragments are not sent to the server and hence cannot be accessed from getServerSideProps. Instead you can use one of the client side callbacks like useEffect or componentDidMount.

NextJS - get url in getServerSideProps

1 Answers1