Please help - OAuth in React-Native not working

[vkp33]

Hi there, I'm currently a student working on a side project utilizing Spotify's api through spotify-api-web-node. I've pretty much been following this tutorial exactly (https://medium.com/javascript-in-plain-english/react-native-full-authentication-flow-with-spotify-bc...) to figure out how authentication works but after many hours of struggling I figured it would be easier to ask for help. Additional things to note are that I'm using react-native-app-auth and I'm developing in react-native for Android.

So far, my app requests permissions from the user's account but I keep receiving this error code after giving permissions:

"Something went wrong { [WebapiError: Bad Request] name: 'WebapiError', message: 'Bad Request', statusCode: 400 }". 

I know that to trigger this response a request with a code is being sent (not a refreshtoken). 

My response url is: 

https://accounts.spotify.com/en/authorize?redirect_uri=com.clientdemo:%2Foauthredirect&client_id=c53...

I suspect that the issue has to do with the additional query parameters "code_challenge" and "code_challenge_method" but I'm not 100% sure. 

Please let me know if you need any additional information at all. Pretty much all the code is provided in the link at the top since I've just been following along but I'm also happy to put snippets online if it's too much effort to parse through the article.

[4ek-_v682hnvb]

Can you post your build.gradle file?

[PhilosophicalProf]

Hallo zusammen!
Die von Ihnen erwähnte Fehlermeldung deutet darauf hin, dass es möglicherweise ein Problem mit der von Ihnen gesendeten Anfrage gibt. Ausgehend von Ihrer Beschreibung **bleep** es, dass der Fehler ausgelöst wird, wenn eine Anforderung mit einem Code anstelle eines Aktualisierungs-Tokens gesendet wird.
Sie haben erwähnt, dass Sie react-native-app-auth verwenden und einem Tutorial für den Authentifizierungsfluss mit der API von Spotify folgen. Es ist möglich, dass das Problem in den zusätzlichen Abfrageparametern "code_challenge" und "code_challenge_method" liegt, die Sie erwähnt haben. Diese Parameter werden normalerweise für die PKCE-Authentifizierung (Proof Key for Code Exchange) verwendet.
Um das Problem zu beheben, können Sie einige Schritte unternehmen:
1) Überprüfen Sie Ihre Implementierung anhand des Tutorials und stellen Sie sicher, dass Sie alle Schritte korrekt ausgeführt haben.
2) Überprüfen Sie, ob die von Ihnen angegebene "redirect_uri" mit der in den Einstellungen Ihrer Spotify-Anwendung angegebenen übereinstimmt. Sie sollte das folgende Format haben: "com.clientdemo:/oauthrect".
3) Überprüfen Sie, ob die Parameter "code_challenge" und "code_challenge_method" gemäß der Anleitung korrekt gesetzt sind. Stellen Sie sicher, dass sie generiert und in die Autorisierungsanfrage aufgenommen werden.
4) Vergewissern Sie sich, dass Ihre Spotify-Anwendungseinstellungen richtig konfiguriert sind, einschließlich der zulässigen Redirect-URIs und anderer erforderlicher Einstellungen.
Wenn das Problem weiterhin besteht, wäre es hilfreich, wenn Sie uns Ausschnitte aus Ihrem Code zur Verfügung stellen, die für den Authentifizierungsprozess relevant sind. So können wir Ihre Implementierung besser verstehen und mögliche Fehler identifizieren.
Sie können uns gerne zusätzliche Informationen oder Codeschnipsel zur Verfügung stellen, und als React-Entwickler unserer Agentur werde ich Ihnen gerne weiterhelfen. Viel Erfolg mit Ihrem Projekt!