Social Authentication

The GithubAuthButton, GoogleAuthButton, and XAuthButton components allow users to sign in using OAuth providers like GitHub, Google, and X (Twitter). These components leverage the power of Supabase for managing authentication. By integrating these buttons, you can provide a seamless and secure login experience for your users.

Features

🐙 OAuth Integration: Easily integrate GitHub, Google, and Twitter (X) sign-in options.

📧 Supabase Authentication: Utilizes Supabase for secure and efficient user authentication.

Screenshots

Social Logins
Social Logins
Social Logins
Social Logins
Social Logins
Social Logins
Social Logins
Social Logins

What's Included

< GithubAuthButton />

The GithubAuthButton component is a React component that allows users to sign in with their GitHub account using Supabase OAuth. The signInWithGithub function is attached to the button's onClick event, initiating the GitHub sign-in process when the button is clicked.

< XAuthButton />

The XAuthButton component is a React component that allows users to sign in with X (Twitter) account using Supabase OAuth. The signInWithX function is attached to the button's onClick event, initiating the X sign-in process when the button is clicked.

< GoogleAuthButton />

The GoogleAuthButton component is a React component that allows users to sign in with their Google account using Supabase OAuth. The signInWithGoogle function is attached to the button's onClick event, initiating the Google sign-in process when the button is clicked.

Set Up Component's Needs

Configure Environment Variables

Follow these steps to set up Supabase:

  1. Create a .env.local file in the root directory of your project and add the following environment variables:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url`
 
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
  1. Head over to Database and create a new Supabase project. Your new database has a table for storing your users.
  2. Populate your your project's URL and Anon Key. Place your new URL and anon key into the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY fields in the .env file.

For more information on setting up and configuring Supabase, refer to the Supabase documentation.

How To Do Guide

How To Add a New Social Login

To add a new social login method:

  1. Copy an existing button component: Start by copying an existing button component like XAuthButton or GoogleAuthButton.

  2. Create a new button component: Rename the copied component to match the new social login method you want to add. For example, if you are adding Facebook login, you might create a FacebookAuthButton component.

  3. Modify the Sign-In Function: Update the sign-in function inside the new button component to correspond to the new social login provider. For example, signInWithFacebook for Facebook.

  4. Activate the New Social Login Method in Supabase:

    • Go to the Supabase Dashboard.Navigate to the "Authentication" tab.
    • Under the "Providers" section, enable the new social login method you added (e.g., Facebook).
    • Follow the instructions to configure the provider, including setting up OAuth credentials.