Log In with Twitter OAuth2 with React and NodeJS

hey writings here let's add the guinness twitter to a react app with node.js back end first you'll go to the twitter developer portal and choose oauth2 redirect urls require https so if you want to test everything locally you can use and rock tunnels i didn't do it but instead went straight to the production finally you should set the website url here i have the signings twitter link to open the twitter off page to construct this url i use the get twitter auth url function it adds our app specific parameters to the twitter autoright endpoint here we set the response type take that video client id from environment variables you can find it in the developer portal a path redirect uri from arguments and set scopes the state parameter is a random string you provide to verify against csrf attacks then we have two pkca parameters you can read more on that if you want to provide an extra level of security but twitter or auth will also work if you won't pay attention to them for now we can assign random string to the code challenge parameter the get url with query params helper will convert parameters to an encoded string and will attach it to the base url after the user finishes everything on the twitter page they will appear on the redirect uri it's a page in our react app that will take care of finishing of the authorization flow my app also has other or sign-in options therefore first i will take shared query parameters using the third query parameters function it will get the query scene from the windows location and convert it to an object using query string to object util the provider and destination parameters are specific to my app and i put them as a part of the redirect uri if you have only twitter auth you will extract only code and state parameters after that i query my node.js graphql api to finish identification if everything is alright i should receive agility token with a response send it to local search and i'm good to go my backend is an apollo server and here we have a query for sign interviews oauth first we'll validate the user with the get validate user function it has a record with validators and one of them is validate with twitter twitter provides a typescript sdk and we can take advantage of that first we initialize a client it should have the same scopes we set on the front end to set the code challenge we need to call the generate our url method it's a bit weird but at the moment of recording as a kid doesn't provide any other ways to accomplish that after that we should be able to request our token to validate the user we can call the find my user method which returns information about the user the huge client is the twitter api to does not give access to user email it's a bit crucial for my app so most likely i will not use twitter authorization until they add a way to get the user's email once i validate the user i would use the generate or data util to create a dvt token and set it to the client that's all stay productive

Channel: Radzion Dev

Views: 7,195

Keywords:

Id: btWBQ1YhkDQ

Length: 3min 17sec (197 seconds)

Published: Mon Aug 01 2022