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
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:
- Create a
.env.local
file in the root directory of your project and add the following environment variables:
- Head over to Database and create a new Supabase project. Your new database has a table for storing your users.
- Populate your your project's URL and Anon Key. Place your new URL and anon key into the
NEXT_PUBLIC_SUPABASE_URL
andNEXT_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:
-
Copy an existing button component: Start by copying an existing button component like XAuthButton or GoogleAuthButton.
-
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.
-
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.
-
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.