How to add Twitter auth quickly with Supabase to your Next.js site ⚡

How to add Twitter auth quickly with Supabase to your Next.js site ⚡


4 min read

🙋‍♂️Hey there, today we are going to see how to add Twitter auth with Supabase in a Next.js app. Let's get started

Let's get started gif

What we are going to build

Live demo


Creating a new Next.js app

I am going to use tailwind CSS for the basic styling, you can use any framework you want-

npx create-next-app -e with-tailwindcss next-supabase-twitter

Making a Supabase project

Go to Supabase. Click on New Project, it will show you a form with some inputs so fill in the details


Now we need to wait for a few minutes for everything to set up. In the meanwhile, we can set up our Twitter app.

Creating a Twitter app

Go to Twitter developers, if you don't have a developer account then sign up for one otherwise login.

After signing in click on Create App. Then, give your app a name


Click the edit button in Authentication settings. Now we need to enable 3-legged OAuth. So, enable it as well as the Request email address from users option


In callback URL add-


You need to replace with the URL from your supabase project. Follow these steps to get it-

  • Click on the settings icon
  • Select the API tab


  • Now copy the URL


You can paste this URL in the callback URLs


Fill in the rest of the details in the form and hit save.

Enabling Twitter auth in supabase project

Click on the users icon in the sidebar, then go to settings. If you scroll down you will see an option called Twitter enabled, toggle it on. We now need to get the keys from our Twitter app.

So head back to the app and click on the keys and tokens tab. Regenerate the consumer keys and paste them into the supabase dashboard.


The coding part

Fun Part gif

Installing supabase package

npm i @supabase/supabase-js # npm

yarn add @supabase/supabase-js # yarn

Setting up env variables

Create a new file .env.local in the root of your project and add the following variables-


You can get the values from the API tab in the project settings.


Initializing supabase

Create a folder utils and supabaseClient.js file inside of it.

Add the following in it-

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

This will take the environment variables and initialize Supabase for us.

Creating the signup button

Create a button with an onClick function-

  className="relative px-4 py-2 bg-[#1eb872] rounded-lg text-white mt-4"
  Twitter sign in

Creating the signup function

The signup function is pretty simple-

  async function signInWithTwitter() {
    await supabase.auth.signIn({
      provider: "twitter",

If you want to add auth with any other social provider you just need to change the provider's value there.

Let's try to sign in now.

It works 🥳. P.S I also styled the page a bit :P

Getting the user's data

Create a useState to store the data-

const [session, setSession] = useState(null);

Now create this useEffect which will update the session every time the auth session updates-

  useEffect(() => {

    supabase.auth.onAuthStateChange((_event, session) => {
  }, []);

Let's console log the session to see what we get-



Displaying user data and logout button if signed in

We need to create a ternary operator like this-

 <div className="flex flex-col items-center justify-center w-screen h-screen bg-[#D33943]">
      {session ? (
          <h3 className="mt-3 text-lg text-white">
            Welcome {session?.user.user_metadata.full_name}
          <h3 className="mt-3 text-lg text-white">
            You are signed in as {session?}
            className="px-4 py-2 mt-3 text-black bg-white rounded-lg"
            onClick={() => supabase.auth.signOut()}
            Sign out
      ) : (
          <h1 className="text-3xl font-semibold text-white">
            How to add Twitter auth quickly with Supabase to your Next.js site

            className="relative px-4 py-2 bg-[#1eb872] rounded-lg text-white mt-4"
            Twitter sign in

Since I am using I also need to whitelist the domain. So, create a new file next.config.js and add in the following-

module.exports = {
  images: {
    domains: [""],

You also need to restart the server to see the changes. Now our authentication system works perfectly 🥳🥳

Github Repository



Connect with me

Did you find this article valuable?

Support Avneesh Agarwal by becoming a sponsor. Any amount is appreciated!