Authentication doubts

Hello
I’m doing a client (VueJs) - server (NodeJs + Express) application. I am using the Helix API and the OAuth Flow Authorization Code.
In the client I have an a tag which href is the following url:

http://localhost:8080/ is my client url

https://id.twitch.tv/oauth2/authorize
    ?client_id=<your client ID>
    &redirect_uri=http://localhost:8080/
    &response_type=code
    &scope=<space-separated list of scopes>

When I click the a tag my client reloads and I get the following url:

http://localhost:8080/?code=<authorization code>

I have another button to pick up the URL code parameter and make a call to my own API, which makes the following POST request and is responsible for loging the user and returning the access_token to the client.

POST https://id.twitch.tv/oauth2/token
    ?client_id=<your client ID>
    &client_secret=<your client secret>
    &code=<authorization code received above>
    &grant_type=authorization_code
    &redirect_uri=http://localhost:8080/

This was done on two buttons because I am testing the Twitch API.
Am I doing it right?
I’m stuck. How do I do both steps in a single button/user click?

Since your server is using Express, when Twitch sends the user back to your redirect URL you can just access the code querystring param in your handler for that route and do the remaining steps of the auth process, before redirecting the user to their intended page.

What you may want to do is use a separate route for the callback, so rather than http://localhost:8080 you might use http://localhost:8080/twitchAuth and then have a route for /twitchAuth that takes the code express provides in req.query, makes the POST request to get the access_token, and then redirects the user back to the default route for your site.

1 Like

I was doing it wrong because I set as redirect_uri my client url instead of my api url.

Thank you very much!!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.