Twitter Authentication using Supabase + React + Redux + Typescript
Tags: tutorial, react, typescript, redux
Published: 2021-12-30 16:22:43

---
title: Twitter Authentication using Supabase + React + Redux + Typescript
published: true
description: 
tags: #tutorial #react #typescript #redux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swp46lt1cg2ikwsi05xx.png
series: 
---

As the title of this post suggests, we're going to be building a small React + Redux app that'll allow your users to authenticate using their twitter credentials and access __auth-only__ parts of the app.

The code for this tutorial can be found [here](https://github.com/danstanhope/supabase-twitter-authentication). Go ahead and clone that and get it running using __yarn update__ and __yarn start__

Unfortunately, there's a bit of boring setup & config stuff we'll have to walk through in order to get this working for you. So bear with me and we'll get this going, I promise(If I missed something, let me know and I'll help you work through it).

### Step 1: Twitter + Supabase Setup

Head over to Supabase and grab your project's api url(__settings ->api->config->url__) and append __/auth/v1/callback__ to it. This is going to form the callback url we provide to Twitter, it'll look something like this: __https://<project-ref>.supabase.co/auth/v1/callback__

#### Twitter

Make your way over to https://developer.twitter.com/ and create a new project. Once you've filled everything out, make sure to keep your API key & secret(used as client_id and client_key in Supabase). 

Next, you'll need to create an app. When you've done that, you'll need to enable 3rd party authentication -- this is where we'll add our callback url.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n33xw683v9k3a69fq26p.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1bufsgiiv6xnlu07npu.png)

Be sure to add the localhost url to the callback section. For any of the remaining, required url fields just put your app url in for now.

#### Supabase

Under settings on the authentication tab enter the site url as well as our localhost callback url. A picture is worth a thousand words...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbuzwb86plpf3d6l4jsl.png)

Next, enable Twitter authentication and enter your Twitter creds.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtnhoeatti7dxefp511a.png)

Geez, hopefully that wasn't too painful and I haven't lost too many people. If we did this correctly, the boring config stuff is over. Woot woot!


### Step 2: Code walkthrough

First thing is first, you'll need to make a couple changes to the __env.development__ file. Most importantly, adding your Supabase anon key(__settings ->api->project api keys
->anon public__).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ots5fk9l8selqcaopbve.png)

The project is a pretty standard React + Redux app(styled with Tailwind). The most important part to take note of is how we're protecting the pages of our app that require the user to be authenticated. Take a look at __src->pages->PrivateRoute.tsx & src->App.tsx__ and you'll be able to see how the PrivateRoute component ensures that only authenticated users can access certain pages.

####PrivateRoute.tsx

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bllh7rcmmj8d7za3hw6h.png)

####App.tsx

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b87v9fpbel325g4oghx4.png)

After running our yarn commands, you should have a page open that looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1o82lle47ysxui5xy8g.png)

If everything is setup properly, after clicking the sign in button you'll be sent to Twitter to enter your credentials and sent back to our dashboard page.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5j2aivp3rmkda2sfiix.png)

Hope this helps someone get started with Supabase authentication. As an aside, you could easily port this project over to Firebase or Amplify authentication with few code changes. There would be a bunch more super-fun setup and config for you to do though :)

If you get stuck or have any feedback, let me know!

Thanks for reading.