Deep Linking with OAuth2 Not Working.

[KevinEdry]

Hey,
I tried to add discord oauth2 login to my react native app, everything worked properly when the redirect URI was setup to my server IP address via "http://myserver:8080/api/discord/callback/",
but when I set the redirect URI to my app "myapp://discord" I got an invalid_grant error.

found out that this error is invoked when the redirect URI isn't exacly the same, so I double and triple checked this and everything was setup properly and still got the error.

Just want to note that we are doing the same thing with Twitch OAuth2 and it works as intended.

[CarsonHoffman]

Could you provide some more context as to the errors you're getting? Since you're getting an invalid_grant I assume you aren't using implicit grant (as that doesn't require a code exchange); are you using a traditional authorization_code flow with an embedded secret or PKCE? Discord doesn't document the latter, but in the issue that spawned this one (#450) it seems to be supported and possibly required to support custom schemes.

[night]

Yes. To use custom schemes with authorization_code you must use PKCE.

[codebeaulieu]

@night Could I get an example of what this PKCE param looks like? I've sought out examples online but each one looks a bit different. What does discord expect for a parameter?

Reading through this resource:
https://auth0.com/docs/api-auth/tutorials/authorization-code-grant-pkce

Does Discord use the same parameter naming conventions?

edit: for future readers, they do follow naming conventions. I got this working by following the instructions in the link above.

[msciotti]

@codebeaulieu If you'd like to PR an addition to the docs with this info that'd be great—otherwise I can add it to a TODO backlog!

[Ron-SSG]

@codebeaulieu I'm trying to do exactly as it says and am still getting error: 'invalid_grant' , would you mind adding your example here?

By the way, sending the same request via POSTMAN does return the auth_token, that's why I'm so confused.

[Ron-SSG]

Figured it out, it was because i was using node-fetch to try and make an x-www-form-urlencoded request. It kept failing, but when i used request it worked, so after taking a second look at the node-fetch's docs i realized i should have used URLSearchParams() so here is what i did:

	const options = {
		method: 'POST'
	};

	let params = new URLSearchParams();
	params.append('client_id', myDiscordAppClientId);
	params.append('client_secret', myDiscordAppSecret);
	params.append('code', myCode);
	params.append('grant_type', 'authorization_code');
	params.append('scope', myScope);
	params.append('redirect_uri', myDiscordAuthEndpoint);
	params.append('code_verifier', myVerifier);
	options.body = params;

	await fetch('https://discordapp.com/api/oauth2/token', options)
		.then(response => {
			console.log(response.json());
		})
                .catch(error => {
			console.log(`So... this just happen: ${error}`);
		});

Hope this helps someone :)

[Batuu13]

guess this is just to get the token directly, how do I just get the "auth code" from react native client? I want to let user login and redirect back to my app using custom schema and then get the token via my server so I shouldn't need PKCE right? But I still get "invalid_grant" error.

the endpoint I use is this: https://discordapp.com/api/oauth2/authorize?client_id=${ discordApp.CLIENT_ID }&redirect_uri=${discordApp.oauth.REDIRECT_URI}&response_type=code&scope=${ discordApp.oauth.SCOPE }

[isaacmsl]

@Ron-SSG Your last example help me a lot. I'm using GetServerSideProps on Next Page and its really help me. Thanks!

My example:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const accessCode = String(context.query.code)

  const payload = new URLSearchParams()

  payload.append('client_id', process.env.DISCORD_CLIENT_ID)
  payload.append('client_secret', process.env.DISCORD_CLIENT_SECRET)
  payload.append('grant_type', 'authorization_code')
  payload.append('redirect_uri', process.env.DISCORD_REDIRECT_URI)
  payload.append('code', accessCode)
  payload.append('scope', 'identify')
  
  const authRes = await fetch('https://discord.com/api/v8/oauth2/token', {
    method: 'POST',
    body: payload,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  })
}