(Part 2) Login In or Sign In using Twitter Account

TLDR 🥱!!!

I can’t write that ugly fu*king twitterLoginUrl from down there, just to give you devs a quick TLDR.
I know it sucks, but please, scroll down a bit and grab it from over there. 🙇🏻‍♂️

Prerequisites 📝

You have Client ID and Client Secret for the app you created using your Twitter Developer’s account.
Right now if you’re like “What the fu#k are you on about? 🤨”, then you might wanna go back to the previous part of this series.

A Simple Login Button 🔘

So these are my creds here, hope you have yours too.
Client ID - Ty1yWm02dFA1NDlGb29XZkRIYS06MTpjaQ (only need this one for now)
Client Secret - Sfnbb5PCEVjb8FnDNuLphkrqu4HraQ2TSe_qFf8F5XV4GyqAL5

Let’s Go 🚀.

I’ve created a simple login button :-

and the code is this :-

     <a href={twitterLoginUrl} class="twitter-button">
  <Icon icon="twitter-icon" />
  Log In With X-Force
</a>
  

Full disclosure, I’m using Svelte here (and that’s for a reason to be revealed in Part-3 ), but you can use whatever you want, be it React, Vue, or even Vanilla Pop 🍦.

Twitter Login URL 🌐

Now I know you’ve noticed that twitterLoginUrl variable up there. What the hell is that, right? 🤨

Here’s the kicker, here comes the most bullsh*t part of this entire post 😒 :-

       let state = "anyBullsh*tYouWant";
  let codeChallenge = "anyBullsh*tYouWant";
  const redirectUri = "http://localhost:5173";
  
  const twitterLoginUrl =
    "https://twitter.com/i/oauth2/authorize" +
    `?client_id=${clientId}` +
    `&redirect_uri=${redirectUri}` +
    `&state=${state}` +
    `&code_challenge=${codeChallenge}` +
    "&response_type=code" +
    `&code_challenge_method=plain` +
    "&scope=tweet.read%20tweet.write%20users.read%20follows.read%20follows.write";
  

And here’s the breakdown :-

• client_id - You already know it, check the Prerequisites section.

• redirect_uri - Remember back in Part 1.2 in App Info, there’s a field called Callback URI/Redirect URLs. Yes, it’s the same one.

• state - It’s a random string, you can use anything you want. It’s just a security measure to prevent CSRF attacks.

• code_challenge - It’s a random string too, you can use anything you want. It’s a security measure to prevent code injection attacks.
  But this one’s a bit more special. It’s better if this string is generated by a server and sent to the client. When we generate a Bearer Token in the next part Part-3 ., we’ll see why so. But for now, just use any random string.

• response_type - It’s always code for OAuth 2.0.

• code_challenge_method - It’s always plain for OAuth 2.0.

• scope - It’s the permissions you want from the user, but the maximum perms you can ask for is what you selected over here in Part-2 . You can ask for less, but can’t ask for more perms then what your app is allowed for.
  You can check the Twitter API Docs for more info.

And that’s it 😮‍💨. That ugly looking thing 🤢 is what you need to put in your login button’s or link’s href.

Once a user clicks it, they’ll be sent to the Twitter’s login page, like so :-

And things get interesting once they’ve clicked on this Authorize App button. 😏

The Twitter Auth Code 🤔

Up there in our twitterLoginUrl we’ve set the response_type to code.
This is what we need and this is what twitter gives us on successful login.
In simple terms, this is the cheese 🧀.
When you’re redirected back to your redirect_uri after a successful login, you’ll get a code in the query params, like so :-

Zoom In & Out using scroll wheel, Reset by double clicking

So once you have this …
it basically (kinda sorta) means the user has successfully logged in. 🎉

Now the question is …

• What to do with it? 🤔
• How to use it? 🤔

All this and more in the next part Part-3 , where we learn how to get an Access Token or a Bearer Token from this Auth Code.

Bonus Tip
You can get this code parameter from the url using the following code in your frontend app.

     code = new URLSearchParams(window.location.search).get("code");
  

• If you’re using React, then maybe you can put this in a useEffect hook, so when the user is redirected back to your app, the hook’s code runs and get the code from the url.
• If you’re using Svelte like me, just simply use onMount function.
• If you’re using Vanilla Pop 🍦, then you’re a fu*king legend and you already know what to do. 😎

That’s it!, thanks 🤗 for reading all the way till down here. Now quickly jump to the next part.